Skip to content

Commit 44c4825

Browse files
mdomdo
committed
holy shit it compiles
1 parent 606bc9f commit 44c4825

File tree

10 files changed

+264
-2
lines changed

10 files changed

+264
-2
lines changed

‎scss/_functions.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@use "sass:color";
22
@use "sass:map";
33
@use "sass:math";
4-
@use "variables" as *;
4+
// @use "variables" as *;
5+
@use "config" as *;
56

67
// Bootstrap functions
78
//

‎scss/_maps.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "sass:map";
22
@use "colors" as *;
33
@use "functions" as *;
4+
@use "config" as *;
45
@use "variables" as *;
56

67
// Re-assigned maps

‎scss/_root.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "colors" as *;
2+
@use "config" as *;
23
@use "variables" as *;
34
@use "maps" as *;
45
@use "vendor/rfs" as *;

‎scss/_theme.scss

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
@use "config" as *;
2+
@use "colors" as *;
3+
4+
@function theme-color-values($key) {
5+
$result: ();
6+
7+
@each $color-name, $color-map in $new-theme-colors {
8+
@if map-has-key($color-map, $key) {
9+
$result: map-merge($result, ($color-name: map-get($color-map, $key)));
10+
}
11+
}
12+
13+
@return $result;
14+
}
15+
16+
// Recursive mixin to handle nested maps
17+
@mixin create-css-vars($map, $parent-key: "") {
18+
@each $key, $value in $map {
19+
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
20+
21+
@if type-of($value) == "map" {
22+
@include create-css-vars($value, $current-key);
23+
} @else {
24+
--#{$prefix}#{$current-key}: #{$value};
25+
}
26+
}
27+
}
28+
29+
// scss-docs-start theme-colors
30+
$new-theme-colors: (
31+
"primary": (
32+
"base": var(--#{$prefix}blue-500),
33+
"text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
34+
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
35+
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
36+
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
37+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
38+
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
39+
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
40+
"contrast": var(--#{$prefix}white)
41+
),
42+
"accent": (
43+
"base": var(--#{$prefix}indigo-500),
44+
"text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
45+
"bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
46+
"bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
47+
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
48+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
49+
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
50+
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
51+
"contrast": var(--#{$prefix}white)
52+
),
53+
"danger": (
54+
"base": var(--#{$prefix}red-500),
55+
"text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
56+
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
57+
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
58+
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
59+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
60+
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
61+
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
62+
"contrast": var(--#{$prefix}white)
63+
),
64+
"warning": (
65+
"base": var(--#{$prefix}yellow-500),
66+
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
67+
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
68+
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
69+
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
70+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
71+
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
72+
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
73+
"contrast": var(--#{$prefix}gray-900)
74+
),
75+
"success": (
76+
"base": var(--#{$prefix}green-500),
77+
"text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
78+
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
79+
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
80+
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
81+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
82+
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
83+
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
84+
"contrast": var(--#{$prefix}white)
85+
),
86+
"info": (
87+
"base": var(--#{$prefix}cyan-500),
88+
"text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
89+
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
90+
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
91+
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
92+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
93+
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
94+
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
95+
"contrast": var(--#{$prefix}gray-900)
96+
),
97+
"secondary": (
98+
"base": var(--#{$prefix}gray-300),
99+
"text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
100+
"bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
101+
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
102+
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
103+
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
104+
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
105+
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
106+
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
107+
)
108+
) !default;
109+
// scss-docs-end theme-colors
110+
111+
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
112+
$theme-bgs: (
113+
null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
114+
"1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
115+
"2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
116+
"3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
117+
"white": var(--#{$prefix}white),
118+
"black": var(--#{$prefix}black),
119+
"transparent": transparent,
120+
"inherit": inherit,
121+
) !default;
122+
123+
$theme-fgs: (
124+
null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
125+
"1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
126+
"2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
127+
"3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
128+
"white": var(--#{$prefix}white),
129+
"black": var(--#{$prefix}black),
130+
"inherit": inherit,
131+
) !default;
132+
133+
$theme-borders: (
134+
null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
135+
"muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
136+
"subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
137+
"emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
138+
) !default;
139+
140+
// $util-opacity: (
141+
// "10": .1,
142+
// "20": .2,
143+
// "30": .3,
144+
// "40": .4,
145+
// "50": .5,
146+
// "60": .6,
147+
// "70": .7,
148+
// "80": .8,
149+
// "90": .9,
150+
// "100": 1
151+
// ) !default;

‎scss/_utilities.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:map";
22
@use "colors" as *;
3+
@use "config" as *;
34
@use "variables" as *;
45
@use "functions" as *;
56
@use "maps" as *;

‎scss/_variables.scss

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:color";
22
@use "colors" as *;
3+
@use "config" as *;
34
@use "functions" as *;
45

56
// Variables
@@ -1448,3 +1449,106 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
14481449
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
14491450

14501451
$pre-color: null !default;
1452+
1453+
// Dark color mode variables
1454+
//
1455+
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
1456+
1457+
//
1458+
// Global colors
1459+
//
1460+
1461+
// scss-docs-start sass-dark-mode-vars
1462+
// scss-docs-start theme-text-dark-variables
1463+
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
1464+
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
1465+
$success-text-emphasis-dark: tint-color($success, 40%) !default;
1466+
$info-text-emphasis-dark: tint-color($info, 40%) !default;
1467+
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
1468+
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
1469+
$light-text-emphasis-dark: $gray-100 !default;
1470+
$dark-text-emphasis-dark: $gray-300 !default;
1471+
// scss-docs-end theme-text-dark-variables
1472+
1473+
// scss-docs-start theme-bg-subtle-dark-variables
1474+
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
1475+
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
1476+
$success-bg-subtle-dark: shade-color($success, 80%) !default;
1477+
$info-bg-subtle-dark: shade-color($info, 80%) !default;
1478+
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
1479+
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
1480+
$light-bg-subtle-dark: $gray-800 !default;
1481+
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
1482+
// scss-docs-end theme-bg-subtle-dark-variables
1483+
1484+
// scss-docs-start theme-border-subtle-dark-variables
1485+
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
1486+
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
1487+
$success-border-subtle-dark: shade-color($success, 40%) !default;
1488+
$info-border-subtle-dark: shade-color($info, 40%) !default;
1489+
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
1490+
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
1491+
$light-border-subtle-dark: $gray-700 !default;
1492+
$dark-border-subtle-dark: $gray-800 !default;
1493+
// scss-docs-end theme-border-subtle-dark-variables
1494+
1495+
$body-color-dark: $gray-300 !default;
1496+
$body-bg-dark: $gray-900 !default;
1497+
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
1498+
$body-secondary-bg-dark: $gray-800 !default;
1499+
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
1500+
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
1501+
$body-emphasis-color-dark: $white !default;
1502+
$border-color-dark: $gray-700 !default;
1503+
$border-color-translucent-dark: rgba($white, .15) !default;
1504+
$headings-color-dark: inherit !default;
1505+
$link-color-dark: tint-color($primary, 40%) !default;
1506+
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
1507+
$code-color-dark: tint-color($code-color, 40%) !default;
1508+
$mark-color-dark: $body-color-dark !default;
1509+
$mark-bg-dark: $yellow-800 !default;
1510+
1511+
1512+
//
1513+
// Forms
1514+
//
1515+
1516+
$form-select-indicator-color-dark: $body-color-dark !default;
1517+
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
1518+
1519+
$form-switch-color-dark: rgba($white, .25) !default;
1520+
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
1521+
1522+
// scss-docs-start form-validation-colors-dark
1523+
$form-valid-color-dark: $green-300 !default;
1524+
$form-valid-border-color-dark: $green-300 !default;
1525+
$form-invalid-color-dark: $red-300 !default;
1526+
$form-invalid-border-color-dark: $red-300 !default;
1527+
// scss-docs-end form-validation-colors-dark
1528+
1529+
1530+
//
1531+
// Accordion
1532+
//
1533+
1534+
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
1535+
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
1536+
1537+
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
1538+
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
1539+
// scss-docs-end sass-dark-mode-vars
1540+
1541+
1542+
//
1543+
// Carousel
1544+
//
1545+
1546+
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
1547+
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
1548+
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
1549+
1550+
//
1551+
// Close button
1552+
//
1553+
1554+
$btn-close-filter-dark: $btn-close-white-filter !default;

‎scss/layout/_breakpoints.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use "sass:map";
2-
@use "../variables" as *;
2+
@use "../config" as *;
33

44
// Breakpoint viewport sizes and media queries.
55
//

‎scss/mixins/_color-mode.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "../config" as *;
12

23
// scss-docs-start color-mode-mixin
34
@mixin color-mode($mode: light, $root: false) {

‎scss/mixins/_utilities.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:map";
2+
@use "../config" as *;
23

34
// Utility generator
45
// Used to generate utilities & print utilities

‎scss/utilities/_api.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:map";
22
@use "../variables" as *;
3+
@use "../config" as *;
34
@use "../vendor/rfs" as *;
45
@use "../layout/breakpoints" as *;
56
@use "../mixins/utilities" as *;

0 commit comments

Comments
 (0)