@rolemodel/optics 2.0.1 → 2.1.0

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 (17) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/dist/css/addons/fonts/feather_icons.css +939 -0
  3. package/dist/css/addons/fonts/lucide_icons.css +4672 -0
  4. package/dist/css/addons/fonts/material_symbols_outlined_variable.css +10 -0
  5. package/dist/css/addons/fonts/phosphor_icons.css +44 -0
  6. package/dist/css/addons/fonts/tabler_icons.css +11 -0
  7. package/dist/css/components/accordion.css +2 -2
  8. package/dist/css/components/alert.css +3 -3
  9. package/dist/css/components/icon.css +95 -88
  10. package/dist/css/components/sidebar.css +3 -4
  11. package/dist/css/core/fonts/icon_fonts.css +8 -0
  12. package/dist/css/core/fonts/index.css +8 -0
  13. package/dist/css/core/fonts/text_fonts.css +16 -0
  14. package/dist/css/core/tokens/base_tokens.css +0 -16
  15. package/dist/css/optics.css +3 -0
  16. package/dist/css/optics.min.css +125 -89
  17. package/package.json +1 -1
package/dist/css/addons/fonts/material_symbols_outlined_variable.css ADDED
@@ -0,0 +1,10 @@
1
+ /*
2
+ See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
3
+ Material Symbols supports:
4
+ optical sizing set through: font-variation-settings: 'opsz' {20|40|48}
5
+ font weight set through: font-variation-settings: 'wght' {100..700}
6
+ fill set through: font-variation-settings: 'FILL' {0|1}
7
+ emphasis set through: font-variation-settings: 'GRAD' {-50|0|200}
8
+ */
9
+
10
+ @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
package/dist/css/addons/fonts/phosphor_icons.css ADDED
@@ -0,0 +1,44 @@
1
+ /*
2
+ See all icons at: https://phosphoricons.com/
3
+ Current version: 2.1.1
4
+ */
5
+
6
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
7
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css';
8
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css';
9
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css';
10
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css';
11
+ @import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css';
12
+
13
+ /* Note: the important tag is how Phosphor sets up the fonts which is why we replicate them here */
14
+
15
+ /* Phosphor Icons */
16
+ .ph {
17
+ font-weight: unset;
18
+
19
+ /* Fill Modifiers */
20
+ &.icon--filled {
21
+ font-family: 'Phosphor-Fill' !important;
22
+ }
23
+
24
+ /* Weight Modifiers */
25
+ &.icon--weight-thin {
26
+ font-family: 'Phosphor-Thin' !important;
27
+ }
28
+
29
+ &.icon--weight-light {
30
+ font-family: 'Phosphor-Light' !important;
31
+ }
32
+
33
+ &.icon--weight-normal {
34
+ font-family: 'Phosphor' !important;
35
+ }
36
+
37
+ &.icon--weight-bold {
38
+ font-family: 'Phosphor-Bold' !important;
39
+ }
40
+ }
41
+
42
+ .ph-duotone {
43
+ font-weight: unset;
44
+ }
package/dist/css/addons/fonts/tabler_icons.css ADDED
@@ -0,0 +1,11 @@
1
+ /*
2
+ See all icons at: https://tabler.io/icons
3
+ Current version: 3.30.0
4
+ */
5
+
6
+ @import 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css';
7
+
8
+ /* Tabler Icons */
9
+ .ti {
10
+ font-weight: unset;
11
+ }
package/dist/css/components/accordion.css CHANGED
@@ -28,9 +28,9 @@
28
28
  }
29
29
 
30
30
  .accordion__marker {
31
- --op-mso-optical-sizing: 48;
31
+ --__op-icon-font-size: var(--_op-icon-font-size-x-large);
32
+ --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
32
33
 
33
- font-size: var(--op-font-x-large);
34
34
  justify-self: flex-end;
35
35
  transition: var(--op-transition-accordion);
36
36
  user-select: none;
package/dist/css/components/alert.css CHANGED
@@ -8,10 +8,10 @@
8
8
  /* Elements */
9
9
 
10
10
  .alert__icon {
11
- --op-mso-optical-sizing: 40; /* .icon--large styling */
12
- --op-mso-weight: var(--op-font-weight-bold); /* .icon--weight-bold styling */
11
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
12
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
13
+ --__op-icon-weight: var(--_op-icon-weight-bold);
13
14
 
14
- font-size: var(--op-font-large); /* .icon--large styling */
15
15
  line-height: var(--op-line-height-dense);
16
16
  }
17
17
 
package/dist/css/components/icon.css CHANGED
@@ -1,114 +1,121 @@
1
- /*
2
- Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
3
- Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
4
- from Googles CDN like we do for our other fonts
5
- https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
6
- */
7
-
8
- @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
9
-
10
- .material-symbols-outlined,
11
- .material-symbols {
12
- --op-mso-fill: 0;
13
- --op-mso-weight: var(--op-font-weight-normal);
14
- --op-mso-grade: 0;
15
- --op-mso-optical-sizing: 20;
16
-
17
- font-size: var(--op-font-medium);
18
- font-variation-settings:
19
- 'FILL' var(--op-mso-fill),
20
- 'wght' var(--op-mso-weight),
21
- 'GRAD' var(--op-mso-grade),
22
- 'opsz' var(--op-mso-optical-sizing);
1
+ .icon {
2
+ /* Public API (customizable component options) */
3
+
4
+ /* Weight */
5
+ --_op-icon-weight-light: var(--op-font-weight-light);
6
+ --_op-icon-weight-normal: var(--op-font-weight-normal);
7
+ --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
8
+ --_op-icon-weight-bold: var(--op-font-weight-bold);
9
+
10
+ /* Fill */
11
+ --_op-icon-fill-outlined: 0;
12
+ --_op-icon-fill-filled: 1;
13
+
14
+ /* Emphasis */
15
+ --_op-icon-emphasis-low: -20;
16
+ --_op-icon-emphasis-normal: 0;
17
+ --_op-icon-emphasis-high: 200;
18
+
19
+ /* Size */
20
+ --_op-icon-font-size-small: var(--op-font-small);
21
+ --_op-icon-font-size-medium: var(--op-font-medium);
22
+ --_op-icon-font-size-large: var(--op-font-large);
23
+ --_op-icon-font-size-x-large: var(--op-font-2x-large);
24
+ --_op-icon-optical-size-small: 20;
25
+ --_op-icon-optical-size-medium: 20;
26
+ --_op-icon-optical-size-large: 40;
27
+ --_op-icon-optical-size-x-large: 48;
28
+
29
+ /* Private API (component option defaults) */
30
+ --__op-icon-weight: var(--_op-icon-weight-normal);
31
+ --__op-icon-fill: var(--_op-icon-fill-outlined);
32
+ --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
33
+ --__op-icon-font-size: var(--_op-icon-font-size-medium);
34
+ --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
35
+
36
+ display: inline-block;
37
+ width: var(--__op-icon-font-size);
38
+ height: var(--__op-icon-font-size);
39
+ font-size: var(--__op-icon-font-size);
40
+ font-weight: var(--__op-icon-weight);
23
41
  line-height: var(--op-line-height-densest);
24
42
  vertical-align: middle;
25
- }
26
-
27
- /* Fill */
28
- .icon--outlined {
29
- --op-mso-fill: 0;
30
- }
31
-
32
- .icon--filled {
33
- --op-mso-fill: 1;
34
- }
35
-
36
- /* Weight */
37
- .icon--weight-light {
38
- --op-mso-weight: var(--op-font-weight-light);
39
- }
40
43
 
41
- .icon--weight-normal {
42
- --op-mso-weight: var(--op-font-weight-normal);
43
- }
44
-
45
- .icon--weight-semi-bold {
46
- --op-mso-weight: var(--op-font-weight-semi-bold);
47
- }
48
-
49
- .icon--weight-bold {
50
- --op-mso-weight: var(--op-font-weight-bold);
51
- }
52
-
53
- /* Emphasis */
54
- .icon--low-emphasis {
55
- --op-mso-grade: -20;
56
- }
44
+ /* Fill Modifiers */
45
+ &.icon--outlined {
46
+ --__op-icon-fill: var(--_op-icon-fill-outlined);
47
+ }
57
48
 
58
- .icon--normal-emphasis {
59
- --op-mso-grade: 0;
60
- }
49
+ &.icon--filled {
50
+ --__op-icon-fill: var(--_op-icon-fill-filled);
51
+ }
61
52
 
62
- .icon--high-emphasis {
63
- --op-mso-grade: 200;
64
- }
53
+ /* Weight Modifiers */
54
+ &.icon--weight-light {
55
+ --__op-icon-weight: var(--_op-icon-weight-light);
56
+ }
65
57
 
66
- /* Size */
67
- .icon--medium {
68
- font-size: var(--op-font-medium);
58
+ &.icon--weight-normal {
59
+ --__op-icon-weight: var(--_op-icon-weight-normal);
60
+ }
69
61
 
70
- --op-mso-optical-sizing: 20;
71
- }
62
+ &.icon--weight-semi-bold {
63
+ --__op-icon-weight: var(--_op-icon-weight-semi-bold);
64
+ }
72
65
 
73
- .icon--large {
74
- font-size: var(--op-font-large);
66
+ &.icon--weight-bold {
67
+ --__op-icon-weight: var(--_op-icon-weight-bold);
68
+ }
75
69
 
76
- --op-mso-optical-sizing: 40;
77
- }
70
+ /* Emphasis */
71
+ &.icon--low-emphasis {
72
+ --__op-icon-emphasis: var(--_op-icon-emphasis-low);
73
+ }
78
74
 
79
- .icon--x-large {
80
- font-size: var(--op-font-2x-large);
75
+ &.icon--normal-emphasis {
76
+ --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
77
+ }
81
78
 
82
- --op-mso-optical-sizing: 48;
83
- }
79
+ &.icon--high-emphasis {
80
+ --__op-icon-emphasis: var(--_op-icon-emphasis-high);
81
+ }
84
82
 
85
- .custom-icons {
86
- display: inline-block;
87
- width: var(--op-font-2x-large);
88
- height: var(--op-font-2x-large);
83
+ /* Size Modifiers */
84
+ &.icon--small {
85
+ --__op-icon-font-size: var(--_op-icon-font-size-small);
86
+ --__op-icon-optical-size: var(--_op-icon-optical-size-small);
87
+ }
89
88
 
90
89
  &.icon--medium {
91
- font-size: var(--op-font-small);
92
-
93
- --op-mso-optical-sizing: 20;
90
+ --__op-icon-font-size: var(--_op-icon-font-size-medium);
91
+ --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
94
92
  }
95
93
 
96
94
  &.icon--large {
97
- width: var(--op-font-large);
98
- height: var(--op-font-large);
95
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
96
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
99
97
  }
100
98
 
101
99
  &.icon--x-large {
102
- width: var(--op-font-3x-large);
103
- height: var(--op-font-3x-large);
100
+ --__op-icon-font-size: var(--_op-icon-font-size-x-large);
101
+ --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
104
102
  }
105
103
  }
106
104
 
107
- .custom-icons svg {
108
- width: 100%;
109
- height: 100%;
105
+ /* Material Icons class provided by the Google Fonts CDN */
106
+ .material-symbols-outlined {
107
+ font-variation-settings:
108
+ 'FILL' var(--__op-icon-fill),
109
+ 'wght' var(--__op-icon-weight),
110
+ 'GRAD' var(--__op-icon-emphasis),
111
+ 'opsz' var(--__op-icon-optical-size);
112
+ font-weight: unset;
110
113
  }
111
114
 
112
- .icon-link {
113
- line-height: 0;
115
+ /* Custom SVG Icons app specific */
116
+ .custom-icons {
117
+ svg {
118
+ width: 100%;
119
+ height: 100%;
120
+ }
114
121
  }
package/dist/css/components/sidebar.css CHANGED
@@ -60,10 +60,9 @@
60
60
  justify-content: flex-start;
61
61
 
62
62
  .material-symbols-outlined {
63
- --op-mso-optical-sizing: 40;
64
- --op-mso-weight: var(--op-font-weight-bold);
65
-
66
- font-size: var(--op-font-large);
63
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
64
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
65
+ --__op-icon-weight: var(--_op-icon-weight-bold);
67
66
  }
68
67
  }
69
68
 
package/dist/css/core/fonts/icon_fonts.css ADDED
@@ -0,0 +1,8 @@
1
+ /*
2
+ See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
3
+ This import of Material Symbols supports:
4
+ font weight set through: font-variation-settings: 'wght' {100..700}
5
+ */
6
+
7
+ /* Material Symbols */
8
+ @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';
package/dist/css/core/fonts/index.css ADDED
@@ -0,0 +1,8 @@
1
+ /*
2
+ Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
3
+ from Google's CDN. For more information on the variable font, see:
4
+ https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
5
+ */
6
+
7
+ @import 'text_fonts';
8
+ @import 'icon_fonts';
package/dist/css/core/fonts/text_fonts.css ADDED
@@ -0,0 +1,16 @@
1
+ /*
2
+ Noto Sans supports:
3
+ font-weight: {anything between 100 and 900}
4
+ font-stretch: {anything between 62.5% and 100%}
5
+ font-style: {normal or italic}
6
+ */
7
+
8
+ /*
9
+ Noto Serif supports:
10
+ font-weight: {anything between 100 and 900}
11
+ font-stretch: {anything between 62.5% and 100%}
12
+ font-style: {normal or italic}
13
+ */
14
+
15
+ /* Noto Sans and Noto Serif */
16
+ @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
package/dist/css/core/tokens/base_tokens.css CHANGED
@@ -1,19 +1,3 @@
1
- @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
2
-
3
- /*
4
- Noto Sans supports:
5
- font-weight: {anything between 100 and 900}
6
- font-stretch: {anything between 62.5% and 100%}
7
- font-style: {normal or italic}
8
- */
9
-
10
- /*
11
- Noto Serif supports:
12
- font-weight: {anything between 100 and 900}
13
- font-stretch: {anything between 62.5% and 100%}
14
- font-style: {normal or italic}
15
- */
16
-
17
1
  :root {
18
2
  /* Color HSLs
19
3
  A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
package/dist/css/optics.css CHANGED
@@ -1,6 +1,9 @@
1
1
  /* Third party Vendors */
2
2
  @import 'modern-css-reset/dist/reset';
3
3
 
4
+ /* Fonts */
5
+ @import 'core/fonts';
6
+
4
7
  /* Tokens */
5
8
  @import 'core/tokens';
6
9
 
package/dist/css/optics.min.css CHANGED
@@ -1,5 +1,6 @@
1
+
1
2
  @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
2
- @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
3
+ @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';
3
4
  /* Third party Vendors */
4
5
  /* Box sizing rules */
5
6
  *,
@@ -66,7 +67,12 @@ select {
66
67
  scroll-behavior: auto !important;
67
68
  }
68
69
  }
69
- /* Tokens */
70
+ /* Fonts */
71
+ /*
72
+ Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
73
+ from Google's CDN. For more information on the variable font, see:
74
+ https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
75
+ */
70
76
  /*
71
77
  Noto Sans supports:
72
78
  font-weight: {anything between 100 and 900}
@@ -79,6 +85,14 @@ Noto Sans supports:
79
85
  font-stretch: {anything between 62.5% and 100%}
80
86
  font-style: {normal or italic}
81
87
  */
88
+ /* Noto Sans and Noto Serif */
89
+ /*
90
+ See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
91
+ This import of Material Symbols supports:
92
+ font weight set through: font-variation-settings: 'wght' {100..700}
93
+ */
94
+ /* Material Symbols */
95
+ /* Tokens */
82
96
  :root {
83
97
  /* Color HSLs
84
98
  A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
@@ -2385,9 +2399,9 @@ small {
2385
2399
  }
2386
2400
 
2387
2401
  .accordion__marker {
2388
- --op-mso-optical-sizing: 48;
2402
+ --__op-icon-font-size: var(--_op-icon-font-size-x-large);
2403
+ --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
2389
2404
 
2390
- font-size: var(--op-font-x-large);
2391
2405
  justify-self: flex-end;
2392
2406
  transition: var(--op-transition-accordion);
2393
2407
  user-select: none;
@@ -2431,10 +2445,10 @@ small {
2431
2445
  /* Elements */
2432
2446
 
2433
2447
  .alert__icon {
2434
- --op-mso-optical-sizing: 40; /* .icon--large styling */
2435
- --op-mso-weight: var(--op-font-weight-bold); /* .icon--weight-bold styling */
2448
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
2449
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
2450
+ --__op-icon-weight: var(--_op-icon-weight-bold);
2436
2451
 
2437
- font-size: var(--op-font-large); /* .icon--large styling */
2438
2452
  line-height: var(--op-line-height-dense);
2439
2453
  }
2440
2454
 
@@ -3658,101 +3672,124 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
3658
3672
  }
3659
3673
  /* stylelint-enable no-descending-specificity */
3660
3674
  }
3661
- /*
3662
- Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
3663
- Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
3664
- from Googles CDN like we do for our other fonts
3665
- https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
3666
- */
3667
- .material-symbols-outlined,
3668
- .material-symbols {
3669
- --op-mso-fill: 0;
3670
- --op-mso-weight: var(--op-font-weight-normal);
3671
- --op-mso-grade: 0;
3672
- --op-mso-optical-sizing: 20;
3675
+ .icon {
3676
+ /* Public API (customizable component options) */
3673
3677
 
3674
- font-size: var(--op-font-medium);
3675
- font-variation-settings:
3676
- 'FILL' var(--op-mso-fill),
3677
- 'wght' var(--op-mso-weight),
3678
- 'GRAD' var(--op-mso-grade),
3679
- 'opsz' var(--op-mso-optical-sizing);
3678
+ /* Weight */
3679
+ --_op-icon-weight-light: var(--op-font-weight-light);
3680
+ --_op-icon-weight-normal: var(--op-font-weight-normal);
3681
+ --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
3682
+ --_op-icon-weight-bold: var(--op-font-weight-bold);
3683
+
3684
+ /* Fill */
3685
+ --_op-icon-fill-outlined: 0;
3686
+ --_op-icon-fill-filled: 1;
3687
+
3688
+ /* Emphasis */
3689
+ --_op-icon-emphasis-low: -20;
3690
+ --_op-icon-emphasis-normal: 0;
3691
+ --_op-icon-emphasis-high: 200;
3692
+
3693
+ /* Size */
3694
+ --_op-icon-font-size-small: var(--op-font-small);
3695
+ --_op-icon-font-size-medium: var(--op-font-medium);
3696
+ --_op-icon-font-size-large: var(--op-font-large);
3697
+ --_op-icon-font-size-x-large: var(--op-font-2x-large);
3698
+ --_op-icon-optical-size-small: 20;
3699
+ --_op-icon-optical-size-medium: 20;
3700
+ --_op-icon-optical-size-large: 40;
3701
+ --_op-icon-optical-size-x-large: 48;
3702
+
3703
+ /* Private API (component option defaults) */
3704
+ --__op-icon-weight: var(--_op-icon-weight-normal);
3705
+ --__op-icon-fill: var(--_op-icon-fill-outlined);
3706
+ --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
3707
+ --__op-icon-font-size: var(--_op-icon-font-size-medium);
3708
+ --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
3709
+
3710
+ display: inline-block;
3711
+ width: var(--__op-icon-font-size);
3712
+ height: var(--__op-icon-font-size);
3713
+ font-size: var(--__op-icon-font-size);
3714
+ font-weight: var(--__op-icon-weight);
3680
3715
  line-height: var(--op-line-height-densest);
3681
3716
  vertical-align: middle;
3682
- }
3683
- /* Fill */
3684
- .icon--outlined {
3685
- --op-mso-fill: 0;
3686
- }
3687
- .icon--filled {
3688
- --op-mso-fill: 1;
3689
- }
3690
- /* Weight */
3691
- .icon--weight-light {
3692
- --op-mso-weight: var(--op-font-weight-light);
3693
- }
3694
- .icon--weight-normal {
3695
- --op-mso-weight: var(--op-font-weight-normal);
3696
- }
3697
- .icon--weight-semi-bold {
3698
- --op-mso-weight: var(--op-font-weight-semi-bold);
3699
- }
3700
- .icon--weight-bold {
3701
- --op-mso-weight: var(--op-font-weight-bold);
3702
- }
3703
- /* Emphasis */
3704
- .icon--low-emphasis {
3705
- --op-mso-grade: -20;
3706
- }
3707
- .icon--normal-emphasis {
3708
- --op-mso-grade: 0;
3709
- }
3710
- .icon--high-emphasis {
3711
- --op-mso-grade: 200;
3712
- }
3713
- /* Size */
3714
- .icon--medium {
3715
- font-size: var(--op-font-medium);
3716
3717
 
3717
- --op-mso-optical-sizing: 20;
3718
- }
3719
- .icon--large {
3720
- font-size: var(--op-font-large);
3718
+ /* Fill Modifiers */
3719
+ &.icon--outlined {
3720
+ --__op-icon-fill: var(--_op-icon-fill-outlined);
3721
+ }
3721
3722
 
3722
- --op-mso-optical-sizing: 40;
3723
- }
3724
- .icon--x-large {
3725
- font-size: var(--op-font-2x-large);
3723
+ &.icon--filled {
3724
+ --__op-icon-fill: var(--_op-icon-fill-filled);
3725
+ }
3726
3726
 
3727
- --op-mso-optical-sizing: 48;
3728
- }
3729
- .custom-icons {
3730
- display: inline-block;
3731
- width: var(--op-font-2x-large);
3732
- height: var(--op-font-2x-large);
3727
+ /* Weight Modifiers */
3728
+ &.icon--weight-light {
3729
+ --__op-icon-weight: var(--_op-icon-weight-light);
3730
+ }
3733
3731
 
3734
- &.icon--medium {
3735
- font-size: var(--op-font-small);
3732
+ &.icon--weight-normal {
3733
+ --__op-icon-weight: var(--_op-icon-weight-normal);
3734
+ }
3735
+
3736
+ &.icon--weight-semi-bold {
3737
+ --__op-icon-weight: var(--_op-icon-weight-semi-bold);
3738
+ }
3739
+
3740
+ &.icon--weight-bold {
3741
+ --__op-icon-weight: var(--_op-icon-weight-bold);
3742
+ }
3743
+
3744
+ /* Emphasis */
3745
+ &.icon--low-emphasis {
3746
+ --__op-icon-emphasis: var(--_op-icon-emphasis-low);
3747
+ }
3736
3748
 
3737
- --op-mso-optical-sizing: 20;
3749
+ &.icon--normal-emphasis {
3750
+ --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
3751
+ }
3752
+
3753
+ &.icon--high-emphasis {
3754
+ --__op-icon-emphasis: var(--_op-icon-emphasis-high);
3755
+ }
3756
+
3757
+ /* Size Modifiers */
3758
+ &.icon--small {
3759
+ --__op-icon-font-size: var(--_op-icon-font-size-small);
3760
+ --__op-icon-optical-size: var(--_op-icon-optical-size-small);
3761
+ }
3762
+
3763
+ &.icon--medium {
3764
+ --__op-icon-font-size: var(--_op-icon-font-size-medium);
3765
+ --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
3738
3766
  }
3739
3767
 
3740
3768
  &.icon--large {
3741
- width: var(--op-font-large);
3742
- height: var(--op-font-large);
3769
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
3770
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
3743
3771
  }
3744
3772
 
3745
3773
  &.icon--x-large {
3746
- width: var(--op-font-3x-large);
3747
- height: var(--op-font-3x-large);
3774
+ --__op-icon-font-size: var(--_op-icon-font-size-x-large);
3775
+ --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
3748
3776
  }
3749
3777
  }
3750
- .custom-icons svg {
3751
- width: 100%;
3752
- height: 100%;
3778
+ /* Material Icons class provided by the Google Fonts CDN */
3779
+ .material-symbols-outlined {
3780
+ font-variation-settings:
3781
+ 'FILL' var(--__op-icon-fill),
3782
+ 'wght' var(--__op-icon-weight),
3783
+ 'GRAD' var(--__op-icon-emphasis),
3784
+ 'opsz' var(--__op-icon-optical-size);
3785
+ font-weight: unset;
3753
3786
  }
3754
- .icon-link {
3755
- line-height: 0;
3787
+ /* Custom SVG Icons app specific */
3788
+ .custom-icons {
3789
+ svg {
3790
+ width: 100%;
3791
+ height: 100%;
3792
+ }
3756
3793
  }
3757
3794
  .modal-wrapper {
3758
3795
  /* Public API (customizable component options) */
@@ -4043,10 +4080,9 @@ dialog.modal {
4043
4080
  justify-content: flex-start;
4044
4081
 
4045
4082
  .material-symbols-outlined {
4046
- --op-mso-optical-sizing: 40;
4047
- --op-mso-weight: var(--op-font-weight-bold);
4048
-
4049
- font-size: var(--op-font-large);
4083
+ --__op-icon-font-size: var(--_op-icon-font-size-large);
4084
+ --__op-icon-optical-size: var(--_op-icon-optical-size-large);
4085
+ --__op-icon-weight: var(--_op-icon-weight-bold);
4050
4086
  }
4051
4087
  }
4052
4088