@rolemodel/optics 0.2.4 → 0.2.5

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 (12) hide show
  1. package/.github/release.yml +53 -0
  2. package/.github/workflows/publish-storybook.yml +11 -3
  3. package/.storybook/documentation.scss +42 -11
  4. package/.storybook/main.js +1 -0
  5. package/README.md +15 -0
  6. package/dist/css/optics.css +184 -0
  7. package/dist/css/optics.css.map +1 -1
  8. package/dist/scss/core/tokens/base_tokens.scss +96 -6
  9. package/dist/scss/core/tokens/dark_mode_tokens.scss +34 -0
  10. package/dist/scss/core/tokens/scale_color_tokens.scss +28 -0
  11. package/dist/scss/core/utilities.scss +4 -0
  12. package/package.json +2 -1
package/.github/release.yml ADDED
@@ -0,0 +1,53 @@
1
+ # .github/release.yml
2
+
3
+ changelog:
4
+ categories:
5
+ - title: Breaking Changes
6
+ labels:
7
+ - Breaking Change
8
+ - title: Base Token Changes
9
+ labels:
10
+ - Base Tokens
11
+ - title: Theme Token Changes
12
+ labels:
13
+ - Theme Tokens
14
+ - title: Base Reset Changes
15
+ labels:
16
+ - Base Reset
17
+ - title: Layout Changes
18
+ labels:
19
+ - Layout
20
+ - title: Component Changes
21
+ labels:
22
+ - Components
23
+ - title: Utility Changes
24
+ labels:
25
+ - Utilities
26
+ - title: Addon Changes
27
+ labels:
28
+ - Addons
29
+ - title: Dependencies
30
+ labels:
31
+ - dependencies
32
+ - title: Repository Changes
33
+ labels:
34
+ - Repository Change
35
+ - title: Documentation Changes
36
+ labels:
37
+ - documentation
38
+ - title: Unlabeled Changes (please categorize these)
39
+ labels:
40
+ - '*'
41
+ exclude:
42
+ labels:
43
+ - Breaking Change
44
+ - Base Tokens
45
+ - Theme Tokens
46
+ - Base Reset
47
+ - Layout
48
+ - Components
49
+ - Utilities
50
+ - Addons
51
+ - dependencies
52
+ - Repository Change
53
+ - documentation
package/.github/workflows/publish-storybook.yml CHANGED
@@ -1,6 +1,7 @@
1
1
  name: Build and Deploy Storybook Documentation
2
2
 
3
3
  on:
4
+ workflow_dispatch:
4
5
  release:
5
6
  types: [created]
6
7
 
@@ -12,9 +13,16 @@ jobs:
12
13
  uses: actions/checkout@v3
13
14
  with:
14
15
  persist-credentials: false
15
- - name: Install and Build 🔧
16
- run: | # Install npm packages and build the Storybook files
17
- npm install
16
+ - name: Setup Node
17
+ uses: actions/setup-node@v3
18
+ with:
19
+ node-version: '16.x'
20
+ registry-url: 'https://registry.npmjs.org'
21
+ - name: Install 🔧
22
+ run: | # Install npm packages
23
+ npm ci
24
+ - name: Build 🔧
25
+ run: | # build the Storybook files
18
26
  npm run build-storybook
19
27
  - name: Deploy 🚀
20
28
  uses: JamesIves/github-pages-deploy-action@3.6.2
package/.storybook/documentation.scss CHANGED
@@ -1,6 +1,11 @@
1
1
  @import './src/optics.scss';
2
2
 
3
- @keyframes transitionDemo {
3
+ @import './src/recipes/domains-sidebar.scss';
4
+ @import './src/recipes/16six-sidebar.scss';
5
+
6
+ @import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
7
+
8
+ @keyframes transition-demo {
4
9
  from {
5
10
  background-color: var(--rm-color-white);
6
11
  color: var(--rm-color-black);
@@ -14,46 +19,45 @@
14
19
 
15
20
  .transition-demo {
16
21
  display: inline-block;
17
-
18
- background-color: var(--rm-color-primary-base);
19
- color: var(--rm-color-primary-on-base);
20
-
21
22
  padding: var(--rm-space-medium);
22
-
23
- animation-name: transitionDemo;
24
23
  animation-duration: var(--rm-transition-input);
25
24
  animation-iteration-count: 1;
25
+ animation-name: transition-demo;
26
+ background-color: var(--rm-color-primary-base);
27
+ color: var(--rm-color-primary-on-base);
26
28
  }
27
29
 
28
30
  .transition-demo--input {
29
31
  animation-duration: var(--rm-transition-input);
30
32
  }
33
+
31
34
  .transition-demo--navigation {
32
35
  animation-duration: var(--rm-transition-navigation);
33
36
  }
37
+
34
38
  .transition-demo--sidebar {
35
39
  animation-duration: var(--rm-transition-sidebar);
36
40
  }
41
+
37
42
  .transition-demo--modal {
38
43
  animation-duration: var(--rm-transition-modal);
39
44
  }
45
+
40
46
  .transition-demo--panel {
41
47
  animation-duration: var(--rm-transition-panel);
42
48
  }
49
+
43
50
  .transition-demo--flash {
44
51
  animation-duration: var(--rm-transition-flash);
45
52
  }
46
53
 
47
54
  .flash--demo {
48
55
  position: relative;
49
- animation: none;
50
56
  top: 0;
51
57
  right: 0;
58
+ animation: none;
52
59
  }
53
60
 
54
- @import './src/recipes/domains-sidebar.scss';
55
- @import './src/recipes/16six-sidebar.scss';
56
-
57
61
  .background-primary-plus-four {
58
62
  background-color: var(--rm-color-primary-plus-four);
59
63
  color: var(--rm-color-primary-on-plus-four);
@@ -63,3 +67,30 @@
63
67
  background-color: var(--rm-color-primary-plus-seven);
64
68
  color: var(--rm-color-primary-on-plus-seven);
65
69
  }
70
+
71
+ .font-family-demo--alternative {
72
+ --rm-font-family: 'Tilt Neon', sans-serif;
73
+
74
+ font-family: var(--rm-font-family);
75
+ }
76
+
77
+ .design-token-container {
78
+ .design-token-card {
79
+ table {
80
+ td:nth-of-type(1),
81
+ th:nth-of-type(1) {
82
+ flex-basis: 40%;
83
+ }
84
+
85
+ td:nth-of-type(2),
86
+ th:nth-of-type(2) {
87
+ flex-basis: 35%;
88
+ }
89
+
90
+ td:nth-of-type(3),
91
+ th:nth-of-type(3) {
92
+ flex-basis: 25%;
93
+ }
94
+ }
95
+ }
96
+ }
package/.storybook/main.js CHANGED
@@ -5,6 +5,7 @@ module.exports = {
5
5
  '@storybook/addon-essentials',
6
6
  '@storybook/addon-interactions',
7
7
  '@storybook/preset-scss',
8
+ { name: 'storybook-design-token', options: { preserveCSSVars: true } },
8
9
  ],
9
10
  framework: '@storybook/html',
10
11
  }
package/README.md CHANGED
@@ -52,6 +52,21 @@ There are also a few component specific tokens that are defined in their respect
52
52
 
53
53
  There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization.
54
54
 
55
+ ### Token Documentation
56
+
57
+ We use the Storybook Design Token for showing design tokens in the documentation. This allows us to tag groups of tokens with a category and a presenter.
58
+
59
+ [Available Presenters](https://github.com/UX-and-I/storybook-design-token#available-presenters)
60
+
61
+ Add the following above a group to categorize the tokens.
62
+
63
+ ```css
64
+ /**
65
+ * @tokens Basic Colors
66
+ * @presenter Color
67
+ */
68
+ ```
69
+
55
70
  ## License
56
71
 
57
72
  [MIT](LICENSE)
package/dist/css/optics.css CHANGED
@@ -74,37 +74,84 @@ select {
74
74
  scroll-behavior: auto !important;
75
75
  }
76
76
  }
77
+ /**
78
+ * @tokens Breakpoints
79
+ */
77
80
  :root {
81
+ /**
82
+ * @tokens Basic Colors
83
+ * @presenter Color
84
+ */
78
85
  --rm-color-white: hsl(0deg 100% 100%);
79
86
  --rm-color-black: hsl(0deg 0% 0%);
87
+ /**
88
+ * @tokens Primary Colors
89
+ * @presenter Color
90
+ */
80
91
  --rm-color-primary-h: 216;
81
92
  --rm-color-primary-s: 58%;
82
93
  --rm-color-primary-l: 48%;
94
+ /**
95
+ * @tokens Neutral Colors
96
+ * @presenter Color
97
+ */
83
98
  --rm-color-neutral-h: var(--rm-color-primary-h);
84
99
  --rm-color-neutral-s: 4%;
85
100
  --rm-color-neutral-l: var(--rm-color-primary-l);
101
+ /**
102
+ * @tokens Alerts Warning Colors
103
+ * @presenter Color
104
+ */
86
105
  --rm-color-alerts-warning-h: 47;
87
106
  --rm-color-alerts-warning-s: 100%;
88
107
  --rm-color-alerts-warning-l: 61%;
108
+ /**
109
+ * @tokens Alerts Danger Colors
110
+ * @presenter Color
111
+ */
89
112
  --rm-color-alerts-danger-h: 0;
90
113
  --rm-color-alerts-danger-s: 99%;
91
114
  --rm-color-alerts-danger-l: 76%;
115
+ /**
116
+ * @tokens Alerts Info Colors
117
+ * @presenter Color
118
+ */
92
119
  --rm-color-alerts-info-h: 216;
93
120
  --rm-color-alerts-info-s: 58%;
94
121
  --rm-color-alerts-info-l: 48%;
122
+ /**
123
+ * @tokens Alerts Notice Colors
124
+ * @presenter Color
125
+ */
95
126
  --rm-color-alerts-notice-h: 130;
96
127
  --rm-color-alerts-notice-s: 61%;
97
128
  --rm-color-alerts-notice-l: 64%;
129
+ /**
130
+ * @tokens Border Radius
131
+ * @presenter BorderRadius
132
+ */
98
133
  --rm-radius-small: 2px;
99
134
  --rm-radius-medium: 4px;
100
135
  --rm-radius-large: 8px;
101
136
  --rm-radius-x-large: 16px;
102
137
  --rm-radius-circle: 50%;
103
138
  --rm-radius-pill: 9999px;
139
+ /**
140
+ * @tokens Border Width
141
+ * @presenter Spacing
142
+ */
104
143
  --rm-border-width: 1px;
105
144
  --rm-border-width-large: 2px;
106
145
  --rm-border-width-x-large: 4px;
146
+ /**
147
+ * @tokens Border Color
148
+ * @presenter Color
149
+ */
107
150
  --rm-border-color: var(--rm-color-neutral-plus-three);
151
+ /**
152
+ * @tokens Border Shadow
153
+ * @presenter Shadow
154
+ */
108
155
  --rm-border-none: 0 0 0 0;
109
156
  --rm-border-all: 0 0 0 var(--rm-border-width);
110
157
  --rm-border-top: 0 calc(-1 * var(--rm-border-width)) 0 0;
@@ -113,6 +160,10 @@ select {
113
160
  --rm-border-left: calc(-1 * var(--rm-border-width)) 0 0 0;
114
161
  --rm-border-y: var(--rm-border-top) var(--rm-border-color), var(--rm-border-bottom) var(--rm-border-color);
115
162
  --rm-border-x: var(--rm-border-left) var(--rm-border-color), var(--rm-border-right) var(--rm-border-color);
163
+ /**
164
+ * @tokens Font Scale
165
+ * @presenter FontSize
166
+ */
116
167
  --rm-font-scale-unit: 1rem;
117
168
  --rm-font-x-small: calc(var(--rm-font-scale-unit) * 1.2);
118
169
  --rm-font-small: calc(var(--rm-font-scale-unit) * 1.4);
@@ -123,6 +174,10 @@ select {
123
174
  --rm-font-3x-large: calc(var(--rm-font-scale-unit) * 3.2);
124
175
  --rm-font-4x-large: calc(var(--rm-font-scale-unit) * 3.6);
125
176
  --rm-font-5x-large: calc(var(--rm-font-scale-unit) * 4.8);
177
+ /**
178
+ * @tokens Font Weight
179
+ * @presenter FontWeight
180
+ */
126
181
  --rm-font-weight-thin: 100;
127
182
  --rm-font-weight-extra-light: 200;
128
183
  --rm-font-weight-light: 300;
@@ -132,7 +187,15 @@ select {
132
187
  --rm-font-weight-bold: 700;
133
188
  --rm-font-weight-extra-bold: 800;
134
189
  --rm-font-weight-black: 900;
190
+ /**
191
+ * @tokens Font Family
192
+ * @presenter FontFamily
193
+ */
135
194
  --rm-font-family: "Noto Sans", "Noto Serif", sans-serif;
195
+ /**
196
+ * @tokens Line Height
197
+ * @presenter LineHeight
198
+ */
136
199
  --rm-line-height-none: 0;
137
200
  --rm-line-height-densest: 1;
138
201
  --rm-line-height-denser: 1.15;
@@ -141,16 +204,30 @@ select {
141
204
  --rm-line-height-loose: 1.6;
142
205
  --rm-line-height-looser: 1.7;
143
206
  --rm-line-height-loosest: 1.8;
207
+ /**
208
+ * @tokens Letter Spacing
209
+ * @presenter LetterSpacing
210
+ */
144
211
  --rm-letter-spacing-navigation: 0.01rem;
145
212
  --rm-letter-spacing-label: 0.04rem;
213
+ /**
214
+ * @tokens Transition
215
+ */
146
216
  --rm-transition-input: 120ms;
147
217
  --rm-transition-navigation: 200ms;
148
218
  --rm-transition-sidebar: 300ms;
149
219
  --rm-transition-modal: 300ms;
150
220
  --rm-transition-panel: 400ms;
151
221
  --rm-transition-flash: 5s;
222
+ /**
223
+ * @tokens Encoded Images
224
+ */
152
225
  --rm-form-dropdown-arrow-width: 1rem;
153
226
  --rm-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
227
+ /**
228
+ * @tokens Space Scale
229
+ * @presenter Spacing
230
+ */
154
231
  --rm-space-scale-unit: 1rem;
155
232
  --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2);
156
233
  --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4);
@@ -162,11 +239,18 @@ select {
162
239
  --rm-space-2x-large: calc(var(--rm-space-scale-unit) * 2.8);
163
240
  --rm-space-3x-large: calc(var(--rm-space-scale-unit) * 4);
164
241
  --rm-space-4x-large: calc(var(--rm-space-scale-unit) * 8);
242
+ /**
243
+ * @tokens Shadows
244
+ * @presenter Shadow
245
+ */
165
246
  --rm-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
166
247
  --rm-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
167
248
  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
168
249
  --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
169
250
  --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
251
+ /**
252
+ * @tokens Z-Index
253
+ */
170
254
  --rm-z-index-header: 500;
171
255
  --rm-z-index-footer: 500;
172
256
  --rm-z-index-drawer: 700;
@@ -176,10 +260,18 @@ select {
176
260
  --rm-z-index-dropdown: 900;
177
261
  --rm-z-index-alert-group: 950;
178
262
  --rm-z-index-tooltip: 1000;
263
+ /**
264
+ * @tokens Input Heights
265
+ * @presenter Spacing
266
+ */
179
267
  --rm-input-height-small: 2.4rem;
180
268
  --rm-input-height-medium: 3.2rem;
181
269
  --rm-input-height-large: 4.4rem;
182
270
  --rm-input-height-x-large: 5.6rem;
271
+ /**
272
+ * @tokens Input Focus
273
+ * @presenter Shadow
274
+ */
183
275
  --rm-input-outer-focus: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four);
184
276
  --rm-input-inner-focus: inset var(--rm-border-all) var(--rm-color-primary-minus-three);
185
277
  --rm-input-focus: var(--rm-input-inner-focus), var(--rm-input-outer-focus);
@@ -200,6 +292,10 @@ select {
200
292
  }
201
293
  }
202
294
  :root {
295
+ /**
296
+ * @tokens Primary Colors
297
+ * @presenter Color
298
+ */
203
299
  --rm-color-primary-original: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) var(--rm-color-primary-l));
204
300
  --rm-color-primary-plus-max: var(--rm-color-white);
205
301
  --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%);
@@ -239,6 +335,10 @@ select {
239
335
  --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 96%);
240
336
  --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%);
241
337
  --rm-color-primary-on-minus-max: var(--rm-color-white);
338
+ /**
339
+ * @tokens Neutral Colors
340
+ * @presenter Color
341
+ */
242
342
  --rm-color-neutral-original: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) var(--rm-color-neutral-l));
243
343
  --rm-color-neutral-plus-max: var(--rm-color-white);
244
344
  --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%);
@@ -278,6 +378,10 @@ select {
278
378
  --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 96%);
279
379
  --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%);
280
380
  --rm-color-neutral-on-minus-max: var(--rm-color-white);
381
+ /**
382
+ * @tokens Alerts Warning Colors
383
+ * @presenter Color
384
+ */
281
385
  --rm-color-alerts-warning-original: hsl(
282
386
  var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) var(--rm-color-alerts-warning-l)
283
387
  );
@@ -319,6 +423,10 @@ select {
319
423
  --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 96%);
320
424
  --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 98%);
321
425
  --rm-color-alerts-warning-on-minus-max: var(--rm-color-white);
426
+ /**
427
+ * @tokens Alerts Danger Colors
428
+ * @presenter Color
429
+ */
322
430
  --rm-color-alerts-danger-original: hsl(
323
431
  var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) var(--rm-color-alerts-danger-l)
324
432
  );
@@ -360,6 +468,10 @@ select {
360
468
  --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 96%);
361
469
  --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 98%);
362
470
  --rm-color-alerts-danger-on-minus-max: var(--rm-color-white);
471
+ /**
472
+ * @tokens Alerts Info Colors
473
+ * @presenter Color
474
+ */
363
475
  --rm-color-alerts-info-original: hsl(
364
476
  var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) var(--rm-color-alerts-info-l)
365
477
  );
@@ -401,6 +513,10 @@ select {
401
513
  --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 96%);
402
514
  --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 98%);
403
515
  --rm-color-alerts-info-on-minus-max: var(--rm-color-white);
516
+ /**
517
+ * @tokens Alerts Notice Colors
518
+ * @presenter Color
519
+ */
404
520
  --rm-color-alerts-notice-original: hsl(
405
521
  var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) var(--rm-color-alerts-notice-l)
406
522
  );
@@ -442,12 +558,20 @@ select {
442
558
  --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 96%);
443
559
  --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 98%);
444
560
  --rm-color-alerts-notice-on-minus-max: var(--rm-color-white);
561
+ /**
562
+ * @tokens Basic Colors
563
+ * @presenter Color
564
+ */
445
565
  --rm-color-background: var(--rm-color-neutral-plus-eight);
446
566
  --rm-color-on-background: var(--rm-color-neutral-on-plus-eight);
447
567
  }
448
568
 
449
569
  @media (prefers-color-scheme: dark) {
450
570
  :root:not([data-theme-mode=light]) {
571
+ /**
572
+ * @tokens Primary Dark Colors
573
+ * @presenter Color
574
+ */
451
575
  --rm-color-primary-plus-max: var(--rm-color-black);
452
576
  --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
453
577
  --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
@@ -486,6 +610,10 @@ select {
486
610
  --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
487
611
  --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
488
612
  --rm-color-primary-on-minus-max: var(--rm-color-black);
613
+ /**
614
+ * @tokens Neutral Dark Colors
615
+ * @presenter Color
616
+ */
489
617
  --rm-color-neutral-plus-max: var(--rm-color-black);
490
618
  --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
491
619
  --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
@@ -524,6 +652,10 @@ select {
524
652
  --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
525
653
  --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
526
654
  --rm-color-neutral-on-minus-max: var(--rm-color-black);
655
+ /**
656
+ * @tokens Alerts Warning Dark Colors
657
+ * @presenter Color
658
+ */
527
659
  --rm-color-alerts-warning-plus-max: var(--rm-color-black);
528
660
  --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
529
661
  --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
@@ -562,6 +694,10 @@ select {
562
694
  --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
563
695
  --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
564
696
  --rm-color-alerts-warning-on-minus-max: var(--rm-color-black);
697
+ /**
698
+ * @tokens Alerts Danger Dark Colors
699
+ * @presenter Color
700
+ */
565
701
  --rm-color-alerts-danger-plus-max: var(--rm-color-black);
566
702
  --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
567
703
  --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
@@ -600,6 +736,10 @@ select {
600
736
  --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
601
737
  --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
602
738
  --rm-color-alerts-danger-on-minus-max: var(--rm-color-black);
739
+ /**
740
+ * @tokens Alerts Info Dark Colors
741
+ * @presenter Color
742
+ */
603
743
  --rm-color-alerts-info-plus-max: var(--rm-color-black);
604
744
  --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
605
745
  --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
@@ -638,6 +778,10 @@ select {
638
778
  --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
639
779
  --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
640
780
  --rm-color-alerts-info-on-minus-max: var(--rm-color-black);
781
+ /**
782
+ * @tokens Alerts Notice Dark Colors
783
+ * @presenter Color
784
+ */
641
785
  --rm-color-alerts-notice-plus-max: var(--rm-color-black);
642
786
  --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
643
787
  --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
@@ -676,6 +820,10 @@ select {
676
820
  --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
677
821
  --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
678
822
  --rm-color-alerts-notice-on-minus-max: var(--rm-color-black);
823
+ /**
824
+ * @tokens Dark Shadows
825
+ * @presenter Shadow
826
+ */
679
827
  --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
680
828
  --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
681
829
  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
@@ -698,6 +846,10 @@ select {
698
846
  }
699
847
  }
700
848
  :root[data-theme-mode=dark] {
849
+ /**
850
+ * @tokens Primary Dark Colors
851
+ * @presenter Color
852
+ */
701
853
  --rm-color-primary-plus-max: var(--rm-color-black);
702
854
  --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
703
855
  --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
@@ -736,6 +888,10 @@ select {
736
888
  --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
737
889
  --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
738
890
  --rm-color-primary-on-minus-max: var(--rm-color-black);
891
+ /**
892
+ * @tokens Neutral Dark Colors
893
+ * @presenter Color
894
+ */
739
895
  --rm-color-neutral-plus-max: var(--rm-color-black);
740
896
  --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
741
897
  --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
@@ -774,6 +930,10 @@ select {
774
930
  --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
775
931
  --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
776
932
  --rm-color-neutral-on-minus-max: var(--rm-color-black);
933
+ /**
934
+ * @tokens Alerts Warning Dark Colors
935
+ * @presenter Color
936
+ */
777
937
  --rm-color-alerts-warning-plus-max: var(--rm-color-black);
778
938
  --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
779
939
  --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
@@ -812,6 +972,10 @@ select {
812
972
  --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
813
973
  --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
814
974
  --rm-color-alerts-warning-on-minus-max: var(--rm-color-black);
975
+ /**
976
+ * @tokens Alerts Danger Dark Colors
977
+ * @presenter Color
978
+ */
815
979
  --rm-color-alerts-danger-plus-max: var(--rm-color-black);
816
980
  --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
817
981
  --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
@@ -850,6 +1014,10 @@ select {
850
1014
  --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
851
1015
  --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
852
1016
  --rm-color-alerts-danger-on-minus-max: var(--rm-color-black);
1017
+ /**
1018
+ * @tokens Alerts Info Dark Colors
1019
+ * @presenter Color
1020
+ */
853
1021
  --rm-color-alerts-info-plus-max: var(--rm-color-black);
854
1022
  --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
855
1023
  --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
@@ -888,6 +1056,10 @@ select {
888
1056
  --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
889
1057
  --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
890
1058
  --rm-color-alerts-info-on-minus-max: var(--rm-color-black);
1059
+ /**
1060
+ * @tokens Alerts Notice Dark Colors
1061
+ * @presenter Color
1062
+ */
891
1063
  --rm-color-alerts-notice-plus-max: var(--rm-color-black);
892
1064
  --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
893
1065
  --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
@@ -926,6 +1098,10 @@ select {
926
1098
  --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
927
1099
  --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
928
1100
  --rm-color-alerts-notice-on-minus-max: var(--rm-color-black);
1101
+ /**
1102
+ * @tokens Dark Shadows
1103
+ * @presenter Shadow
1104
+ */
929
1105
  --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
930
1106
  --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
931
1107
  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
@@ -1254,6 +1430,10 @@ small {
1254
1430
  align-self: stretch;
1255
1431
  }
1256
1432
 
1433
+ .self-baseline {
1434
+ align-self: baseline;
1435
+ }
1436
+
1257
1437
  .text-left {
1258
1438
  text-align: left;
1259
1439
  }
@@ -1922,6 +2102,10 @@ small {
1922
2102
  line-height: var(--rm-line-height-base);
1923
2103
  }
1924
2104
  .card--condensed.card-padded, .card--condensed.card {
2105
+ /**
2106
+ * @tokens Space Scale
2107
+ * @presenter Spacing
2108
+ */
1925
2109
  --rm-space-scale-unit: 1rem;
1926
2110
  --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2);
1927
2111
  --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4);
package/dist/css/optics.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/modern-css-reset/dist/reset.css","../../src/core/tokens/base_tokens.scss","../../src/components/icon.scss","../../src/core/tokens/scale_color_tokens.scss","../../src/core/tokens/dark_mode_tokens.scss","../../src/core/base.scss","../../src/core/layout.scss","../../src/core/utilities.scss","../../src/components/alert.scss","../../src/components/badge.scss","../../src/components/button.scss","../../src/components/button_group.scss","../../src/components/card.scss","../../src/components/flash.scss","../../src/components/form.scss","../../src/components/sidebar.scss","../../src/components/table.scss"],"names":[],"mappings":"AAAA;ACAQ;AACA;ACIA;AFJR;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;EACE;IACC;;EAED;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;ACwHJ;EArLE;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAIA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkCA;EA9BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EAQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAqDF;EAGE;IACE;;EAIF;IACE;;EAIF;IACE;;EAIF;IACE;;;AEyCJ;EAhSE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;;;AC4BF;EACE;IAzTA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;;EAIA;IACE;IACA;;EAIA;IACE;;EAMJ;IACE;IACA;;EAIA;IACE;;;AA4BN;EA/TE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIA;EACE;;AAMJ;EACE;EACA;;AAIA;EACE;;;ACnSN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7FF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,WLmKkB;EKlKlB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AChCF;EACE;EACA,WNsLkB;EMrLlB;EACA;;;AAGF;EACE,WN+KiB;;;AM5KnB;EACE;;;AAGF;EACE;;;AAGF;EACE,WNkKmB;;;AM7JrB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAiCA;EACE;;AAGF;EAEE;IACE;;;;AAwCN;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;;;AC/hBR;EACE;EACA;EACA;EACA;EACA;;AAEA;AACE;AAGA;EAEA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EAGE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;ACpJN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EA1BA;EACA;EACA;EA2BE;EACA;;AAGF;EAjCA;EACA;EACA;EAkCE;EACA;;;AAQJ;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AC9EF;EACE;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EAEE;EACA;;AAIF;EACE;;AA2BF;EA9FF;IA+FI;IACA;;EAEA;IAGE;IACA;;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACvON;EACE;EACA;;AAME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;;AAKN;EACE;EACA;;;ACjCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EX2HA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EWlIE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AASN;EAGE;;;AC/DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;;ACnDJ;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAYA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EAIE;EACA;;AAEA;EACE;;;AASN;EACE;;;AAGF;EAGE;EACA;EACA;;;AAGF;AACE;AAcA;;AAbA;EACE;;AAEA;EAEE;;AAEA;EACE;EACA;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;AAGA;AAOA;;AANA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;;AZxKN;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AalBF;EAGE;EACA;EAGA;EACA;EAGA;EACA;EAGA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EACE;;AAGF;AACE;AAEA;EAEA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EAhKA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAwHF;EADF;IApKA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAEA;IAEE;;EAGF;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;;;AA4HF;EALF;IAzMA;;EAGA;IACE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AAqLJ;EAnNA;;AAGA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AA+LN;EAIE;EACA;EAGA;EACA;EAGA;EACA;;;AAIF;EAIE;EACA;EAGA;EACA;EAGA;EACA;;;AC3PF;EAGE;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKA;EACE;EACA;;AAKF;EACE;EACA;;AAKJ;EACE;EACA;;AAIF;EACE;EACA;;;AAaF;EACE;EACA;;;AAQF;EACE;EACA;;;AAKJ;EAGE","file":"optics.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../node_modules/modern-css-reset/dist/reset.css","../../src/core/tokens/base_tokens.scss","../../src/components/icon.scss","../../src/core/tokens/scale_color_tokens.scss","../../src/core/tokens/dark_mode_tokens.scss","../../src/core/base.scss","../../src/core/layout.scss","../../src/core/utilities.scss","../../src/components/alert.scss","../../src/components/badge.scss","../../src/components/button.scss","../../src/components/button_group.scss","../../src/components/card.scss","../../src/components/flash.scss","../../src/components/form.scss","../../src/components/sidebar.scss","../../src/components/table.scss"],"names":[],"mappings":"AAAA;ACAQ;AACA;ACIA;AFJR;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;EACE;IACC;;EAED;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;ACyMJ;AAAA;AAAA;AASA;AA9QE;AAAA;AAAA;AAAA;EAIA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAMA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAgDA;AAAA;AAAA;AAAA;EAIA;AAhDA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;AAYA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAOA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;;;AAwDF;EAGE;IACE;;EAIF;IACE;;EAIF;IACE;;EAIF;IACE;;;AErBJ;AA5TE;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;;;ACkCF;EACE;AA5VA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAIA;IACA;IACA;IACA;IACA;;EAIA;IACE;IACA;;EAIA;IACE;;EAMJ;IACE;IACA;;EAIA;IACE;;;AA4BN;AAlWE;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIA;EACE;;AAMJ;EACE;EACA;;AAIA;EACE;;;ACrUN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7FF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,WL6PkB;EK5PlB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AChCF;EACE;EACA,WNgRkB;EM/QlB;EACA;;;AAGF;EACE,WNyQiB;;;AMtQnB;EACE;;;AAGF;EACE;;;AAGF;EACE,WN4PmB;;;AMvPrB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAiCA;EACE;;AAGF;EAEE;IACE;;;;AAwCN;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;;;ACniBR;EACE;EACA;EACA;EACA;EACA;;AAEA;AACE;AAGA;EAEA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EAGE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;ACpJN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EA1BA;EACA;EACA;EA2BE;EACA;;AAGF;EAjCA;EACA;EACA;EAkCE;EACA;;;AAQJ;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AC9EF;EACE;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EAEE;EACA;;AAIF;EACE;;AA2BF;EA9FF;IA+FI;IACA;;EAEA;IAGE;IACA;;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACvON;EACE;EACA;;AAME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;;AAKN;EACE;EACA;;;ACjCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AX6LA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EWxME;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AASN;EAGE;;;AC/DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;;ACnDJ;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAYA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EAIE;EACA;;AAEA;EACE;;;AASN;EACE;;;AAGF;EAGE;EACA;EACA;;;AAGF;AACE;AAcA;;AAbA;EACE;;AAEA;EAEE;;AAEA;EACE;EACA;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;AAGA;AAOA;;AANA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;;AZxKN;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AalBF;EAGE;EACA;EAGA;EACA;EAGA;EACA;EAGA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EACE;;AAGF;AACE;AAEA;EAEA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EAhKA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAwHF;EADF;IApKA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAEA;IAEE;;EAGF;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;;;AA4HF;EALF;IAzMA;;EAGA;IACE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AAqLJ;EAnNA;;AAGA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AA+LN;EAIE;EACA;EAGA;EACA;EAGA;EACA;;;AAIF;EAIE;EACA;EAGA;EACA;EAGA;EACA;;;AC3PF;EAGE;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKA;EACE;EACA;;AAKF;EACE;EACA;;AAKJ;EACE;EACA;;AAIF;EACE;EACA;;;AAaF;EACE;EACA;;;AAQF;EACE;EACA;;;AAKJ;EAGE","file":"optics.css"}
package/dist/scss/core/tokens/base_tokens.scss CHANGED
@@ -7,41 +7,68 @@
7
7
  // A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
8
8
  @mixin color-varieties {
9
9
  // Basic Colors
10
+
11
+ /**
12
+ * @tokens Basic Colors
13
+ * @presenter Color
14
+ */
10
15
  --rm-color-white: hsl(0deg 100% 100%);
11
16
  --rm-color-black: hsl(0deg 0% 0%);
12
17
 
13
- // Primary HSL
18
+ /**
19
+ * @tokens Primary Colors
20
+ * @presenter Color
21
+ */
14
22
  --rm-color-primary-h: 216;
15
23
  --rm-color-primary-s: 58%;
16
24
  --rm-color-primary-l: 48%;
17
25
 
18
- // Neutral HSL
26
+ /**
27
+ * @tokens Neutral Colors
28
+ * @presenter Color
29
+ */
19
30
  --rm-color-neutral-h: var(--rm-color-primary-h);
20
31
  --rm-color-neutral-s: 4%;
21
32
  --rm-color-neutral-l: var(--rm-color-primary-l);
22
33
 
23
- // Alerts Warning HSL
34
+ /**
35
+ * @tokens Alerts Warning Colors
36
+ * @presenter Color
37
+ */
24
38
  --rm-color-alerts-warning-h: 47;
25
39
  --rm-color-alerts-warning-s: 100%;
26
40
  --rm-color-alerts-warning-l: 61%;
27
41
 
28
- // Alerts Danger HSL
42
+ /**
43
+ * @tokens Alerts Danger Colors
44
+ * @presenter Color
45
+ */
29
46
  --rm-color-alerts-danger-h: 0;
30
47
  --rm-color-alerts-danger-s: 99%;
31
48
  --rm-color-alerts-danger-l: 76%;
32
49
 
33
- // Alerts Info HSL
50
+ /**
51
+ * @tokens Alerts Info Colors
52
+ * @presenter Color
53
+ */
34
54
  --rm-color-alerts-info-h: 216;
35
55
  --rm-color-alerts-info-s: 58%;
36
56
  --rm-color-alerts-info-l: 48%;
37
57
 
38
- // Alerts Notice HSL
58
+ /**
59
+ * @tokens Alerts Notice Colors
60
+ * @presenter Color
61
+ */
39
62
  --rm-color-alerts-notice-h: 130;
40
63
  --rm-color-alerts-notice-s: 61%;
41
64
  --rm-color-alerts-notice-l: 64%;
42
65
  }
43
66
 
44
67
  @mixin border-radius {
68
+ /**
69
+ * @tokens Border Radius
70
+ * @presenter BorderRadius
71
+ */
45
72
  --rm-radius-small: 2px;
46
73
  --rm-radius-medium: 4px;
47
74
  --rm-radius-large: 8px;
@@ -51,17 +78,30 @@
51
78
  }
52
79
 
53
80
  @mixin border-widths {
81
+ /**
82
+ * @tokens Border Width
83
+ * @presenter Spacing
84
+ */
54
85
  --rm-border-width: 1px;
55
86
  --rm-border-width-large: 2px;
56
87
  --rm-border-width-x-large: 4px;
57
88
  }
58
89
 
59
90
  @mixin border-colors {
91
+ /**
92
+ * @tokens Border Color
93
+ * @presenter Color
94
+ */
60
95
  --rm-border-color: var(--rm-color-neutral-plus-three);
61
96
  }
62
97
 
63
98
  @mixin box-shadows {
64
99
  // E.G. box-shadow: var(--rm-border-top) var(--rm-border-color);
100
+
101
+ /**
102
+ * @tokens Border Shadow
103
+ * @presenter Shadow
104
+ */
65
105
  --rm-border-none: 0 0 0 0;
66
106
  --rm-border-all: 0 0 0 var(--rm-border-width);
67
107
  --rm-border-top: 0 calc(-1 * var(--rm-border-width)) 0 0;
@@ -73,6 +113,10 @@
73
113
  }
74
114
 
75
115
  @mixin font-scales {
116
+ /**
117
+ * @tokens Font Scale
118
+ * @presenter FontSize
119
+ */
76
120
  --rm-font-scale-unit: 1rem; // 10px;
77
121
  --rm-font-x-small: calc(var(--rm-font-scale-unit) * 1.2); // 12px
78
122
  --rm-font-small: calc(var(--rm-font-scale-unit) * 1.4); // 14px
@@ -86,6 +130,10 @@
86
130
  }
87
131
 
88
132
  @mixin font-weights {
133
+ /**
134
+ * @tokens Font Weight
135
+ * @presenter FontWeight
136
+ */
89
137
  --rm-font-weight-thin: 100;
90
138
  --rm-font-weight-extra-light: 200;
91
139
  --rm-font-weight-light: 300;
@@ -98,6 +146,10 @@
98
146
  }
99
147
 
100
148
  @mixin line-heights {
149
+ /**
150
+ * @tokens Line Height
151
+ * @presenter LineHeight
152
+ */
101
153
  --rm-line-height-none: 0;
102
154
  --rm-line-height-densest: 1;
103
155
  --rm-line-height-denser: 1.15;
@@ -109,11 +161,18 @@
109
161
  }
110
162
 
111
163
  @mixin letter-spacing {
164
+ /**
165
+ * @tokens Letter Spacing
166
+ * @presenter LetterSpacing
167
+ */
112
168
  --rm-letter-spacing-navigation: 0.01rem;
113
169
  --rm-letter-spacing-label: 0.04rem;
114
170
  }
115
171
 
116
172
  @mixin transitions {
173
+ /**
174
+ * @tokens Transition
175
+ */
117
176
  --rm-transition-input: 120ms;
118
177
  --rm-transition-navigation: 200ms;
119
178
  --rm-transition-sidebar: 300ms;
@@ -123,15 +182,26 @@
123
182
  }
124
183
 
125
184
  @mixin encoded-images {
185
+ /**
186
+ * @tokens Encoded Images
187
+ */
126
188
  --rm-form-dropdown-arrow-width: 1rem; // No way to string interpolate
127
189
  --rm-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
128
190
  }
129
191
 
130
192
  @mixin fonts {
193
+ /**
194
+ * @tokens Font Family
195
+ * @presenter FontFamily
196
+ */
131
197
  --rm-font-family: 'Noto Sans', 'Noto Serif', sans-serif;
132
198
  }
133
199
 
134
200
  @mixin spacing-scales {
201
+ /**
202
+ * @tokens Space Scale
203
+ * @presenter Spacing
204
+ */
135
205
  --rm-space-scale-unit: 1rem; // 10px;
136
206
  --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2); // 2px
137
207
  --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4); // 4px
@@ -146,6 +216,10 @@
146
216
  }
147
217
 
148
218
  @mixin shadows {
219
+ /**
220
+ * @tokens Shadows
221
+ * @presenter Shadow
222
+ */
149
223
  --rm-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
150
224
  --rm-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
151
225
  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
@@ -154,6 +228,9 @@
154
228
  }
155
229
 
156
230
  @mixin z-indexes {
231
+ /**
232
+ * @tokens Z-Index
233
+ */
157
234
  --rm-z-index-header: 500;
158
235
  --rm-z-index-footer: 500;
159
236
  --rm-z-index-drawer: 700;
@@ -168,10 +245,20 @@
168
245
  @mixin inputs {
169
246
  // This should follow multiples of 4
170
247
  // https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
248
+
249
+ /**
250
+ * @tokens Input Heights
251
+ * @presenter Spacing
252
+ */
171
253
  --rm-input-height-small: 2.4rem; // 24px
172
254
  --rm-input-height-medium: 3.2rem; // 32px
173
255
  --rm-input-height-large: 4.4rem; // 44px
174
256
  --rm-input-height-x-large: 5.6rem; // 56px
257
+
258
+ /**
259
+ * @tokens Input Focus
260
+ * @presenter Shadow
261
+ */
175
262
  --rm-input-outer-focus: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four);
176
263
  --rm-input-inner-focus: inset var(--rm-border-all) var(--rm-color-primary-minus-three);
177
264
  --rm-input-focus: var(--rm-input-inner-focus), var(--rm-input-outer-focus);
@@ -182,6 +269,9 @@
182
269
  // https://drafts.csswg.org/css-env-1/
183
270
  // https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
184
271
 
272
+ /**
273
+ * @tokens Breakpoints
274
+ */
185
275
  $breakpoint-x-small: 512px; // vertical phone
186
276
  $breakpoint-small: 768px; // vertical ipad
187
277
  $breakpoint-medium: 1024px; // landscape ipad
package/dist/scss/core/tokens/dark_mode_tokens.scss CHANGED
@@ -1,4 +1,9 @@
1
1
  @mixin primary-semantic-scale-dark {
2
+ /**
3
+ * @tokens Primary Dark Colors
4
+ * @presenter Color
5
+ */
6
+
2
7
  // Main Scale
3
8
  --rm-color-primary-plus-max: var(--rm-color-black);
4
9
  --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
@@ -43,6 +48,11 @@
43
48
  }
44
49
 
45
50
  @mixin neutral-semantic-scale-dark {
51
+ /**
52
+ * @tokens Neutral Dark Colors
53
+ * @presenter Color
54
+ */
55
+
46
56
  // Main Scale
47
57
  --rm-color-neutral-plus-max: var(--rm-color-black);
48
58
  --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
@@ -87,6 +97,11 @@
87
97
  }
88
98
 
89
99
  @mixin alerts-warning-semantic-scale-dark {
100
+ /**
101
+ * @tokens Alerts Warning Dark Colors
102
+ * @presenter Color
103
+ */
104
+
90
105
  // Main Scale
91
106
  --rm-color-alerts-warning-plus-max: var(--rm-color-black);
92
107
  --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
@@ -131,6 +146,11 @@
131
146
  }
132
147
 
133
148
  @mixin alerts-danger-semantic-scale-dark {
149
+ /**
150
+ * @tokens Alerts Danger Dark Colors
151
+ * @presenter Color
152
+ */
153
+
134
154
  // Main Scale
135
155
  --rm-color-alerts-danger-plus-max: var(--rm-color-black);
136
156
  --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
@@ -175,6 +195,11 @@
175
195
  }
176
196
 
177
197
  @mixin alerts-info-semantic-scale-dark {
198
+ /**
199
+ * @tokens Alerts Info Dark Colors
200
+ * @presenter Color
201
+ */
202
+
178
203
  // Main Scale
179
204
  --rm-color-alerts-info-plus-max: var(--rm-color-black);
180
205
  --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
@@ -219,6 +244,11 @@
219
244
  }
220
245
 
221
246
  @mixin alerts-notice-semantic-scale-dark {
247
+ /**
248
+ * @tokens Alerts Notice Dark Colors
249
+ * @presenter Color
250
+ */
251
+
222
252
  // Main Scale
223
253
  --rm-color-alerts-notice-plus-max: var(--rm-color-black);
224
254
  --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
@@ -263,6 +293,10 @@
263
293
  }
264
294
 
265
295
  @mixin shadows-dark {
296
+ /**
297
+ * @tokens Dark Shadows
298
+ * @presenter Shadow
299
+ */
266
300
  --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
267
301
  --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
268
302
  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
package/dist/scss/core/tokens/scale_color_tokens.scss CHANGED
@@ -1,4 +1,8 @@
1
1
  @mixin primary-semantic-scale {
2
+ /**
3
+ * @tokens Primary Colors
4
+ * @presenter Color
5
+ */
2
6
  --rm-color-primary-original: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) var(--rm-color-primary-l));
3
7
 
4
8
  // Main Scale
@@ -45,6 +49,10 @@
45
49
  }
46
50
 
47
51
  @mixin neutral-semantic-scale {
52
+ /**
53
+ * @tokens Neutral Colors
54
+ * @presenter Color
55
+ */
48
56
  --rm-color-neutral-original: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) var(--rm-color-neutral-l));
49
57
 
50
58
  // Main Scale
@@ -91,6 +99,10 @@
91
99
  }
92
100
 
93
101
  @mixin alerts-warning-semantic-scale {
102
+ /**
103
+ * @tokens Alerts Warning Colors
104
+ * @presenter Color
105
+ */
94
106
  --rm-color-alerts-warning-original: hsl(
95
107
  var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) var(--rm-color-alerts-warning-l)
96
108
  );
@@ -139,6 +151,10 @@
139
151
  }
140
152
 
141
153
  @mixin alerts-danger-semantic-scale {
154
+ /**
155
+ * @tokens Alerts Danger Colors
156
+ * @presenter Color
157
+ */
142
158
  --rm-color-alerts-danger-original: hsl(
143
159
  var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) var(--rm-color-alerts-danger-l)
144
160
  );
@@ -187,6 +203,10 @@
187
203
  }
188
204
 
189
205
  @mixin alerts-info-semantic-scale {
206
+ /**
207
+ * @tokens Alerts Info Colors
208
+ * @presenter Color
209
+ */
190
210
  --rm-color-alerts-info-original: hsl(
191
211
  var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) var(--rm-color-alerts-info-l)
192
212
  );
@@ -235,6 +255,10 @@
235
255
  }
236
256
 
237
257
  @mixin alerts-notice-semantic-scale {
258
+ /**
259
+ * @tokens Alerts Notice Colors
260
+ * @presenter Color
261
+ */
238
262
  --rm-color-alerts-notice-original: hsl(
239
263
  var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) var(--rm-color-alerts-notice-l)
240
264
  );
@@ -283,6 +307,10 @@
283
307
  }
284
308
 
285
309
  @mixin background {
310
+ /**
311
+ * @tokens Basic Colors
312
+ * @presenter Color
313
+ */
286
314
  --rm-color-background: var(--rm-color-neutral-plus-eight);
287
315
  --rm-color-on-background: var(--rm-color-neutral-on-plus-eight);
288
316
  }
package/dist/scss/core/utilities.scss CHANGED
@@ -194,6 +194,10 @@
194
194
  align-self: stretch;
195
195
  }
196
196
 
197
+ .self-baseline {
198
+ align-self: baseline;
199
+ }
200
+
197
201
  // Text Alignment
198
202
 
199
203
  .text-left {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolemodel/optics",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
5
5
  "main": "dist/scss/optics.scss",
6
6
  "scripts": {
@@ -69,6 +69,7 @@
69
69
  "prettier": "^2.8.1",
70
70
  "sass": "^1.53.0",
71
71
  "sass-loader": "^10.1.1",
72
+ "storybook-design-token": "^2.9.0",
72
73
  "style-loader": "^2.0.0",
73
74
  "stylelint": "^14.16.0",
74
75
  "stylelint-config-idiomatic-order": "^9.0.0",