@graupl/icons 1.0.0-beta.39 → 1.0.0-beta.41
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.
- package/dist/css/base/button.css.map +1 -1
- package/dist/css/base/link.css.map +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/icon.css.map +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/icon.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/_index.scss +1 -1
- package/src/scss/base/_index.scss +1 -1
- package/src/scss/base/button/_index.scss +7 -3
- package/src/scss/base/link/_index.scss +7 -3
- package/src/scss/component/_index.scss +1 -1
- package/src/scss/component/icon/_index.scss +19 -19
- package/src/scss/component/icon/_variables.scss +14 -1
package/package.json
CHANGED
package/src/scss/_index.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @
|
|
1
|
+
// @graupl/icons button base styles.
|
|
2
2
|
//
|
|
3
3
|
// This module provides icon component integration for the button component.
|
|
4
4
|
//
|
|
@@ -8,10 +8,14 @@
|
|
|
8
8
|
// - `.button`: The button component.
|
|
9
9
|
//
|
|
10
10
|
// The following custom properties control the generated selectors:
|
|
11
|
-
//
|
|
11
|
+
// | Property | Description | Default Value |
|
|
12
|
+
// | -------- | ----------------------------------------------------- | ------------- |
|
|
13
|
+
// | N/A | This module does not define custom properties. | N/A |
|
|
12
14
|
//
|
|
13
15
|
// The following variables control the generated selectors:
|
|
14
|
-
//
|
|
16
|
+
// | Variable | Description | Default Value |
|
|
17
|
+
// | -------- | ----------------------------------------------------- | ------------- |
|
|
18
|
+
// | N/A | This module does not define module-specific defaults. | N/A |
|
|
15
19
|
//
|
|
16
20
|
// @example
|
|
17
21
|
// <button class="button icon-after">Button</button>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @
|
|
1
|
+
// @graupl/icons link base styles.
|
|
2
2
|
//
|
|
3
3
|
// This module provides icon component integration for the link component.
|
|
4
4
|
//
|
|
@@ -8,10 +8,14 @@
|
|
|
8
8
|
// - `a`: The link component.
|
|
9
9
|
//
|
|
10
10
|
// The following custom properties control the generated selectors:
|
|
11
|
-
//
|
|
11
|
+
// | Property | Description | Default Value |
|
|
12
|
+
// | -------- | ----------------------------------------------------- | ------------- |
|
|
13
|
+
// | N/A | This module does not define custom properties. | N/A |
|
|
12
14
|
//
|
|
13
15
|
// The following variables control the generated selectors:
|
|
14
|
-
//
|
|
16
|
+
// | Variable | Description | Default Value |
|
|
17
|
+
// | -------- | ----------------------------------------------------- | ------------- |
|
|
18
|
+
// | N/A | This module does not define module-specific defaults. | N/A |
|
|
15
19
|
//
|
|
16
20
|
// @example
|
|
17
21
|
// <a href="#" class="icon-after">Link</a>
|
|
@@ -19,25 +19,25 @@
|
|
|
19
19
|
// | `--graupl-icon-spacer` | Spacer size used when placing the icon. | `var(--graupl-spacer-2)` |
|
|
20
20
|
//
|
|
21
21
|
// The following sass variables can be used to customize the generation of the icon component:
|
|
22
|
-
// | Variable | Description | Default Value
|
|
23
|
-
// | -------------------------------- | ------------------------------------------------------------------- |
|
|
24
|
-
// | `$selector-base` | Selector base for the component. | `"."`
|
|
25
|
-
// | `$modifier-selector-base` | Selector base for component modifiers. | `"."`
|
|
26
|
-
// | `$generate-base-theme-map` | Flag to generate base theme maps for icon variants. | `true`
|
|
27
|
-
// | `$themeable` | Flag to generate theme modifiers. | `true`
|
|
28
|
-
// | `$icon-selector-base` | Selector base for the icon element. |
|
|
29
|
-
// | `$icon-selector` | Selector for the icon element. | `"icon"`
|
|
30
|
-
// | `$icon-before-selector` | Selector for the before helper. | `"icon-before"`
|
|
31
|
-
// | `$icon-after-selector` | Selector for the after helper. | `"icon-after"`
|
|
32
|
-
// | `$icon-theme-selector-base` | Selector base used for theme modifiers. |
|
|
33
|
-
// | `$icon-theme-selector-prefix` | Selector prefix used for theme modifiers. | `""`
|
|
34
|
-
// | `$icon-prefix-selector-base` | Selector base for icon name modifiers. |
|
|
35
|
-
// | `$icon-prefix-selector` | Selector used for icon name modifiers. | `""`
|
|
36
|
-
// | `$icon-display` | Default display value applied to icons. | `inline-block`
|
|
37
|
-
// | `$icon-size` | Default size used for icon width/height. | `1.25em`
|
|
38
|
-
// | `$icons` | Map of icon names to their SVG data/URLs. | `()`
|
|
39
|
-
// | `$icon-theme-mappings` | Map of properties and color shades used to generate icon variants. | `()`
|
|
40
|
-
// | `$icon-theme-map` | Resolved map of properties, colors, and shades for icon variants. | `()`
|
|
22
|
+
// | Variable | Description | Default Value |
|
|
23
|
+
// | -------------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------- |
|
|
24
|
+
// | `$selector-base` | Selector base for the component. | `"."` |
|
|
25
|
+
// | `$modifier-selector-base` | Selector base for component modifiers. | `"."` |
|
|
26
|
+
// | `$generate-base-theme-map` | Flag to generate base theme maps for icon variants. | `true` |
|
|
27
|
+
// | `$themeable` | Flag to generate theme modifiers. | `true` |
|
|
28
|
+
// | `$icon-selector-base` | Selector base for the icon element. | `"."` |
|
|
29
|
+
// | `$icon-selector` | Selector for the icon element. | `"icon"` |
|
|
30
|
+
// | `$icon-before-selector` | Selector for the before helper. | `"icon-before"` |
|
|
31
|
+
// | `$icon-after-selector` | Selector for the after helper. | `"icon-after"` |
|
|
32
|
+
// | `$icon-theme-selector-base` | Selector base used for theme modifiers. | `"."` |
|
|
33
|
+
// | `$icon-theme-selector-prefix` | Selector prefix used for theme modifiers. | `""` |
|
|
34
|
+
// | `$icon-prefix-selector-base` | Selector base for icon name modifiers. | `"."` |
|
|
35
|
+
// | `$icon-prefix-selector` | Selector used for icon name modifiers. | `""` |
|
|
36
|
+
// | `$icon-display` | Default display value applied to icons. | `inline-block` |
|
|
37
|
+
// | `$icon-size` | Default size used for icon width/height. | `1.25em` |
|
|
38
|
+
// | `$icons` | Map of icon names to their SVG data/URLs. | `()` |
|
|
39
|
+
// | `$icon-theme-mappings` | Map of properties and color shades used to generate icon variants. | `map.merge($-icon-theme-mappings, $icon-theme-mappings)` |
|
|
40
|
+
// | `$icon-theme-map` | Resolved map of properties, colors, and shades for icon variants. | `map.deep-merge($-icon-theme-map, $icon-theme-map)` |
|
|
41
41
|
//
|
|
42
42
|
// ## Using `$icon-theme-mappings`
|
|
43
43
|
//
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @graupl/icons icon
|
|
1
|
+
// @graupl/icons icon component variables.
|
|
2
2
|
//
|
|
3
3
|
// These values are to be used to directly style components and provide a
|
|
4
4
|
// cleaner way to reference custom properties.
|
|
@@ -20,15 +20,28 @@
|
|
|
20
20
|
@use "pkg:@graupl/core/src/variables" as root-variables;
|
|
21
21
|
@use "sass:map";
|
|
22
22
|
|
|
23
|
+
// --graupl-icon-display
|
|
23
24
|
$icon-display: var(
|
|
24
25
|
--#{root-defaults.$prefix}icon-display,
|
|
25
26
|
#{defaults.$icon-display}
|
|
26
27
|
);
|
|
28
|
+
|
|
29
|
+
// --graupl-icon-size
|
|
27
30
|
$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});
|
|
31
|
+
|
|
32
|
+
// --graupl-icon-width
|
|
28
33
|
$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});
|
|
34
|
+
|
|
35
|
+
// --graupl-icon-height
|
|
29
36
|
$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});
|
|
37
|
+
|
|
38
|
+
// --graupl-icon-color
|
|
30
39
|
$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});
|
|
40
|
+
|
|
41
|
+
// --graupl-icon
|
|
31
42
|
$icon: var(--#{root-defaults.$prefix}icon, none);
|
|
43
|
+
|
|
44
|
+
// --graupl-icon-spacer
|
|
32
45
|
$icon-spacer: var(
|
|
33
46
|
--#{root-defaults.$prefix}icon-spacer,
|
|
34
47
|
#{map.get(root-variables.$spacers, 2)}
|