@graupl/core 1.0.0-beta.17 → 1.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/css/base/button.css.map +1 -1
  2. package/dist/css/base/table.css.map +1 -1
  3. package/dist/css/base.css.map +1 -1
  4. package/dist/css/component/accordion.css.map +1 -1
  5. package/dist/css/component/alert.css.map +1 -1
  6. package/dist/css/component/carousel.css.map +1 -1
  7. package/dist/css/component.css.map +1 -1
  8. package/dist/css/graupl.css.map +1 -1
  9. package/dist/css/layout.css.map +1 -1
  10. package/package.json +1 -1
  11. package/src/scss/base/button/_defaults.scss +23 -7
  12. package/src/scss/base/button/_index.scss +167 -62
  13. package/src/scss/base/button/_mixins.scss +6 -3
  14. package/src/scss/base/table/_defaults.scss +17 -6
  15. package/src/scss/base/table/_index.scss +112 -6
  16. package/src/scss/component/alert/_defaults.scss +22 -6
  17. package/src/scss/component/alert/_index.scss +4 -4
  18. package/src/scss/functions/_theme.scss +54 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graupl/core",
3
- "version": "1.0.0-beta.17",
3
+ "version": "1.0.0-beta.18",
4
4
  "description": "The core module of Graupl, providing essential styles and utilities.",
5
5
  "main": "dist/js/graupl.cjs.js",
6
6
  "module": "dist/js/graupl.es.js",
package/src/scss/base/button/_defaults.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  // Those should be defined as custom properties in the `_variables.scss` file.
8
8
 
9
9
  @use "../../defaults" as root-defaults;
10
+ @use "../../functions/theme";
10
11
  @use "sass:map";
11
12
 
12
13
  // Button selectors.
@@ -34,7 +35,7 @@ $button-disabled-transform: $button-initial-transform !default;
34
35
  // and primary--900 as the border colour.
35
36
  //
36
37
  // Secondary/tertiary buttons will use the same shade for their respective colours.
37
- $-button-state-theme-map: (
38
+ $-button-theme-mappings: (
38
39
  color: 900,
39
40
  border-color: 700,
40
41
  hover-color: 100,
@@ -45,21 +46,36 @@ $-button-state-theme-map: (
45
46
  );
46
47
  $custom-button-state-theme-map: () !default;
47
48
  $button-state-theme-map: () !default;
49
+ $button-theme-mappings: () !default;
48
50
 
49
51
  // @todo remove this once $custom-button-state-theme-map is removed
50
52
  @if $custom-button-state-theme-map != () {
51
- @warn "`$custom-button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-state-theme-map` instead.";
53
+ @warn "`$custom-button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-theme-mappings` instead.";
52
54
 
53
- $button-state-theme-map: map.merge(
54
- $button-state-theme-map,
55
+ $button-theme-mappings: map.merge(
56
+ $button-theme-mappings,
55
57
  $custom-button-state-theme-map
56
58
  );
57
59
  }
58
60
 
61
+ // @todo remove the once $button-state-theme-map is removed
62
+ @if $button-state-theme-map != () {
63
+ @warn "`$button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-theme-mappings` instead.";
64
+
65
+ $button-theme-mappings: map.merge(
66
+ $button-theme-mappings,
67
+ $button-state-theme-map
68
+ );
69
+ }
70
+
59
71
  // Merge the custom button state theme map with the default one.
60
72
  @if $generate-base-theme-map {
61
- $button-state-theme-map: map.merge(
62
- $-button-state-theme-map,
63
- $button-state-theme-map
73
+ $button-theme-mappings: map.merge(
74
+ $-button-theme-mappings,
75
+ $button-theme-mappings
64
76
  );
65
77
  }
78
+
79
+ $-button-theme-map: theme.generate-property-map($button-theme-mappings);
80
+ $button-theme-map: () !default;
81
+ $button-theme-map: map.deep-merge($-button-theme-map, $button-theme-map);
package/src/scss/base/button/_index.scss CHANGED
@@ -11,68 +11,173 @@
11
11
  // - `.tertiary`: A component modifier to use the tertiary colour for the button component.
12
12
  // - `.link`: A component modifier to make the button component look like a link component.
13
13
  //
14
- // The following custom properties control the generated selectors:
15
- // - `--graupl-button-min-width`: The minimum width of the button component.
16
- // - `--graupl-button-min-height`: The minimum height of the button component.
17
- // - `--graupl-button-padding-x`: The horizontal padding of the button component.
18
- // - `--graupl-button-padding-y`: The vertical padding of the button component.
19
- // - `--graupl-button-padding`: The padding of the button component (combines x and y padding).
20
- // - `--graupl-button-font-size`: The font size of the button component.
21
- // - `--graupl-button-transition`: The transition of the button component.
22
- // - `--graupl-button-transition-reduced-motion`: The transition of the button component when reduced motion is enabled.
23
- // - `--graupl-button-transform`: The transform of the button component.
24
- // - `--graupl-button-visited-transform`: The transform of a visited button component.
25
- // - `--graupl-button-focus-transform`: The transform of a focused button component.
26
- // - `--graupl-button-hover-transform`: The transform of a hovered button component.
27
- // - `--graupl-button-active-transform`: The transform of an active button component.
28
- // - `--graupl-button-disabled-transform`: The transform of a disabled button component.
29
- // - `--graupl-button-background`: The background colour of the button component.
30
- // - `--graupl-button-visited-background`: The background colour of a visited button component.
31
- // - `--graupl-button-focus-background`: The background colour of a focused button component.
32
- // - `--graupl-button-hover-background`: The background colour of a hovered button component.
33
- // - `--graupl-button-active-background`: The background colour of an active button component.
34
- // - `--graupl-button-disabled-background`: The background colour of a disabled button component.
35
- // - `--graupl-button-color`: The text colour of the button component.
36
- // - `--graupl-button-visited-color`: The text colour of a visited button component.
37
- // - `--graupl-button-focus-color`: The text colour of a focused button component.
38
- // - `--graupl-button-hover-color`: The text colour of a hovered button component.
39
- // - `--graupl-button-active-color`: The text colour of an active button component.
40
- // - `--graupl-button-disabled-color`: The text colour of a disabled button component.
41
- // - `--graupl-button-border-top-width`: The top border width of the button component.
42
- // - `--graupl-button-border-right-width`: The right border width of the button component.
43
- // - `--graupl-button-border-bottom-width`: The bottom border width of the button component.
44
- // - `--graupl-button-border-left-width`: The left border width of the button component.
45
- // - `--graupl-button-border-width`: The border width of the button component (combines top, right, bottom, and left widths).
46
- // - `--graupl-button-border-top-style`: The top border style of the button component.
47
- // - `--graupl-button-border-right-style`: The right border style of the button component.
48
- // - `--graupl-button-border-bottom-style`: The bottom border style of the button component.
49
- // - `--graupl-button-border-left-style`: The left border style of the button component.
50
- // - `--graupl-button-border-style`: The border style of the button component (combines top, right, bottom, and left styles).
51
- // - `--graupl-button-border-top-left-radius`: The top left border radius of the button component.
52
- // - `--graupl-button-border-top-right-radius`: The top right border radius of the button component.
53
- // - `--graupl-button-border-bottom-right-radius`: The bottom right border radius of the button component.
54
- // - `--graupl-button-border-bottom-left-radius`: The bottom left border radius of the button component.
55
- // - `--graupl-button-border-radius`: The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii).
56
- // - `--graupl-button-border-color`: The border colour of the button component.
57
- // - `--graupl-button-visited-border-color`: The border colour of a visited button component.
58
- // - `--graupl-button-focus-border-color`: The border colour of a focused button component.
59
- // - `--graupl-button-hover-border-color`: The border colour of a hovered button component.
60
- // - `--graupl-button-active-border-color`: The border colour of an active button component.
61
- // - `--graupl-button-disabled-border-color`: The border colour of a disabled button component.
62
- //
63
- // The following variables control the generated selectors:
64
- // - `$selector-base`: The selector base for the component.
65
- // - `$modifier-selector-base`: The selector base for component modifiers.
66
- // - `$button-selector-base`: The selector base for the button component.
67
- // - `$button-selector`: The button component selector.
68
- // - `$button-link-selector-base`: The selector base for the button link component modifier.
69
- // - `$button-link-selector`: The button link component modifier selector.
70
- // - `$button-theme-selector-base`: The selector base for the button theme component modifiers.
71
- // - `$button-theme-selector-prefix`: The button theme component modifier selector prefix.
72
- // - `$button-initial-transform`: The initial transform of the button.
73
- // - `$button-final-transform`: The final transform of the button.
74
- // - `$button-disabled-transform`: The disabled transform of the button.
75
- // - `$custom-button-state-theme-map`: A map of custom button state theme values.
14
+ // The following custom properties can be used to customize the button component:
15
+ // | Property | Description | Default Value |
16
+ // | --- | --- | --- |
17
+ // | `--graupl-button-min-width` | The minimum width of the button component. | `var(--graupl-interactive-min-width)` |
18
+ // | `--graupl-button-min-height` | The minimum height of the button component. | `var(--graupl-interactive-min-height)` |
19
+ // | `--graupl-button-padding-x` | The horizontal padding of the button component. | `var(--graupl-spacer-5)` |
20
+ // | `--graupl-button-padding-y` | The vertical padding of the button component. | `var(--graupl-spacer-3)` |
21
+ // | `--graupl-button-padding` | The padding of the button component (combines x and y padding). | `var(--graupl-button-padding-x) var(--graupl-button-padding-y)` |
22
+ // | `--graupl-button-font-size` | The font size of the button component. | `var(--graupl-font-size-base)` |
23
+ // | `--graupl-button-transition` | The transition of the button component. | `background var(--graupl-transition-duration-fast), color var(--graupl-transition-duration-fast), transform var(--graupl-transition-duration-fast)` |
24
+ // | `--graupl-button-transition-reduced-motion` | The transition of the button component when reduced motion is enabled. | `background var(--graupl-transition-duration-none), color var(--graupl-transition-duration-none)` |
25
+ // | `--graupl-button-transform` | The transform of the button component. | `0` |
26
+ // | `--graupl-button-visited-transform` | The transform of a visited button component. | `var(--graupl-button-transform)` |
27
+ // | `--graupl-button-focus-transform` | The transform of a focused button component. | `var(--graupl-button-transform)` |
28
+ // | `--graupl-button-hover-transform` | The transform of a hovered button component. | `var(--graupl-button-transform)` |
29
+ // | `--graupl-button-active-transform` | The transform of an active button component. | `scale(0.95)` |
30
+ // | `--graupl-button-disabled-transform` | The transform of a disabled button component. | `0` |
31
+ // | `--graupl-button-background` | The background colour of the button component. | `var(--graupl-background)` |
32
+ // | `--graupl-button-visited-background` | The background colour of a visited button component. | `var(--graupl-button-background)` |
33
+ // | `--graupl-button-focus-background` | The background colour of a focused button component. | `var(--graupl-button-background)` |
34
+ // | `--graupl-button-hover-background` | The background colour of a hovered button component. | `var(--graupl-color)` |
35
+ // | `--graupl-button-active-background` | The background colour of an active button component. | `var(--graupl-button-hover-background)` |
36
+ // | `--graupl-button-disabled-background` | The background colour of a disabled button component. | `var(--graupl-background)` |
37
+ // | `--graupl-button-color` | The text colour of the button component. | `var(--graupl-color)` |
38
+ // | `--graupl-button-visited-color` | The text colour of a visited button component. | `var(--graupl-button-color)` |
39
+ // | `--graupl-button-focus-color` | The text colour of a focused button component. | `var(--graupl-button-color)` |
40
+ // | `--graupl-button-hover-color` | The text colour of a hovered button component. | `var(--graupl-background)` |
41
+ // | `--graupl-button-active-color` | The text colour of an active button component. | `var(--graupl-button-hover-color)` |
42
+ // | `--graupl-button-disabled-color` | The text colour of a disabled button component. | `var(--graupl-theme-active--primary--200)` |
43
+ // | `--graupl-button-border-top-width` | The top border width of the button component. | `var(--graupl-border-top-width)` |
44
+ // | `--graupl-button-border-right-width` | The right border width of the button component. | `var(--graupl-border-right-width)` |
45
+ // | `--graupl-button-border-bottom-width` | The bottom border width of the button component. | `var(--graupl-border-bottom-width)` |
46
+ // | `--graupl-button-border-left-width` | The left border width of the button component. | `var(--graupl-border-left-width)` |
47
+ // | `--graupl-button-border-width` | The border width of the button component (combines top, right, bottom, and left widths). | `var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width)` |
48
+ // | `--graupl-button-border-top-style` | The top border style of the button component. | `var(--graupl-border-top-style)` |
49
+ // | `--graupl-button-border-right-style` | The right border style of the button component. | `var(--graupl-border-right-style)` |
50
+ // | `--graupl-button-border-bottom-style` | The bottom border style of the button component. | `var(--graupl-border-bottom-style)` |
51
+ // | `--graupl-button-border-left-style` | The left border style of the button component. | `var(--graupl-border-left-style)` |
52
+ // | `--graupl-button-border-style` | The border style of the button component (combines top, right, bottom, and left styles). | `var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style)` |
53
+ // | `--graupl-button-border-top-left-radius` | The top left border radius of the button component. | `var(--graupl-border-top-left-radius)` |
54
+ // | `--graupl-button-border-top-right-radius` | The top right border radius of the button component. | `var(--graupl-border-top-right-radius)` |
55
+ // | `--graupl-button-border-bottom-right-radius` | The bottom right border radius of the button component. | `var(--graupl-border-bottom-right-radius)` |
56
+ // | `--graupl-button-border-bottom-left-radius` | The bottom left border radius of the button component. | `var(--graupl-border-bottom-left-radius)` |
57
+ // | `--graupl-button-border-radius` | The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius)` |
58
+ // | `--graupl-button-border-color` | The border colour of the button component. | `var(--graupl-border-color)` |
59
+ // | `--graupl-button-visited-border-color` | The border colour of a visited button component. | `var(--graupl-button-border-color)` |
60
+ // | `--graupl-button-focus-border-color` | The border colour of a focused button component. | `var(--graupl-button-border-color)` |
61
+ // | `--graupl-button-hover-border-color` | The border colour of a hovered button component. | `var(--graupl-border-color)` |
62
+ // | `--graupl-button-active-border-color` | The border colour of an active button component. | `var(--graupl-button-hover-border-color)` |
63
+ // | `--graupl-button-disabled-border-color` | The border colour of a disabled button component. | `var(--graupl-theme-active--primary--200)` |
64
+ //
65
+ // The following sass variables can be used to customize the generation of the button component:
66
+ // | Variable | Description | Default Value |
67
+ // | --- | --- | --- |
68
+ // | `$selector-base` | The selector base for the component. | `.` |
69
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `.` |
70
+ // | `$generate-base-theme-map` | A flag to generate the base theme maps for button variants. | `true` |
71
+ // | `$button-selector-base` | The selector base for the button component. | `$selector-base` |
72
+ // | `$button-selector` | The button component selector. | `button` |
73
+ // | `$button-link-selector-base` | The selector base for the button link component modifier. | `$modifier-selector-base` |
74
+ // | `$button-link-selector` | The button link component modifier selector. | `link` |
75
+ // | `$button-theme-selector-base` | The selector base for the button theme component modifiers. | `$modifier-selector-base` |
76
+ // | `$button-theme-selector-prefix` | The button theme component modifier selector prefix. | `""` |
77
+ // | `$button-initial-transform` | The initial transform of the button. | `none` |
78
+ // | `$button-final-transform` | The final transform of the button. | `scale(0.95)` |
79
+ // | `$button-disabled-transform` | The disabled transform of the button. | `$button-initial-transform` |
80
+ // | `$button-theme-mappings` | A map of properties and color shades used generate all button variants. | `()` |
81
+ // | `$button-theme-map` | A map of all properties, colors, and color shades used to generate all button variants. | `()` |
82
+ //
83
+ // Using `$button-theme-mappings`
84
+ //
85
+ // `$button-theme-mappings` is a 1-level map of properties and shade values.
86
+ //
87
+ // e.g.
88
+ // ```scss
89
+ // $button-theme-mappings: (
90
+ // border-color: 700,
91
+ // )
92
+ // ```
93
+ //
94
+ // This directly[1] maps to all button variants, telling them what shade to use for said property.
95
+ // All button variants will use the following based on the example above:
96
+ // - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--700`,
97
+ // - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and
98
+ // - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--700`.
99
+ //
100
+ // You can use this to customize _all_ buttons variants in the same way.
101
+ //
102
+ // For example, if you use the following map:
103
+ // ```scss
104
+ // $button-theme-mappings: (
105
+ // border-color: 500,
106
+ // )
107
+ // ```
108
+ //
109
+ // All button variants will use the following:
110
+ // - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--500`,
111
+ // - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--500`, and
112
+ // - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--500`.
113
+ //
114
+ // [1] `$button-theme-mappings` gets parsed into a larger, more explicit map: `$button-theme-map`.
115
+ //
116
+ // Using `$button-theme-map`
117
+ //
118
+ // `$button-theme-map` is a multi-level map of properties, colors, and shade values.
119
+ //
120
+ // e.g.
121
+ // ```scss
122
+ // $button-theme-map: (
123
+ // primary: (
124
+ // border-color: (
125
+ // color: primary,
126
+ // shade: 700
127
+ // ),
128
+ // ),
129
+ // secondary: (
130
+ // border-color: (
131
+ // color: secondary,
132
+ // shade: 700
133
+ // ),
134
+ // ),
135
+ // tertiary: (
136
+ // border-color: (
137
+ // color: tertiary,
138
+ // shade: 700
139
+ // ),
140
+ // ),
141
+ // )
142
+ // ```
143
+ //
144
+ // This directly maps to all button variants, telling them what shade to use for said property.
145
+ // The button variants will use the following based on the example above:
146
+ // - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--primary--700`,
147
+ // - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and
148
+ // - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--tertiary--700`.
149
+ //
150
+ // You can use this to customize button variants individually.
151
+ //
152
+ // For example, if you use the following map:
153
+ //
154
+ // ```scss
155
+ // $button-theme-map: (
156
+ // primary: (
157
+ // border-color: (
158
+ // color: secondary,
159
+ // shade: 700
160
+ // ),
161
+ // ),
162
+ // secondary: (
163
+ // border-color: (
164
+ // color: secondary,
165
+ // shade: 700
166
+ // ),
167
+ // ),
168
+ // tertiary: (
169
+ // border-color: (
170
+ // color: secondary,
171
+ // shade: 700
172
+ // ),
173
+ // ),
174
+ // )
175
+ // ```
176
+ //
177
+ // The button variants will use the following:
178
+ // - Primary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`,
179
+ // - Secondary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`, and
180
+ // - Tertiary buttons will have their `--graupl-button-border-color` property set to `--graupl-theme-active--secondary--700`.
76
181
  //
77
182
  // @example
78
183
  // <button class="button primary">Primary Button</button>
package/src/scss/base/button/_mixins.scss CHANGED
@@ -61,11 +61,14 @@
61
61
  background: $button-background;
62
62
  color: $button-color;
63
63
 
64
- @each $color in theme.get-colors() {
64
+ @each $color, $map in defaults.$button-theme-map {
65
65
  // e.g. &.primary, &.secondary, &.tertiary
66
66
  &#{defaults.$button-theme-selector-base}#{defaults.$button-theme-selector-prefix}#{$color} {
67
- @each $prop, $shade in defaults.$button-state-theme-map {
68
- --#{root-defaults.$prefix}button-#{$prop}: #{theme.get($color, $shade)};
67
+ @each $prop, $value in $map {
68
+ --#{root-defaults.$prefix}button-#{$prop}: #{theme.get(
69
+ map.get($value, color),
70
+ map.get($value, shade)
71
+ )};
69
72
  }
70
73
  }
71
74
  }
package/src/scss/base/table/_defaults.scss CHANGED
@@ -6,8 +6,9 @@
6
6
  // They should not be used to define direct property values (i.e. font-size, color, etc.).
7
7
  // Those should be defined as custom properties in the `_variables.scss` file.
8
8
 
9
- @use "sass:map";
10
9
  @use "../../defaults" as root-defaults;
10
+ @use "../../functions/theme";
11
+ @use "sass:map";
11
12
 
12
13
  // Table selectors.
13
14
  $selector-base: root-defaults.$element-selector-base !default;
@@ -54,7 +55,7 @@ $table-caption-side: bottom !default;
54
55
  // and primary--100 as the header text colour.
55
56
  //
56
57
  // Secondary/tertiary tables will use the same shade for their respective colours.
57
- $-table-theme-map: (
58
+ $-table-theme-mappings: (
58
59
  header-background: 700,
59
60
  header-color: 100,
60
61
  striped-background: 200,
@@ -66,16 +67,26 @@ $-table-theme-map: (
66
67
  highlight-color: 100,
67
68
  );
68
69
  $custom-table-theme-map: () !default;
69
- $table-theme-map: () !default;
70
+ $table-theme-mappings: () !default;
70
71
 
71
72
  // @todo remove this once $custom-table-theme-map is removed
72
73
  @if $custom-table-theme-map != () {
73
- @warn "`$custom-table-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$table-theme-map` instead.";
74
+ @warn "`$custom-table-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$table-theme-mappings` instead.";
74
75
 
75
- $table-theme-map: map.merge($table-theme-map, $custom-table-theme-map);
76
+ $table-theme-mappings: map.merge(
77
+ $table-theme-mappings,
78
+ $custom-table-theme-map
79
+ );
76
80
  }
77
81
 
78
82
  // Merge the custom table theme map with the default one.
79
83
  @if $generate-base-theme-map {
80
- $table-theme-map: map.merge($-table-theme-map, $table-theme-map);
84
+ $table-theme-mappings: map.merge(
85
+ $-table-theme-mappings,
86
+ $table-theme-mappings
87
+ );
81
88
  }
89
+
90
+ $-table-theme-map: theme.generate-property-map($table-theme-mappings);
91
+ $table-theme-map: () !default;
92
+ $table-theme-map: map.deep-merge($-table-theme-map, $table-theme-map);
package/src/scss/base/table/_index.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  // - `.secondary`: A component modifier to apply the secondary colour to the table component.
21
21
  // - `.tertiary`: A component modifier to apply the tertiary colour to the table component.
22
22
  //
23
- // The following custom properties control the generated selectors:
23
+ // The following custom properties can be used to customize the table component:
24
24
  // - `--graupl-table-caption-side`: The caption side of the table component.
25
25
  // - `--graupl-table-caption-padding-x`: The horizontal padding of the table caption component.
26
26
  // - `--graupl-table-caption-padding-y`: The vertical padding of the table caption component.
@@ -30,7 +30,7 @@
30
30
  // - `--graupl-table-header-padding-y`: The vertical padding of the table header component.
31
31
  // - `--graupl-table-header-padding`: The padding of the table header component (combines x and y padding).
32
32
  // - `--graupl-table-header-background`: The background colour of the table header component.
33
- // - `--graupl-table-header-color`: The text colour of the table header component.
33
+ // - `--graupl-table-header-background`: The text colour of the table header component.
34
34
  // - `--graupl-table-cell-padding-x`: The horizontal padding of the table cell component.
35
35
  // - `--graupl-table-cell-padding-y`: The vertical padding of the table cell component.
36
36
  // - `--graupl-table-cell-padding`: The padding of the table cell component (combines x and y padding).
@@ -91,9 +91,10 @@
91
91
  // - `--graupl-table-highlight-background`: The background colour of the highlighted table component modifier.
92
92
  // - `--graupl-table-highlight-color`: The text colour of the highlighted table component modifier.
93
93
  //
94
- // The following variables control the generated selectors:
94
+ // The following sass variables can be used to customize the generation of the table component:
95
95
  // - `$selector-base`: The selector base for the component.
96
96
  // - `$modifier-selector-base`: The selector base for component modifiers.
97
+ // - `$generate-base-theme-map`: A flag to generate the base theme maps for table variants.
97
98
  // - `$table-selector-base`: The selector base for the table component.
98
99
  // - `$table-selector`: The selector for the table component.
99
100
  // - `$table-caption-selector-base`: The selector base for the table caption component.
@@ -122,6 +123,107 @@
122
123
  // - `$table-highlight-selector`: The selector for the highlighted table component modifier.
123
124
  // - `$table-responsive-selector-base`: The selector base for the responsive table component modifier.
124
125
  // - `$table-responsive-selector`: The selector for the responsive table component modifier.
126
+ // - `$table-theme-mappings`: A map of properties and color shades used generate all table variants.
127
+ // - `$table-theme-map`: A map of all properties, colors, and color shades used to generate all table variants.
128
+ //
129
+ // Using `$table-theme-mappings`
130
+ //
131
+ // `$table-theme-mappings` is a 1-level map of properties and shade values.
132
+ //
133
+ // e.g.
134
+ // ```scss
135
+ // $table-theme-mappings: (
136
+ // header-background: 700,
137
+ // )
138
+ // ```
139
+ //
140
+ // This directly[1] maps to all table variants, telling them what shade to use for said property.
141
+ // All table variants will use the following based on the example above:
142
+ // - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,
143
+ // - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and
144
+ // - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.
145
+ //
146
+ // You can use this to customize _all_ tables variants in the same way.
147
+ //
148
+ // For example, if you use the following map:
149
+ // ```scss
150
+ // $table-theme-mappings: (
151
+ // header-background: 500,
152
+ // )
153
+ // ```
154
+ //
155
+ // All table variants will use the following:
156
+ // - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--500`,
157
+ // - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--500`, and
158
+ // - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--500`.
159
+ //
160
+ // [1] `$table-theme-mappings` gets parsed into a larger, more explicit map: `$table-theme-map`.
161
+ //
162
+ // Using `$table-theme-map`
163
+ //
164
+ // `$table-theme-map` is a multi-level map of properties, colors, and shade values.
165
+ //
166
+ // e.g.
167
+ // ```scss
168
+ // $table-theme-map: (
169
+ // primary: (
170
+ // header-background: (
171
+ // color: primary,
172
+ // shade: 700
173
+ // ),
174
+ // ),
175
+ // secondary: (
176
+ // header-background: (
177
+ // color: secondary,
178
+ // shade: 700
179
+ // ),
180
+ // ),
181
+ // tertiary: (
182
+ // header-background: (
183
+ // color: tertiary,
184
+ // shade: 700
185
+ // ),
186
+ // ),
187
+ // )
188
+ // ```
189
+ //
190
+ // This directly maps to all table variants, telling them what shade to use for said property.
191
+ // The table variants will use the following based on the example above:
192
+ // - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--primary--700`,
193
+ // - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and
194
+ // - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--tertiary--700`.
195
+ //
196
+ // You can use this to customize table variants individually.
197
+ //
198
+ // For example, if you use the following map:
199
+ //
200
+ // ```scss
201
+ // $table-theme-map: (
202
+ // primary: (
203
+ // header-background: (
204
+ // color: secondary,
205
+ // shade: 700
206
+ // ),
207
+ // ),
208
+ // secondary: (
209
+ // header-background: (
210
+ // color: secondary,
211
+ // shade: 700
212
+ // ),
213
+ // ),
214
+ // tertiary: (
215
+ // header-background: (
216
+ // color: secondary,
217
+ // shade: 700
218
+ // ),
219
+ // ),
220
+ // )
221
+ // ```
222
+ //
223
+ // The table variants will use the following:
224
+ // - Primary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`,
225
+ // - Secondary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`, and
226
+ // - Tertiary tables will have their `--graupl-table-header-background` property set to `--graupl-theme-active--secondary--700`.
125
227
  //
126
228
  // @example
127
229
  // <table class="table bordered">
@@ -149,6 +251,7 @@
149
251
  @use "../../mixins/layer" as *;
150
252
  @use "../../defaults" as root-defaults;
151
253
  @use "../../functions/theme";
254
+ @use "sass:map";
152
255
 
153
256
  @include layer(base) {
154
257
  // table
@@ -223,13 +326,16 @@
223
326
  @include layer(theme) {
224
327
  // table
225
328
  #{defaults.$table-selector-base}#{defaults.$table-selector} {
226
- @each $color in theme.get-colors() {
329
+ @each $color, $map in defaults.$table-theme-map {
227
330
  // e.g. &.primary, &.secondary, &.tertiary,
228
331
  // e.g. .primary, .secondary, .tertiary
229
332
  &#{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color},
230
333
  #{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color} {
231
- @each $prop, $key in defaults.$table-theme-map {
232
- --#{root-defaults.$prefix}table-#{$prop}: #{theme.get($color, $key)};
334
+ @each $prop, $value in $map {
335
+ --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
336
+ map.get($value, color),
337
+ map.get($value, shade)
338
+ )};
233
339
  }
234
340
  }
235
341
  }
package/src/scss/component/alert/_defaults.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  // Those should be defined as custom properties in the `_variables.scss` file.
8
8
 
9
9
  @use "../../defaults" as root-defaults;
10
+ @use "../../functions/theme";
10
11
  @use "sass:map";
11
12
 
12
13
  // Alert selectors.
@@ -31,7 +32,7 @@ $alert-transition-selector: ".transitioning" !default;
31
32
  // and primary--900 as the border colour.
32
33
  //
33
34
  // Secondary/tertiary alerts will use the same shade for their respective colours.
34
- $-alert-state-theme-map: (
35
+ $-alert-theme-mappings: (
35
36
  color: 900,
36
37
  background: 200,
37
38
  border-color: 700,
@@ -46,21 +47,36 @@ $-alert-state-theme-map: (
46
47
  );
47
48
  $custom-alert-state-theme-map: () !default;
48
49
  $alert-state-theme-map: () !default;
50
+ $alert-theme-mappings: () !default;
49
51
 
50
52
  // @todo remove this once $custom-alert-state-theme-map is removed
51
53
  @if $custom-alert-state-theme-map != () {
52
- @warn "`$custom-alert-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$alert-state-theme-map` instead.";
54
+ @warn "`$custom-alert-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$alert-theme-mappings` instead.";
53
55
 
54
56
  $alert-state-theme-map: map.merge(
55
- $alert-state-theme-map,
57
+ $alert-theme-mappings,
56
58
  $custom-alert-state-theme-map
57
59
  );
58
60
  }
59
61
 
62
+ // @todo remove the once $alert-state-theme-map is removed
63
+ @if $alert-state-theme-map != () {
64
+ @warn "`$alert-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$alert-theme-mappings` instead.";
65
+
66
+ $alert-theme-mappings: map.merge(
67
+ $alert-theme-mappings,
68
+ $alert-state-theme-map
69
+ );
70
+ }
71
+
60
72
  // Merge the custom alert state theme map with the default one.
61
73
  @if $generate-base-theme-map {
62
- $alert-state-theme-map: map.merge(
63
- $-alert-state-theme-map,
64
- $alert-state-theme-map
74
+ $alert-theme-mappings: map.merge(
75
+ $-alert-theme-mappings,
76
+ $alert-theme-mappings
65
77
  );
66
78
  }
79
+
80
+ $-alert-theme-map: theme.generate-property-map($alert-theme-mappings);
81
+ $alert-theme-map: () !default;
82
+ $alert-theme-map: map.deep-merge($-alert-theme-map, $alert-theme-map);