@muraldevkit/ds-foundation 2.11.0-dev-UzNK.1 → 2.12.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 (8) hide show
  1. package/dist/foundation.css +8 -8
  2. package/dist/foundation.css.map +1 -1
  3. package/dist/foundation.min.css +1 -1
  4. package/dist/foundation.min.css.map +1 -1
  5. package/package.json +2 -2
  6. package/src/styles/contextual-variables/color.scss +91 -90
  7. package/src/styles/global-variables/color.scss +320 -187
  8. package/src/styles/global-variables/shadows.scss +5 -7
package/dist/foundation.css CHANGED
@@ -170,11 +170,11 @@
170
170
  --mrl-white-opacity-06: rgba(var(--mrl-white), .60);
171
171
  --mrl-white-opacity-08: rgba(var(--mrl-white), .80);
172
172
  --mrl-status-private: var(--mrl-gray-100);
173
- --mrl-black-opacity-00: rgba(42, 82, 121, 0.04);
173
+ --mrl-black-opacity-00: rgba(42, 82, 121, 0.06);
174
174
  --mrl-black-opacity-01: rgba(42, 82, 121, 0.12);
175
175
  --mrl-black-opacity-02: rgba(21, 57, 75, 0.24);
176
176
  --mrl-black-opacity-03: rgba(11, 41, 70, 0.32);
177
- --mrl-black-opacity-05: rgba(37, 61, 86, 0.56);
177
+ --mrl-black-opacity-05: rgba(31, 51, 71, 0.56);
178
178
  --mrl-black-opacity-06: rgba(21, 41, 60, 0.64);
179
179
  --mrl-black-opacity-08: rgba(24, 36, 47, 0.8);
180
180
  }
@@ -204,11 +204,11 @@
204
204
  */
205
205
  /* Shadow/Elevation Tokens */
206
206
  :root {
207
- --mrl-shadow-01: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 4px 4px 0 rgba(var(--mrl-black), 0.04);
208
- --mrl-shadow-02: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 6px 8px 0 rgba(var(--mrl-black), 0.04);
209
- --mrl-shadow-03: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 24px 20px 0 rgba(var(--mrl-black), 0.04);
210
- --mrl-shadow-interactive-01: 0 4px 5px 0 rgba(var(--mrl-black), 0.08);
211
- --mrl-shadow-interactive-02: 0 12px 20px 0px rgba(var(--mrl-black), 0.20);
207
+ --mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 4px 4px 0 rgba(42, 82, 121, 0.04);
208
+ --mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 6px 8px 0 rgba(42, 82, 121, 0.04);
209
+ --mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 24px 20px 0 rgba(42, 82, 121, 0.08);
210
+ --mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);
211
+ --mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.20);
212
212
  }
213
213
 
214
214
  /* Spacing Tokens */
@@ -369,7 +369,7 @@
369
369
  --mrl-color-background-page: rgb(243, 245, 246);
370
370
  /* Colors with opacity */
371
371
  --mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
372
- --mrl-color-background-inverse-hover-opacity: rgba(var(--mrl-black), 0.2);
372
+ --mrl-color-background-inverse-hover-opacity: var(--mrl-black-opacity-02);
373
373
  }
374
374
 
375
375
  :root {
package/dist/foundation.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/styles/global-variables/border.scss","../src/styles/global-variables/color.scss","../src/styles/global-variables/motion.scss","../src/styles/global-variables/shadows.scss","../src/styles/global-variables/spacing.scss","../src/styles/global-variables/typography.scss","../src/styles/contextual-variables/color.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/border.scss","../src/styles/contextual-variables/typography.scss","../src/styles/contextual-variables/shadows.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"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","file":"foundation.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/styles/global-variables/border.scss","../src/styles/global-variables/color.scss","../src/styles/global-variables/motion.scss","../src/styles/global-variables/shadows.scss","../src/styles/global-variables/spacing.scss","../src/styles/global-variables/typography.scss","../src/styles/contextual-variables/color.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/border.scss","../src/styles/contextual-variables/typography.scss","../src/styles/contextual-variables/shadows.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"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","file":"foundation.css"}
package/dist/foundation.min.css CHANGED
@@ -1 +1 @@
1
- :root{--mrl-radii-01: 2px;--mrl-radii-02: 4px;--mrl-radii-03: 8px;--mrl-radii-04: 12px;--mrl-radii-05: 16px;--mrl-radii-06: 24px;--mrl-radii-07: 32px;--mrl-radii-08: 40px;--mrl-stroke-01: 2px;--mrl-stroke-02: 2px;--mrl-stroke-03: 2px}:root{--mrl-gray-10: 249, 250, 250;--mrl-gray-20: 236, 240, 244;--mrl-gray-30: 220, 225, 229;--mrl-gray-40: 184, 193, 204;--mrl-gray-50: 155, 168, 182;--mrl-gray-60: 129, 143, 156;--mrl-gray-70: 99, 112, 126;--mrl-gray-80: 72, 82, 91;--mrl-gray-90: 40, 46, 52;--mrl-gray-100: 27, 31, 34;--mrl-blue-10: 245, 250, 255;--mrl-blue-20: 230, 244, 254;--mrl-blue-30: 205, 230, 254;--mrl-blue-40: 180, 217, 253;--mrl-blue-50: 131, 191, 252;--mrl-blue-60: 81, 143, 251;--mrl-blue-70: 48, 106, 227;--mrl-blue-80: 49, 99, 201;--mrl-blue-90: 42, 86, 176;--mrl-blue-100: 30, 61, 125;--mrl-coral-10: 255, 230, 239;--mrl-coral-20: 254, 204, 223;--mrl-coral-30: 254, 154, 191;--mrl-coral-40: 253, 103, 160;--mrl-coral-50: 253, 53, 129;--mrl-coral-60: 255, 0, 102;--mrl-coral-70: 232, 0, 90;--mrl-coral-80: 214, 0, 87;--mrl-coral-90: 192, 3, 77;--mrl-coral-100: 163, 0, 63;--mrl-red-10: 255, 235, 235;--mrl-red-20: 255, 214, 214;--mrl-red-30: 255, 204, 204;--mrl-red-40: 255, 179, 179;--mrl-red-50: 255, 128, 128;--mrl-red-60: 255, 75, 75;--mrl-red-70: 224, 41, 53;--mrl-red-80: 179, 33, 42;--mrl-red-90: 140, 26, 33;--mrl-red-100: 115, 21, 27;--mrl-tomato-10: 251, 224, 223;--mrl-tomato-20: 253, 216, 216;--mrl-tomato-30: 246, 193, 194;--mrl-tomato-40: 240, 148, 151;--mrl-tomato-50: 227, 99, 103;--mrl-tomato-60: 224, 72, 77;--mrl-tomato-70: 212, 58, 64;--mrl-tomato-80: 205, 45, 51;--mrl-tomato-90: 190, 39, 48;--mrl-tomato-100: 157, 32, 40;--mrl-tomato-desaturated: 229, 179, 182;--mrl-orange-10: 255, 231, 204;--mrl-orange-20: 254, 226, 194;--mrl-orange-30: 252, 218, 192;--mrl-orange-40: 245, 199, 146;--mrl-orange-50: 244, 158, 72;--mrl-orange-60: 229, 121, 26;--mrl-orange-70: 201, 79, 19;--mrl-orange-80: 191, 76, 18;--mrl-orange-90: 178, 68, 1;--mrl-orange-100: 147, 57, 1;--mrl-orange-desaturated: 235, 186, 142;--mrl-lemon-10: 250, 241, 193;--mrl-lemon-20: 249, 240, 190;--mrl-lemon-30: 249, 237, 174;--mrl-lemon-40: 245, 226, 127;--mrl-lemon-50: 228, 203, 73;--mrl-lemon-60: 182, 158, 35;--mrl-lemon-70: 142, 116, 23;--mrl-lemon-80: 132, 108, 21;--mrl-lemon-90: 122, 99, 16;--mrl-lemon-100: 104, 84, 13;--mrl-lemon-desaturated: 228, 215, 149;--mrl-melon-10: 227, 248, 216;--mrl-melon-20: 214, 237, 202;--mrl-melon-30: 190, 226, 171;--mrl-melon-40: 161, 214, 135;--mrl-melon-50: 122, 185, 91;--mrl-melon-60: 93, 160, 59;--mrl-melon-70: 75, 132, 46;--mrl-melon-80: 69, 121, 42;--mrl-melon-90: 71, 114, 49;--mrl-melon-100: 60, 96, 41;--mrl-melon-desaturated: 169, 208, 178;--mrl-mint-10: 220, 242, 249;--mrl-mint-20: 207, 234, 242;--mrl-mint-30: 177, 217, 231;--mrl-mint-40: 138, 199, 219;--mrl-mint-50: 89, 181, 212;--mrl-mint-60: 36, 150, 188;--mrl-mint-70: 9, 126, 165;--mrl-mint-80: 8, 118, 155;--mrl-mint-90: 1, 114, 152;--mrl-mint-100: 1, 99, 132;--mrl-mint-desaturated: 162, 203, 216;--mrl-blueberry-10: 215, 228, 255;--mrl-blueberry-20: 202, 219, 252;--mrl-blueberry-30: 187, 209, 251;--mrl-blueberry-40: 139, 175, 249;--mrl-blueberry-50: 105, 146, 226;--mrl-blueberry-60: 91, 131, 210;--mrl-blueberry-70: 64, 110, 203;--mrl-blueberry-80: 32, 89, 202;--mrl-blueberry-90: 28, 77, 175;--mrl-blueberry-100: 24, 66, 149;--mrl-blueberry-desaturated: 173, 199, 224;--mrl-grape-10: 222, 220, 249;--mrl-grape-20: 216, 216, 249;--mrl-grape-30: 207, 207, 247;--mrl-grape-40: 162, 163, 240;--mrl-grape-50: 142, 129, 228;--mrl-grape-60: 132, 108, 224;--mrl-grape-70: 114, 86, 219;--mrl-grape-80: 94, 62, 214;--mrl-grape-90: 74, 58, 182;--mrl-grape-100: 63, 49, 155;--mrl-grape-desaturated: 189, 187, 221;--mrl-dragonfruit-10: 255, 225, 243;--mrl-dragonfruit-20: 246, 213, 243;--mrl-dragonfruit-30: 230, 188, 226;--mrl-dragonfruit-40: 216, 151, 209;--mrl-dragonfruit-50: 202, 114, 193;--mrl-dragonfruit-60: 196, 100, 186;--mrl-dragonfruit-70: 186, 74, 171;--mrl-dragonfruit-80: 175, 75, 168;--mrl-dragonfruit-90: 163, 67, 157;--mrl-dragonfruit-100: 141, 58, 136;--mrl-dragonfruit-desaturated: 232, 201, 221;--mrl-truffle-10: 236, 239, 238;--mrl-truffle-20: 219, 225, 223;--mrl-truffle-30: 197, 206, 203;--mrl-truffle-40: 170, 182, 178;--mrl-truffle-50: 131, 149, 144;--mrl-truffle-60: 108, 127, 121;--mrl-truffle-70: 96, 113, 108;--mrl-truffle-80: 80, 98, 93;--mrl-truffle-90: 70, 83, 79;--mrl-truffle-100: 56, 66, 63;--mrl-truffle-desaturated: 196, 202, 200;--mrl-white: 255, 255, 255;--mrl-black: 0, 0, 0;--mrl-status-info: 49, 99, 201;--mrl-status-info-light: 236, 242, 254;--mrl-status-success: 0, 132, 63;--mrl-status-success-light: 243, 250, 235;--mrl-status-warning: 255, 170, 1;--mrl-status-warning-light: 254, 246, 231;--mrl-status-error: 179, 33, 42;--mrl-status-error-light: 252, 233, 235;--mrl-white-opacity-02: rgba(var(--mrl-white), .24);--mrl-white-opacity-03: rgba(var(--mrl-white), .30);--mrl-white-opacity-04: rgba(var(--mrl-white), .40);--mrl-white-opacity-06: rgba(var(--mrl-white), .60);--mrl-white-opacity-08: rgba(var(--mrl-white), .80);--mrl-status-private: var(--mrl-gray-100);--mrl-black-opacity-00: rgba(42, 82, 121, 0.04);--mrl-black-opacity-01: rgba(42, 82, 121, 0.12);--mrl-black-opacity-02: rgba(21, 57, 75, 0.24);--mrl-black-opacity-03: rgba(11, 41, 70, 0.32);--mrl-black-opacity-05: rgba(37, 61, 86, 0.56);--mrl-black-opacity-06: rgba(21, 41, 60, 0.64);--mrl-black-opacity-08: rgba(24, 36, 47, 0.8)}:root{--mrl-timing-m1: cubic-bezier(0.17, 0.00, 0.00, 1.00);--mrl-timing-m1r: cubic-bezier(1.00, 0.00, 0.83, 1.00);--mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);--mrl-timing-m3: cubic-bezier(0.33, 0.00, 0.67, 1.00);--mrl-timing-m4: cubic-bezier(0.00, 0.00, 0.00, 1.00);--mrl-duration-01: 17ms;--mrl-duration-02: 167ms;--mrl-duration-03: 333ms;--mrl-duration-04: 667ms;--mrl-distance-01: 4px;--mrl-distance-02: 8px}:root{--mrl-shadow-01: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 4px 4px 0 rgba(var(--mrl-black), 0.04);--mrl-shadow-02: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 6px 8px 0 rgba(var(--mrl-black), 0.04);--mrl-shadow-03: 0 0 1px 0 rgba(var(--mrl-black), 0.32),0 24px 20px 0 rgba(var(--mrl-black), 0.04);--mrl-shadow-interactive-01: 0 4px 5px 0 rgba(var(--mrl-black), 0.08);--mrl-shadow-interactive-02: 0 12px 20px 0px rgba(var(--mrl-black), 0.20)}:root{--mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);--mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);--mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);--mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);--mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);--mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem)}:root{--mrl-baseline: 16;--mrl-font-family-01: abcsocial;--mrl-font-family-02: stkbureau;--mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);--mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);--mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);--mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);--mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);--mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);--mrl-line-height-01: 0.875;--mrl-line-height-02: 1;--mrl-line-height-03: 1.125;--mrl-line-height-04: 1.167;--mrl-line-height-05: 1.25;--mrl-line-height-06: 1.333;--mrl-line-height-07: 1.4;--mrl-line-height-08: 1.429;--mrl-line-height-09: 1.5;--mrl-line-height-10: 1.56;--mrl-line-height-11: 1.75;--mrl-line-height-12: 2;--mrl-letter-spacing-01: -2% ;--mrl-letter-spacing-02: -1% ;--mrl-letter-spacing-03: 0% ;--mrl-letter-spacing-04: 1% ;--mrl-letter-spacing-05: 2% ;--mrl-font-weight-01: 400 ;--mrl-font-weight-02: 500 ;--mrl-font-weight-03: 600 ;--mrl-font-weight-04: 700 ;--mrl-font-weight-05: 800 }:root{--mrl-color-focus: rgba(var(--mrl-blue-70), 1);--mrl-color-focus-inverse: rgba(var(--mrl-white), 1);--mrl-color-shadows: rgba(var(--mrl-black), 1);--mrl-color-brand: rgba(var(--mrl-red-70), 1);--mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);--mrl-color-brand-active: rgba(var(--mrl-red-90), 1);--mrl-color-accent: rgba(var(--mrl-blue-70), 1);--mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);--mrl-color-skeleton-inverse: rgba(var(--mrl-white), 1);--mrl-color-background: rgba(var(--mrl-white), 1);--mrl-color-background-secondary: rgba(var(--mrl-gray-80), 1);--mrl-color-background-decorative: rgba(var(--mrl-gray-20), 1);--mrl-color-background-highlight-secondary: rgba(var(--mrl-blue-10), 1);--mrl-color-background-info: rgba(var(--mrl-status-info), 1);--mrl-color-background-info-light: rgba(var(--mrl-status-info-light), 1);--mrl-color-background-success: rgba(var(--mrl-status-success), 1);--mrl-color-background-success-light: rgba(var(--mrl-status-success-light), 1);--mrl-color-background-warning: rgba(var(--mrl-status-warning), 1);--mrl-color-background-warning-light: rgba(var(--mrl-status-warning-light), 1);--mrl-color-background-error: rgba(var(--mrl-status-error), 1);--mrl-color-background-error-light: rgba(var(--mrl-status-error-light), 1);--mrl-color-background-private: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-background-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-background-highlight-hover: rgba(var(--mrl-gray-20), 1);--mrl-color-background-highlight-active: rgba(var(--mrl-gray-90), 1);--mrl-color-background-highlight-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-background-highlight-emph-active: rgba(var(--mrl-gray-30), 1);--mrl-color-line: rgba(var(--mrl-gray-70), 1);--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-active: rgba(var(--mrl-gray-100), 1);--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-line-highlight-secondary: rgba(var(--mrl-blue-20), 1);--mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);--mrl-color-line-divider-inverse: rgba(var(--mrl-gray-80), 1);--mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);--mrl-color-line-emph-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-emph-active: rgba(var(--mrl-black), 1);--mrl-color-line-inverse: rgba(var(--mrl-white), 1);--mrl-color-line-inverse-disabled: rgba(var(--mrl-white), 1);--mrl-color-icon-light: rgba(var(--mrl-gray-70 ), 1);--mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-icon-inverse: rgba(var(--mrl-white), 1);--mrl-color-input-icon-default: rgba(var(--mrl-gray-70), 1);--mrl-color-text: rgba(var(--mrl-gray-80), 1);--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-active: rgba(var(--mrl-gray-90), 1);--mrl-color-text-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-text-disabled-inverse: rgba(var(--mrl-white), 1);--mrl-color-text-emph: rgba(var(--mrl-gray-80), 1);--mrl-color-text-emph-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-emph-active: rgba(var(--mrl-black), 1);--mrl-color-text-highlight: rgba(var(--mrl-gray-80), 1);--mrl-color-text-highlight-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-highlight-active: rgba(var(--mrl-white), 1);--mrl-color-text-highlight-selected: rgba(var(--mrl-white), 1);--mrl-color-text-highlight-emph: rgba(var(--mrl-gray-90), 1);--mrl-color-text-highlight-emph-hover: rgba(var(--mrl-gray-100), 1);--mrl-color-text-highlight-emph-active: rgba(var(--mrl-black), 1);--mrl-color-text-highlight-emph-selected: rgba(var(--mrl-white), 1);--mrl-color-text-inverse: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-secondary: rgba(var(--mrl-gray-10), 1);--mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-active: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-selected: rgba(var(--mrl-white), 1);--mrl-color-text-02: rgba(var(--mrl-gray-90), 1);--mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);--mrl-color-text-label: rgba(var(--mrl-gray-90), 1);--mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);--mrl-color-text-success: rgba(var(--mrl-status-success), 1);--mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);--mrl-color-text-warning-light: rgba(var(--mrl-gray-80), 1);--mrl-color-text-error: rgba(var(--mrl-status-error), 1);--mrl-color-text-info: rgba(var(--mrl-status-info), 1);--mrl-color-text-private: rgba(var(--mrl-gray-100), 1);--mrl-color-icon-emph-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse-active: var(--mrl-color-accent);--mrl-color-background-inverse-selected: var(--mrl-color-accent);--mrl-color-background-highlight-emph-selected: var(--mrl-color-accent);--mrl-color-line-emph-selected: var(--mrl-color-accent);--mrl-color-text-emph-selected: var(--mrl-color-accent);--mrl-color-background-page: rgb(243, 245, 246);--mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);--mrl-color-background-inverse-hover-opacity: rgba(var(--mrl-black), 0.2)}:root{--mrl-space-stack-components: var(--mrl-spacing-06);--mrl-space-stack-controls: var(--mrl-spacing-05);--mrl-space-stack-controls-small: var(--mrl-spacing-04);--mrl-space-stack-section: var(--mrl-spacing-07);--mrl-space-stack-section-divider: var(--mrl-spacing-04);--mrl-space-stack-section-divider-small: var(--mrl-spacing-03);--mrl-space-stack-section-divider-large: var(--mrl-spacing-06);--mrl-space-stack-section-divider-label: var(--mrl-spacing-05);--mrl-space-stack-siblings: var(--mrl-spacing-04);--mrl-space-stack-related: var(--mrl-spacing-03);--mrl-space-stack-related-small: var(--mrl-spacing-02);--mrl-space-inset: var(--mrl-spacing-03);--mrl-space-inset-container: var(--mrl-spacing-08);--mrl-space-inset-container-large: var(--mrl-spacing-05);--mrl-space-inset-large: var(--mrl-spacing-05);--mrl-space-inset-control: var(--mrl-spacing-06);--mrl-space-inset-control-large: var(--mrl-spacing-05);--mrl-space-inline-related: var(--mrl-spacing-03);--mrl-space-inline-sibling: var(--mrl-spacing-04);--mrl-space-inline-sibling-small: var(--mrl-spacing-02);--mrl-space-gutter: var(--mrl-spacing-04);--mrl-space-gutter-label: var(--mrl-spacing-05);--mrl-space-offset-focus: var(--mrl-spacing-01);--mrl-space-stack-subheading: var(--mrl-spacing-05);--mrl-space-stack-title: var(--mrl-spacing-07);--mrl-space-stack-title-related: var(--mrl-spacing-05);--mrl-space-inline-sibling-xsmall: var(--mrl-space-inline-sibling-small);--mrl-space-inset-control-small: calc( var(--mrl-spacing-03) + var(--mrl-spacing-01) )}@media only screen and (min-width: 600px){:root{--mrl-space-inset-container-large: var(--mrl-spacing-08)}}:root{--mrl-line-width-border-fine: 1px;--mrl-line-width-border: var(--mrl-stroke-01);--mrl-line-width-border-selected: var(--mrl-stroke-01);--mrl-line-width-focus: var(--mrl-stroke-01);--mrl-line-width-control: var(--mrl-stroke-01);--mrl-line-width-divider: var(--mrl-stroke-01);--mrl-border-radius-tight: var(--mrl-radii-01);--mrl-border-radius-content: var(--mrl-radii-02);--mrl-border-radius-content-large: var(--mrl-radii-03);--mrl-border-radius-functional: var(--mrl-radii-03);--mrl-border-radius-functional-large: var(--mrl-radii-04);--mrl-border-radius-container: var(--mrl-radii-04);--mrl-border-radius-container-large: var(--mrl-radii-05);--mrl-border-radius-rounded: var(--mrl-radii-07);--mrl-border-radius-rounded-large: var(--mrl-radii-08);--mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);--mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);--mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);--mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);--mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);--mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);--mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);--mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);--mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected);--mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled);--mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse);--mrl-border-inverse-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled);--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider)}:root{--mrl-body-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font-alt: var(--mrl-font-family-02), serif;--mrl-type-size-display: var(--mrl-font-size-08);--mrl-type-size-display-large: var(--mrl-font-size-09);--mrl-type-size-display-small: var(--mrl-font-size-07);--mrl-type-size-display-xsmall: var(--mrl-font-size-06);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-06);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-size-text: var(--mrl-font-size-04);--mrl-type-size-text-large: var(--mrl-font-size-05);--mrl-type-size-text-small: var(--mrl-font-size-03);--mrl-type-size-text-xsmall: var(--mrl-font-size-02);--mrl-type-size-text-xxsmall: var(--mrl-font-size-01);--mrl-type-line-height-title: var(--mrl-line-height-05);--mrl-type-line-height-title-large: var(--mrl-line-height-06);--mrl-type-line-height-title-small: var(--mrl-line-height-08);--mrl-type-line-height-title-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-title-xxsmall: var(--mrl-line-height-06);--mrl-type-line-height-display: var(--mrl-line-height-02);--mrl-type-line-height-display-large: var(--mrl-line-height-02);--mrl-type-line-height-display-small: var(--mrl-line-height-02);--mrl-type-line-height-display-xsmall: var(--mrl-line-height-02);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-07);--mrl-type-line-height-headline-small: var(--mrl-line-height-02);--mrl-type-line-height-text: var(--mrl-line-height-09);--mrl-type-line-height-text-large: var(--mrl-line-height-10);--mrl-type-line-height-text-small: var(--mrl-line-height-08);--mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);--mrl-type-line-height-interactive: var(--mrl-line-height-09);--mrl-type-line-height-interactive-large: var(--mrl-line-height-10);--mrl-type-line-height-interactive-small: var(--mrl-line-height-08);--mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);--mrl-type-weight-display: var(--mrl-font-weight-01);--mrl-type-weight-headline: var(--mrl-font-weight-04);--mrl-type-weight-title: var(--mrl-font-weight-04);--mrl-type-weight-title-secondary: var(--mrl-font-weight-02);--mrl-type-weight-text: var(--mrl-font-weight-01);--mrl-type-weight-text-bold: var(--mrl-font-weight-04);--mrl-type-weight-text-secondary: var(--mrl-font-weight-01);--mrl-type-weight-interactive: var(--mrl-font-weight-04);--mrl-type-spacing-display: var(--mrl-letter-spacing-03);--mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);--mrl-type-spacing-display-small: var(--mrl-letter-spacing-02);--mrl-type-spacing-display-xsmall: var(--mrl-letter-spacing-02);--mrl-type-spacing-headline: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);--mrl-type-spacing-text: var(--mrl-letter-spacing-03);--mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);--mrl-type-size-toggleable-label: calc(10 / var(--mrl-baseline) * 1rem);--mrl-type-weight-toggleable-label: var(--mrl-font-weight-03)}@media screen and (min-width: 600px){:root{--mrl-type-size-display: var(--mrl-font-size-09);--mrl-type-size-display-large: var(--mrl-font-size-10);--mrl-type-size-display-small: var(--mrl-font-size-08);--mrl-type-size-display-xsmall: var(--mrl-font-size-07);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-07);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-06);--mrl-type-line-height-headline-small: var(--mrl-line-height-09);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03)}}:root{--mrl-shadows-lifted: var(--mrl-shadow-01);--mrl-shadows-raised: var(--mrl-shadow-02);--mrl-shadows-floating: var(--mrl-shadow-03);--mrl-shadows-hover: var(--mrl-shadow-interactive-01);--mrl-shadows-drag: var(--mrl-shadow-interactive-02)}.mrl-u-focus-wrapper{position:relative}body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,samp,small,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;margin:0;padding:0;vertical-align:baseline}b,em,i,strike,strong,sub,sup,u{border:0;font-family:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:none}table{border-collapse:collapse;border-spacing:0}html{border:0;box-sizing:border-box;font:inherit;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size, 100%);-webkit-font-smoothing:antialiased;margin:0;padding:0;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-family:var(--mrl-heading-font)}*,*::before,*::after{box-sizing:inherit}.mrl-u-space-center-horizontal{display:flex}.mrl-u-space-center-horizontal-inline{display:inline-flex}.mrl-u-space-center-vertical{align-items:center;display:flex}.mrl-u-space-center-vertical>*{display:inline-flex}.mrl-u-space-center-vertical-inline{align-items:center;display:inline-flex}.mrl-u-space-center-vertical-inline>*{display:inline-flex}.mrl-u-text-interactive-xsmall{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}.mrl-u-text-interactive-small{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small)}.mrl-u-text-interactive-medium{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive)}.mrl-u-text-interactive-large{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-large);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-large)}.mrl-u-text-toggleable-label{font-size:var(--mrl-type-size-toggleable-label);font-weight:var(--mrl-type-weight-toggleable-label)}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}/*# sourceMappingURL=foundation.min.css.map */
1
+ :root{--mrl-radii-01: 2px;--mrl-radii-02: 4px;--mrl-radii-03: 8px;--mrl-radii-04: 12px;--mrl-radii-05: 16px;--mrl-radii-06: 24px;--mrl-radii-07: 32px;--mrl-radii-08: 40px;--mrl-stroke-01: 2px;--mrl-stroke-02: 2px;--mrl-stroke-03: 2px}:root{--mrl-gray-10: 249, 250, 250;--mrl-gray-20: 236, 240, 244;--mrl-gray-30: 220, 225, 229;--mrl-gray-40: 184, 193, 204;--mrl-gray-50: 155, 168, 182;--mrl-gray-60: 129, 143, 156;--mrl-gray-70: 99, 112, 126;--mrl-gray-80: 72, 82, 91;--mrl-gray-90: 40, 46, 52;--mrl-gray-100: 27, 31, 34;--mrl-blue-10: 245, 250, 255;--mrl-blue-20: 230, 244, 254;--mrl-blue-30: 205, 230, 254;--mrl-blue-40: 180, 217, 253;--mrl-blue-50: 131, 191, 252;--mrl-blue-60: 81, 143, 251;--mrl-blue-70: 48, 106, 227;--mrl-blue-80: 49, 99, 201;--mrl-blue-90: 42, 86, 176;--mrl-blue-100: 30, 61, 125;--mrl-coral-10: 255, 230, 239;--mrl-coral-20: 254, 204, 223;--mrl-coral-30: 254, 154, 191;--mrl-coral-40: 253, 103, 160;--mrl-coral-50: 253, 53, 129;--mrl-coral-60: 255, 0, 102;--mrl-coral-70: 232, 0, 90;--mrl-coral-80: 214, 0, 87;--mrl-coral-90: 192, 3, 77;--mrl-coral-100: 163, 0, 63;--mrl-red-10: 255, 235, 235;--mrl-red-20: 255, 214, 214;--mrl-red-30: 255, 204, 204;--mrl-red-40: 255, 179, 179;--mrl-red-50: 255, 128, 128;--mrl-red-60: 255, 75, 75;--mrl-red-70: 224, 41, 53;--mrl-red-80: 179, 33, 42;--mrl-red-90: 140, 26, 33;--mrl-red-100: 115, 21, 27;--mrl-tomato-10: 251, 224, 223;--mrl-tomato-20: 253, 216, 216;--mrl-tomato-30: 246, 193, 194;--mrl-tomato-40: 240, 148, 151;--mrl-tomato-50: 227, 99, 103;--mrl-tomato-60: 224, 72, 77;--mrl-tomato-70: 212, 58, 64;--mrl-tomato-80: 205, 45, 51;--mrl-tomato-90: 190, 39, 48;--mrl-tomato-100: 157, 32, 40;--mrl-tomato-desaturated: 229, 179, 182;--mrl-orange-10: 255, 231, 204;--mrl-orange-20: 254, 226, 194;--mrl-orange-30: 252, 218, 192;--mrl-orange-40: 245, 199, 146;--mrl-orange-50: 244, 158, 72;--mrl-orange-60: 229, 121, 26;--mrl-orange-70: 201, 79, 19;--mrl-orange-80: 191, 76, 18;--mrl-orange-90: 178, 68, 1;--mrl-orange-100: 147, 57, 1;--mrl-orange-desaturated: 235, 186, 142;--mrl-lemon-10: 250, 241, 193;--mrl-lemon-20: 249, 240, 190;--mrl-lemon-30: 249, 237, 174;--mrl-lemon-40: 245, 226, 127;--mrl-lemon-50: 228, 203, 73;--mrl-lemon-60: 182, 158, 35;--mrl-lemon-70: 142, 116, 23;--mrl-lemon-80: 132, 108, 21;--mrl-lemon-90: 122, 99, 16;--mrl-lemon-100: 104, 84, 13;--mrl-lemon-desaturated: 228, 215, 149;--mrl-melon-10: 227, 248, 216;--mrl-melon-20: 214, 237, 202;--mrl-melon-30: 190, 226, 171;--mrl-melon-40: 161, 214, 135;--mrl-melon-50: 122, 185, 91;--mrl-melon-60: 93, 160, 59;--mrl-melon-70: 75, 132, 46;--mrl-melon-80: 69, 121, 42;--mrl-melon-90: 71, 114, 49;--mrl-melon-100: 60, 96, 41;--mrl-melon-desaturated: 169, 208, 178;--mrl-mint-10: 220, 242, 249;--mrl-mint-20: 207, 234, 242;--mrl-mint-30: 177, 217, 231;--mrl-mint-40: 138, 199, 219;--mrl-mint-50: 89, 181, 212;--mrl-mint-60: 36, 150, 188;--mrl-mint-70: 9, 126, 165;--mrl-mint-80: 8, 118, 155;--mrl-mint-90: 1, 114, 152;--mrl-mint-100: 1, 99, 132;--mrl-mint-desaturated: 162, 203, 216;--mrl-blueberry-10: 215, 228, 255;--mrl-blueberry-20: 202, 219, 252;--mrl-blueberry-30: 187, 209, 251;--mrl-blueberry-40: 139, 175, 249;--mrl-blueberry-50: 105, 146, 226;--mrl-blueberry-60: 91, 131, 210;--mrl-blueberry-70: 64, 110, 203;--mrl-blueberry-80: 32, 89, 202;--mrl-blueberry-90: 28, 77, 175;--mrl-blueberry-100: 24, 66, 149;--mrl-blueberry-desaturated: 173, 199, 224;--mrl-grape-10: 222, 220, 249;--mrl-grape-20: 216, 216, 249;--mrl-grape-30: 207, 207, 247;--mrl-grape-40: 162, 163, 240;--mrl-grape-50: 142, 129, 228;--mrl-grape-60: 132, 108, 224;--mrl-grape-70: 114, 86, 219;--mrl-grape-80: 94, 62, 214;--mrl-grape-90: 74, 58, 182;--mrl-grape-100: 63, 49, 155;--mrl-grape-desaturated: 189, 187, 221;--mrl-dragonfruit-10: 255, 225, 243;--mrl-dragonfruit-20: 246, 213, 243;--mrl-dragonfruit-30: 230, 188, 226;--mrl-dragonfruit-40: 216, 151, 209;--mrl-dragonfruit-50: 202, 114, 193;--mrl-dragonfruit-60: 196, 100, 186;--mrl-dragonfruit-70: 186, 74, 171;--mrl-dragonfruit-80: 175, 75, 168;--mrl-dragonfruit-90: 163, 67, 157;--mrl-dragonfruit-100: 141, 58, 136;--mrl-dragonfruit-desaturated: 232, 201, 221;--mrl-truffle-10: 236, 239, 238;--mrl-truffle-20: 219, 225, 223;--mrl-truffle-30: 197, 206, 203;--mrl-truffle-40: 170, 182, 178;--mrl-truffle-50: 131, 149, 144;--mrl-truffle-60: 108, 127, 121;--mrl-truffle-70: 96, 113, 108;--mrl-truffle-80: 80, 98, 93;--mrl-truffle-90: 70, 83, 79;--mrl-truffle-100: 56, 66, 63;--mrl-truffle-desaturated: 196, 202, 200;--mrl-white: 255, 255, 255;--mrl-black: 0, 0, 0;--mrl-status-info: 49, 99, 201;--mrl-status-info-light: 236, 242, 254;--mrl-status-success: 0, 132, 63;--mrl-status-success-light: 243, 250, 235;--mrl-status-warning: 255, 170, 1;--mrl-status-warning-light: 254, 246, 231;--mrl-status-error: 179, 33, 42;--mrl-status-error-light: 252, 233, 235;--mrl-white-opacity-02: rgba(var(--mrl-white), .24);--mrl-white-opacity-03: rgba(var(--mrl-white), .30);--mrl-white-opacity-04: rgba(var(--mrl-white), .40);--mrl-white-opacity-06: rgba(var(--mrl-white), .60);--mrl-white-opacity-08: rgba(var(--mrl-white), .80);--mrl-status-private: var(--mrl-gray-100);--mrl-black-opacity-00: rgba(42, 82, 121, 0.06);--mrl-black-opacity-01: rgba(42, 82, 121, 0.12);--mrl-black-opacity-02: rgba(21, 57, 75, 0.24);--mrl-black-opacity-03: rgba(11, 41, 70, 0.32);--mrl-black-opacity-05: rgba(31, 51, 71, 0.56);--mrl-black-opacity-06: rgba(21, 41, 60, 0.64);--mrl-black-opacity-08: rgba(24, 36, 47, 0.8)}:root{--mrl-timing-m1: cubic-bezier(0.17, 0.00, 0.00, 1.00);--mrl-timing-m1r: cubic-bezier(1.00, 0.00, 0.83, 1.00);--mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);--mrl-timing-m3: cubic-bezier(0.33, 0.00, 0.67, 1.00);--mrl-timing-m4: cubic-bezier(0.00, 0.00, 0.00, 1.00);--mrl-duration-01: 17ms;--mrl-duration-02: 167ms;--mrl-duration-03: 333ms;--mrl-duration-04: 667ms;--mrl-distance-01: 4px;--mrl-distance-02: 8px}:root{--mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 4px 4px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 6px 8px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32),0 24px 20px 0 rgba(42, 82, 121, 0.08);--mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);--mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.20)}:root{--mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);--mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);--mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);--mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);--mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);--mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem)}:root{--mrl-baseline: 16;--mrl-font-family-01: abcsocial;--mrl-font-family-02: stkbureau;--mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);--mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);--mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);--mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);--mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);--mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);--mrl-line-height-01: 0.875;--mrl-line-height-02: 1;--mrl-line-height-03: 1.125;--mrl-line-height-04: 1.167;--mrl-line-height-05: 1.25;--mrl-line-height-06: 1.333;--mrl-line-height-07: 1.4;--mrl-line-height-08: 1.429;--mrl-line-height-09: 1.5;--mrl-line-height-10: 1.56;--mrl-line-height-11: 1.75;--mrl-line-height-12: 2;--mrl-letter-spacing-01: -2% ;--mrl-letter-spacing-02: -1% ;--mrl-letter-spacing-03: 0% ;--mrl-letter-spacing-04: 1% ;--mrl-letter-spacing-05: 2% ;--mrl-font-weight-01: 400 ;--mrl-font-weight-02: 500 ;--mrl-font-weight-03: 600 ;--mrl-font-weight-04: 700 ;--mrl-font-weight-05: 800 }:root{--mrl-color-focus: rgba(var(--mrl-blue-70), 1);--mrl-color-focus-inverse: rgba(var(--mrl-white), 1);--mrl-color-shadows: rgba(var(--mrl-black), 1);--mrl-color-brand: rgba(var(--mrl-red-70), 1);--mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);--mrl-color-brand-active: rgba(var(--mrl-red-90), 1);--mrl-color-accent: rgba(var(--mrl-blue-70), 1);--mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);--mrl-color-skeleton-inverse: rgba(var(--mrl-white), 1);--mrl-color-background: rgba(var(--mrl-white), 1);--mrl-color-background-secondary: rgba(var(--mrl-gray-80), 1);--mrl-color-background-decorative: rgba(var(--mrl-gray-20), 1);--mrl-color-background-highlight-secondary: rgba(var(--mrl-blue-10), 1);--mrl-color-background-info: rgba(var(--mrl-status-info), 1);--mrl-color-background-info-light: rgba(var(--mrl-status-info-light), 1);--mrl-color-background-success: rgba(var(--mrl-status-success), 1);--mrl-color-background-success-light: rgba(var(--mrl-status-success-light), 1);--mrl-color-background-warning: rgba(var(--mrl-status-warning), 1);--mrl-color-background-warning-light: rgba(var(--mrl-status-warning-light), 1);--mrl-color-background-error: rgba(var(--mrl-status-error), 1);--mrl-color-background-error-light: rgba(var(--mrl-status-error-light), 1);--mrl-color-background-private: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-background-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-background-highlight-hover: rgba(var(--mrl-gray-20), 1);--mrl-color-background-highlight-active: rgba(var(--mrl-gray-90), 1);--mrl-color-background-highlight-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-background-highlight-emph-active: rgba(var(--mrl-gray-30), 1);--mrl-color-line: rgba(var(--mrl-gray-70), 1);--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-active: rgba(var(--mrl-gray-100), 1);--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-line-highlight-secondary: rgba(var(--mrl-blue-20), 1);--mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);--mrl-color-line-divider-inverse: rgba(var(--mrl-gray-80), 1);--mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);--mrl-color-line-emph-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-emph-active: rgba(var(--mrl-black), 1);--mrl-color-line-inverse: rgba(var(--mrl-white), 1);--mrl-color-line-inverse-disabled: rgba(var(--mrl-white), 1);--mrl-color-icon-light: rgba(var(--mrl-gray-70 ), 1);--mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-icon-inverse: rgba(var(--mrl-white), 1);--mrl-color-input-icon-default: rgba(var(--mrl-gray-70), 1);--mrl-color-text: rgba(var(--mrl-gray-80), 1);--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-active: rgba(var(--mrl-gray-90), 1);--mrl-color-text-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-text-disabled-inverse: rgba(var(--mrl-white), 1);--mrl-color-text-emph: rgba(var(--mrl-gray-80), 1);--mrl-color-text-emph-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-emph-active: rgba(var(--mrl-black), 1);--mrl-color-text-highlight: rgba(var(--mrl-gray-80), 1);--mrl-color-text-highlight-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-highlight-active: rgba(var(--mrl-white), 1);--mrl-color-text-highlight-selected: rgba(var(--mrl-white), 1);--mrl-color-text-highlight-emph: rgba(var(--mrl-gray-90), 1);--mrl-color-text-highlight-emph-hover: rgba(var(--mrl-gray-100), 1);--mrl-color-text-highlight-emph-active: rgba(var(--mrl-black), 1);--mrl-color-text-highlight-emph-selected: rgba(var(--mrl-white), 1);--mrl-color-text-inverse: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-secondary: rgba(var(--mrl-gray-10), 1);--mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-active: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-selected: rgba(var(--mrl-white), 1);--mrl-color-text-02: rgba(var(--mrl-gray-90), 1);--mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);--mrl-color-text-label: rgba(var(--mrl-gray-90), 1);--mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);--mrl-color-text-success: rgba(var(--mrl-status-success), 1);--mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);--mrl-color-text-warning-light: rgba(var(--mrl-gray-80), 1);--mrl-color-text-error: rgba(var(--mrl-status-error), 1);--mrl-color-text-info: rgba(var(--mrl-status-info), 1);--mrl-color-text-private: rgba(var(--mrl-gray-100), 1);--mrl-color-icon-emph-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-background-inverse-active: var(--mrl-color-accent);--mrl-color-background-inverse-selected: var(--mrl-color-accent);--mrl-color-background-highlight-emph-selected: var(--mrl-color-accent);--mrl-color-line-emph-selected: var(--mrl-color-accent);--mrl-color-text-emph-selected: var(--mrl-color-accent);--mrl-color-background-page: rgb(243, 245, 246);--mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);--mrl-color-background-inverse-hover-opacity: var(--mrl-black-opacity-02)}:root{--mrl-space-stack-components: var(--mrl-spacing-06);--mrl-space-stack-controls: var(--mrl-spacing-05);--mrl-space-stack-controls-small: var(--mrl-spacing-04);--mrl-space-stack-section: var(--mrl-spacing-07);--mrl-space-stack-section-divider: var(--mrl-spacing-04);--mrl-space-stack-section-divider-small: var(--mrl-spacing-03);--mrl-space-stack-section-divider-large: var(--mrl-spacing-06);--mrl-space-stack-section-divider-label: var(--mrl-spacing-05);--mrl-space-stack-siblings: var(--mrl-spacing-04);--mrl-space-stack-related: var(--mrl-spacing-03);--mrl-space-stack-related-small: var(--mrl-spacing-02);--mrl-space-inset: var(--mrl-spacing-03);--mrl-space-inset-container: var(--mrl-spacing-08);--mrl-space-inset-container-large: var(--mrl-spacing-05);--mrl-space-inset-large: var(--mrl-spacing-05);--mrl-space-inset-control: var(--mrl-spacing-06);--mrl-space-inset-control-large: var(--mrl-spacing-05);--mrl-space-inline-related: var(--mrl-spacing-03);--mrl-space-inline-sibling: var(--mrl-spacing-04);--mrl-space-inline-sibling-small: var(--mrl-spacing-02);--mrl-space-gutter: var(--mrl-spacing-04);--mrl-space-gutter-label: var(--mrl-spacing-05);--mrl-space-offset-focus: var(--mrl-spacing-01);--mrl-space-stack-subheading: var(--mrl-spacing-05);--mrl-space-stack-title: var(--mrl-spacing-07);--mrl-space-stack-title-related: var(--mrl-spacing-05);--mrl-space-inline-sibling-xsmall: var(--mrl-space-inline-sibling-small);--mrl-space-inset-control-small: calc( var(--mrl-spacing-03) + var(--mrl-spacing-01) )}@media only screen and (min-width: 600px){:root{--mrl-space-inset-container-large: var(--mrl-spacing-08)}}:root{--mrl-line-width-border-fine: 1px;--mrl-line-width-border: var(--mrl-stroke-01);--mrl-line-width-border-selected: var(--mrl-stroke-01);--mrl-line-width-focus: var(--mrl-stroke-01);--mrl-line-width-control: var(--mrl-stroke-01);--mrl-line-width-divider: var(--mrl-stroke-01);--mrl-border-radius-tight: var(--mrl-radii-01);--mrl-border-radius-content: var(--mrl-radii-02);--mrl-border-radius-content-large: var(--mrl-radii-03);--mrl-border-radius-functional: var(--mrl-radii-03);--mrl-border-radius-functional-large: var(--mrl-radii-04);--mrl-border-radius-container: var(--mrl-radii-04);--mrl-border-radius-container-large: var(--mrl-radii-05);--mrl-border-radius-rounded: var(--mrl-radii-07);--mrl-border-radius-rounded-large: var(--mrl-radii-08);--mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);--mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);--mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);--mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);--mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);--mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);--mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);--mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);--mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected);--mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled);--mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse);--mrl-border-inverse-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled);--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider)}:root{--mrl-body-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font-alt: var(--mrl-font-family-02), serif;--mrl-type-size-display: var(--mrl-font-size-08);--mrl-type-size-display-large: var(--mrl-font-size-09);--mrl-type-size-display-small: var(--mrl-font-size-07);--mrl-type-size-display-xsmall: var(--mrl-font-size-06);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-06);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-size-text: var(--mrl-font-size-04);--mrl-type-size-text-large: var(--mrl-font-size-05);--mrl-type-size-text-small: var(--mrl-font-size-03);--mrl-type-size-text-xsmall: var(--mrl-font-size-02);--mrl-type-size-text-xxsmall: var(--mrl-font-size-01);--mrl-type-line-height-title: var(--mrl-line-height-05);--mrl-type-line-height-title-large: var(--mrl-line-height-06);--mrl-type-line-height-title-small: var(--mrl-line-height-08);--mrl-type-line-height-title-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-title-xxsmall: var(--mrl-line-height-06);--mrl-type-line-height-display: var(--mrl-line-height-02);--mrl-type-line-height-display-large: var(--mrl-line-height-02);--mrl-type-line-height-display-small: var(--mrl-line-height-02);--mrl-type-line-height-display-xsmall: var(--mrl-line-height-02);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-07);--mrl-type-line-height-headline-small: var(--mrl-line-height-02);--mrl-type-line-height-text: var(--mrl-line-height-09);--mrl-type-line-height-text-large: var(--mrl-line-height-10);--mrl-type-line-height-text-small: var(--mrl-line-height-08);--mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);--mrl-type-line-height-interactive: var(--mrl-line-height-09);--mrl-type-line-height-interactive-large: var(--mrl-line-height-10);--mrl-type-line-height-interactive-small: var(--mrl-line-height-08);--mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);--mrl-type-weight-display: var(--mrl-font-weight-01);--mrl-type-weight-headline: var(--mrl-font-weight-04);--mrl-type-weight-title: var(--mrl-font-weight-04);--mrl-type-weight-title-secondary: var(--mrl-font-weight-02);--mrl-type-weight-text: var(--mrl-font-weight-01);--mrl-type-weight-text-bold: var(--mrl-font-weight-04);--mrl-type-weight-text-secondary: var(--mrl-font-weight-01);--mrl-type-weight-interactive: var(--mrl-font-weight-04);--mrl-type-spacing-display: var(--mrl-letter-spacing-03);--mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);--mrl-type-spacing-display-small: var(--mrl-letter-spacing-02);--mrl-type-spacing-display-xsmall: var(--mrl-letter-spacing-02);--mrl-type-spacing-headline: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);--mrl-type-spacing-text: var(--mrl-letter-spacing-03);--mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);--mrl-type-size-toggleable-label: calc(10 / var(--mrl-baseline) * 1rem);--mrl-type-weight-toggleable-label: var(--mrl-font-weight-03)}@media screen and (min-width: 600px){:root{--mrl-type-size-display: var(--mrl-font-size-09);--mrl-type-size-display-large: var(--mrl-font-size-10);--mrl-type-size-display-small: var(--mrl-font-size-08);--mrl-type-size-display-xsmall: var(--mrl-font-size-07);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-07);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-06);--mrl-type-line-height-headline-small: var(--mrl-line-height-09);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03)}}:root{--mrl-shadows-lifted: var(--mrl-shadow-01);--mrl-shadows-raised: var(--mrl-shadow-02);--mrl-shadows-floating: var(--mrl-shadow-03);--mrl-shadows-hover: var(--mrl-shadow-interactive-01);--mrl-shadows-drag: var(--mrl-shadow-interactive-02)}.mrl-u-focus-wrapper{position:relative}body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,samp,small,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;margin:0;padding:0;vertical-align:baseline}b,em,i,strike,strong,sub,sup,u{border:0;font-family:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:none}table{border-collapse:collapse;border-spacing:0}html{border:0;box-sizing:border-box;font:inherit;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size, 100%);-webkit-font-smoothing:antialiased;margin:0;padding:0;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-family:var(--mrl-heading-font)}*,*::before,*::after{box-sizing:inherit}.mrl-u-space-center-horizontal{display:flex}.mrl-u-space-center-horizontal-inline{display:inline-flex}.mrl-u-space-center-vertical{align-items:center;display:flex}.mrl-u-space-center-vertical>*{display:inline-flex}.mrl-u-space-center-vertical-inline{align-items:center;display:inline-flex}.mrl-u-space-center-vertical-inline>*{display:inline-flex}.mrl-u-text-interactive-xsmall{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}.mrl-u-text-interactive-small{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small)}.mrl-u-text-interactive-medium{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive)}.mrl-u-text-interactive-large{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-large);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-large)}.mrl-u-text-toggleable-label{font-size:var(--mrl-type-size-toggleable-label);font-weight:var(--mrl-type-weight-toggleable-label)}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}/*# sourceMappingURL=foundation.min.css.map */
package/dist/foundation.min.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/styles/global-variables/border.scss","../src/styles/global-variables/color.scss","../src/styles/global-variables/motion.scss","../src/styles/global-variables/shadows.scss","../src/styles/global-variables/spacing.scss","../src/styles/global-variables/typography.scss","../src/styles/contextual-variables/color.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/border.scss","../src/styles/contextual-variables/typography.scss","../src/styles/contextual-variables/shadows.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AA8BA,MAEE,qKAIA,+DCiJF,MAEI,s+IAKE,oQAIJ,0CACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CC/KF,MAGE,qQAKA,mGAKA,8CCdF,MAEE,qbCCF,MAEE,8wBCkCF,MACC,mBACA,gCACA,gCAIC,6yBAKA,iUAKA,mJAKA,uIC8EF,MAGE,2hJAKA,wTAID,gDAGA,oEACA,0ECnID,MAGE,20CAMD,yEAGA,uFAPA,0CALD,MAME,0DCXF,MAGC,kCAIC,gPAKA,ydAiCC,02CAaD,qKCOF,MACC,uDACA,0DACA,yDAIC,0nBAKA,oyCAKA,ybAKA,2iBAKD,wEACA,8DAKD,qCACC,MAGE,yXAKA,6LAKA,iECnIH,MAEE,8OCtBF,qBACC,kBCKD,qXAuEC,SACA,SACA,UACA,wBAGD,+BAQC,SACA,oBACA,SACA,UACA,wBAID,8EAWC,cAGD,MAEC,gBAGD,aAEC,YAGD,wDAIC,aAGD,MACC,yBACA,iBAKD,KACC,SACA,sBACA,aACA,iCACA,qCACA,mCACA,SACA,UACA,wBAGD,kBACC,oCAGD,qBAGC,mBCtJD,+BCgHC,QANmB,KDtGpB,sCC4GC,QAHoB,YDrGrB,6BCoFC,mBACA,QAPmB,KASnB,+BACC,oBDpFF,oCCgFC,mBACA,QAJoB,YAMpB,sCACC,oBC9FD,+BDgCA,iCACA,2CACA,+CACA,0DACA,2DCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DCpCA,+BDgCA,iCACA,oCACA,+CACA,4CACA,oDCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DC/BD,6BDqEC,gDACA,oDEnBD,MACC,kEACA,gEAaA,wKA1CA,WA7B4B,sBAgC3B,UAhC2B,sBA4C5B,uDACA,8CACA,gBACA,oBACA,oBACA,iCACA,oBACA,mBA6BA,sbAMC,0EAMF,qDA/DC,WA5B0B,sBAgG3B,4BApEC,WA5B0B,sBA+BzB,UA/ByB,sBAqG3B,qDAzEC,WAxB0B,oDAsG3B,4BA9EC,WAxB0B,oDA2BzB,UA3ByB,oDA2G3B,0FAnFC,WAvB2B,sBA0B1B,UA1B0B","file":"foundation.min.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/styles/global-variables/border.scss","../src/styles/global-variables/color.scss","../src/styles/global-variables/motion.scss","../src/styles/global-variables/shadows.scss","../src/styles/global-variables/spacing.scss","../src/styles/global-variables/typography.scss","../src/styles/contextual-variables/color.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/border.scss","../src/styles/contextual-variables/typography.scss","../src/styles/contextual-variables/shadows.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AA8BA,MAEE,qKAIA,+DCsRF,MAEE,s+IAKC,oQAIF,0CACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CCpTD,MAGE,qQAKA,mGAKA,8CChBF,MAEE,wYCGF,MAEE,8wBCkCF,MACC,mBACA,gCACA,gCAIC,6yBAKA,iUAKA,mJAKA,uIC+EF,MAGE,2hJAKA,wTAID,gDAGA,oEACA,0ECpID,MAGE,20CAMD,yEAGA,uFAPA,0CALD,MAME,0DCXF,MAGC,kCAIC,gPAKA,ydAiCC,02CAaD,qKCOF,MACC,uDACA,0DACA,yDAIC,0nBAKA,oyCAKA,ybAKA,2iBAKD,wEACA,8DAKD,qCACC,MAGE,yXAKA,6LAKA,iECnIH,MAEE,8OCtBF,qBACC,kBCKD,qXAuEC,SACA,SACA,UACA,wBAGD,+BAQC,SACA,oBACA,SACA,UACA,wBAID,8EAWC,cAGD,MAEC,gBAGD,aAEC,YAGD,wDAIC,aAGD,MACC,yBACA,iBAKD,KACC,SACA,sBACA,aACA,iCACA,qCACA,mCACA,SACA,UACA,wBAGD,kBACC,oCAGD,qBAGC,mBCtJD,+BCgHC,QANmB,KDtGpB,sCC4GC,QAHoB,YDrGrB,6BCoFC,mBACA,QAPmB,KASnB,+BACC,oBDpFF,oCCgFC,mBACA,QAJoB,YAMpB,sCACC,oBC9FD,+BDgCA,iCACA,2CACA,+CACA,0DACA,2DCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DCpCA,+BDgCA,iCACA,oCACA,+CACA,4CACA,oDCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DC/BD,6BDqEC,gDACA,oDEnBD,MACC,kEACA,gEAaA,wKA1CA,WA7B4B,sBAgC3B,UAhC2B,sBA4C5B,uDACA,8CACA,gBACA,oBACA,oBACA,iCACA,oBACA,mBA6BA,sbAMC,0EAMF,qDA/DC,WA5B0B,sBAgG3B,4BApEC,WA5B0B,sBA+BzB,UA/ByB,sBAqG3B,qDAzEC,WAxB0B,oDAsG3B,4BA9EC,WAxB0B,oDA2BzB,UA3ByB,oDA2G3B,0FAnFC,WAvB2B,sBA0B1B,UA1B0B","file":"foundation.min.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ds-foundation",
3
- "version": "2.11.0-dev-UzNK.1",
3
+ "version": "2.12.0",
4
4
  "description": "Mural's design system's Foundation package containing our design language features used across all components",
5
5
  "license": "https://www.mural.co/terms/developer-addendum",
6
6
  "scripts": {
@@ -43,7 +43,7 @@
43
43
  },
44
44
  "lint-staged": {
45
45
  "src/**": "prettier --ignore-unknown --write",
46
- "src/**/*.{css,sass,scss}": "stylelint src/styles/**/*.scss --fix"
46
+ "src/**/*.{css,sass,scss}": "stylelint --fix"
47
47
  },
48
48
  "release": {
49
49
  "extends": [
package/src/styles/contextual-variables/color.scss CHANGED
@@ -6,158 +6,159 @@
6
6
  $mrl-contextual-color-vars: (
7
7
  // --------- Misc --------------
8
8
  // Miscellaneous color tokens
9
- "focus": "blue-70",
10
- "focus-inverse": "white",
11
- "shadows": "black",
12
- "brand": "red-70",
13
- "brand-hover": "red-80",
14
- "brand-active": "red-90",
15
- "accent": "blue-70",
16
- "skeleton": "gray-20",
17
- "skeleton-inverse": "white",
9
+ 'focus': 'blue-70',
10
+ 'focus-inverse': 'white',
11
+ 'shadows': 'black',
12
+ 'brand': 'red-70',
13
+ 'brand-hover': 'red-80',
14
+ 'brand-active': 'red-90',
15
+ 'accent': 'blue-70',
16
+ 'skeleton': 'gray-20',
17
+ 'skeleton-inverse': 'white',
18
18
 
19
19
  // --------- Background --------------
20
- "background": "white",
21
- "background-secondary": "gray-80",
22
- "background-decorative": "gray-20",
23
- "background-highlight-secondary": "blue-10",
20
+ 'background': 'white',
21
+ 'background-secondary': 'gray-80',
22
+ 'background-decorative': 'gray-20',
23
+ 'background-highlight-secondary': 'blue-10',
24
24
 
25
25
  // Status use cases
26
26
  // @TODO - remove private when releasing v2
27
- "background-info": "status-info",
28
- "background-info-light": "status-info-light",
29
- "background-success": "status-success",
30
- "background-success-light": "status-success-light",
31
- "background-warning": "status-warning",
32
- "background-warning-light": "status-warning-light",
33
- "background-error": "status-error",
34
- "background-error-light": "status-error-light",
35
- "background-private": "gray-100",
27
+ 'background-info': 'status-info',
28
+ 'background-info-light': 'status-info-light',
29
+ 'background-success': 'status-success',
30
+ 'background-success-light': 'status-success-light',
31
+ 'background-warning': 'status-warning',
32
+ 'background-warning-light': 'status-warning-light',
33
+ 'background-error': 'status-error',
34
+ 'background-error-light': 'status-error-light',
35
+ 'background-private': 'gray-100',
36
36
 
37
37
  // This is our primary inverse background color
38
38
  // but our status colors also use inverse text colors
39
- "background-inverse": "gray-100",
39
+ 'background-inverse': 'gray-100',
40
40
 
41
41
  // Used only when the background is using "background-inverse"
42
42
  // other colored backgrounds will have a different rule set that's TBD
43
- "background-inverse-hover": "gray-90",
43
+ 'background-inverse-hover': 'gray-90',
44
44
 
45
45
  // Used only when there is a background on the element being disabled
46
- "background-disabled": "gray-40",
46
+ 'background-disabled': 'gray-40',
47
47
 
48
48
  // Used for Highlight
49
- "background-highlight-hover": "gray-20",
50
- "background-highlight-active": "gray-90",
51
- "background-highlight-selected": "gray-90",
49
+ 'background-highlight-hover': 'gray-20',
50
+ 'background-highlight-active': 'gray-90',
51
+ 'background-highlight-selected': 'gray-90',
52
52
 
53
53
  // Use to extend Highlight to add emphasis
54
- "background-highlight-emph-active": "gray-30",
54
+ 'background-highlight-emph-active': 'gray-30',
55
55
 
56
56
  // --------- Line --------------
57
- "line": "gray-70",
58
- "line-hover": "gray-90",
59
- "line-active": "gray-100",
60
- "line-selected": "gray-90",
61
- "line-disabled": "gray-40",
62
- "line-highlight-secondary": "blue-20",
57
+ 'line': 'gray-70',
58
+ 'line-hover': 'gray-90',
59
+ 'line-active': 'gray-100',
60
+ 'line-selected': 'gray-90',
61
+ 'line-disabled': 'gray-40',
62
+ 'line-highlight-secondary': 'blue-20',
63
63
 
64
64
  // Design calls this "Light" but it's semantically used for dividers
65
- "line-divider": "gray-20",
65
+ 'line-divider': 'gray-20',
66
66
  // Design calls this "Dark" but it's semantically used for dividers. This is intended for use on dark or saturated backgrounds
67
- "line-divider-inverse": "gray-80",
67
+ 'line-divider-inverse': 'gray-80',
68
68
 
69
69
  // Used for Base with Emphasis
70
- "line-emph": "gray-20",
71
- "line-emph-hover": "gray-90",
72
- "line-emph-active": "black",
70
+ 'line-emph': 'gray-20',
71
+ 'line-emph-hover': 'gray-90',
72
+ 'line-emph-active': 'black',
73
73
 
74
74
  // Inverse
75
- "line-inverse": "white",
76
- "line-inverse-disabled": "white",
75
+ 'line-inverse': 'white',
76
+ 'line-inverse-disabled': 'white',
77
77
  // @todo active and selected are TBD as Design finishes the inverse-secondary button
78
-
79
78
  // --------- Icons -------------
80
- "icon-light": "gray-70 ",
81
- "icon-disabled": "gray-40",
82
- "icon-inverse": "white",
83
- "input-icon-default": "gray-70",
79
+ 'icon-light': 'gray-70 ',
80
+ 'icon-disabled': 'gray-40',
81
+ 'icon-inverse': 'white',
82
+ 'input-icon-default': 'gray-70',
84
83
 
85
84
  // --------- Text --------------
86
- "text": "gray-80",
87
- "text-hover": "gray-90",
88
- "text-active": "gray-90",
89
- "text-selected": "gray-90",
90
- "text-disabled": "gray-40",
85
+ 'text': 'gray-80',
86
+ 'text-hover': 'gray-90',
87
+ 'text-active': 'gray-90',
88
+ 'text-selected': 'gray-90',
89
+ 'text-disabled': 'gray-40',
91
90
  // Used when the background of the element uses the disabled color
92
- "text-disabled-inverse": "white",
91
+ 'text-disabled-inverse': 'white',
93
92
 
94
93
  // Use for Base with Emphasis
95
- "text-emph": "gray-80",
96
- "text-emph-hover": "gray-90",
97
- "text-emph-active": "black",
94
+ 'text-emph': 'gray-80',
95
+ 'text-emph-hover': 'gray-90',
96
+ 'text-emph-active': 'black',
98
97
 
99
98
  // Use for Highlight
100
- "text-highlight": "gray-80",
101
- "text-highlight-hover": "gray-90",
102
- "text-highlight-active": "white",
103
- "text-highlight-selected": "white",
99
+ 'text-highlight': 'gray-80',
100
+ 'text-highlight-hover': 'gray-90',
101
+ 'text-highlight-active': 'white',
102
+ 'text-highlight-selected': 'white',
104
103
 
105
104
  // Alternative to add emphasis to Highlight
106
- "text-highlight-emph": "gray-90",
107
- "text-highlight-emph-hover": "gray-100",
108
- "text-highlight-emph-active": "black",
109
- "text-highlight-emph-selected": "white",
105
+ 'text-highlight-emph': 'gray-90',
106
+ 'text-highlight-emph-hover': 'gray-100',
107
+ 'text-highlight-emph-active': 'black',
108
+ 'text-highlight-emph-selected': 'white',
110
109
 
111
110
  // Use for Inverse or any saturated background color (e.g. statuses)
112
- "text-inverse": "white",
113
- "text-inverse-secondary": "gray-10",
114
- "text-inverse-hover": "white",
115
- "text-inverse-active": "white",
116
- "text-inverse-selected": "white",
111
+ 'text-inverse': 'white',
112
+ 'text-inverse-secondary': 'gray-10',
113
+ 'text-inverse-hover': 'white',
114
+ 'text-inverse-active': 'white',
115
+ 'text-inverse-selected': 'white',
117
116
 
118
117
  // Static text color options
119
- "text-02": "gray-90",
118
+ 'text-02': 'gray-90',
120
119
  // Also used for placeholders
121
- "text-secondary": "gray-70",
122
- "text-label": "gray-90",
123
- "text-heading": "gray-100",
120
+ 'text-secondary': 'gray-70',
121
+ 'text-label': 'gray-90',
122
+ 'text-heading': 'gray-100',
124
123
 
125
124
  // Status colors
126
125
  // @TODO - remove private with v2
127
- "text-success": "status-success", // For success messages on a white background
128
- "text-warning": "gray-90", // For warning messages on a white background
129
- "text-warning-light": "gray-80",
130
- "text-error": "status-error", // For error messages on a white background
131
- "text-info": "status-info", // For info messages on a white background
132
- "text-private": "gray-100", // For private messages on a white background
133
-
126
+ 'text-success': 'status-success',
127
+ // For success messages on a white background
128
+ 'text-warning': 'gray-90',
129
+ // For warning messages on a white background
130
+ 'text-warning-light': 'gray-80',
131
+ 'text-error': 'status-error',
132
+ // For error messages on a white background
133
+ 'text-info': 'status-info',
134
+ // For info messages on a white background
135
+ 'text-private': 'gray-100',
136
+
137
+ // For private messages on a white background
134
138
  // --------- Icon --------------
135
139
  // Used when there is an icon and you're following the Base with Emphasis style set
136
140
  // for all other states, the icon is the same color as the text
137
- "icon-emph-selected": "gray-100"
141
+ 'icon-emph-selected': 'gray-100'
138
142
  );
139
143
 
140
144
  // These variables are referencing other contextual tokens and should not be wrapped by rgba
141
145
  $mrl-contextual-color-vars-2: (
142
146
  // --------- Background --------------
143
-
144
147
  // Used only when the background is using "background-inverse"
145
148
  // other colored backgrounds will have a different rule set that's TBD
146
- "background-inverse-active": "color-accent",
147
- "background-inverse-selected": "color-accent",
149
+ 'background-inverse-active': 'color-accent',
150
+ 'background-inverse-selected': 'color-accent',
148
151
 
149
152
  // Use to extend Highlight to add emphasis
150
- "background-highlight-emph-selected": "color-accent",
153
+ 'background-highlight-emph-selected': 'color-accent',
151
154
 
152
155
  // --------- Line --------------
153
-
154
156
  // Used for Base with Emphasis
155
- "line-emph-selected": "color-accent",
157
+ 'line-emph-selected': 'color-accent',
156
158
 
157
159
  // --------- Text --------------
158
-
159
160
  // Use for Base with Emphasis
160
- "text-emph-selected": "color-accent"
161
+ 'text-emph-selected': 'color-accent'
161
162
  );
162
163
 
163
164
  :root {
@@ -176,5 +177,5 @@ $mrl-contextual-color-vars-2: (
176
177
 
177
178
  /* Colors with opacity */
178
179
  --mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
179
- --mrl-color-background-inverse-hover-opacity: rgba(var(--mrl-black), 0.2);
180
+ --mrl-color-background-inverse-hover-opacity: var(--mrl-black-opacity-02);
180
181
  }
package/src/styles/global-variables/color.scss CHANGED
@@ -4,198 +4,331 @@
4
4
  ////
5
5
 
6
6
  $mrl-global-color-vars: (
7
- /* Gray */
8
- "gray-10": "249, 250, 250", // #f9fafa
9
- "gray-20": "236, 240, 244", // #ececf4
10
- "gray-30": "220, 225, 229", // #dcdde5
11
- "gray-40": "184, 193, 204", // #b8c1cc
12
- "gray-50": "155, 168, 182", // #9ba8b6
13
- "gray-60": "129, 143, 156", // #81909c
14
- "gray-70": "99, 112, 126", // #63707e
15
- "gray-80": "72, 82, 91", // #48525b
16
- "gray-90": "40, 46, 52", // #282e34
17
- "gray-100": "27, 31, 34", // #1b1f22
18
- /* Blue */
19
- "blue-10": "245, 250, 255", // #f5faff
20
- "blue-20": "230, 244, 254", // #e6f4fe
21
- "blue-30": "205, 230, 254", // #cde6fe
22
- "blue-40": "180, 217, 253", // #b4d9fd
23
- "blue-50": "131, 191, 252", // #83bffc
24
- "blue-60": "81, 143, 251", // #518ffb
25
- "blue-70": "48, 106, 227", // #306AE3
26
- "blue-80": "49, 99, 201", // #3163c9
27
- "blue-90": "42, 86, 176", // #2a56b0
28
- "blue-100": "30, 61, 125", // #1e3d7d
29
- /* Coral */
30
- "coral-10": "255, 230, 239", // #ffe6ef
31
- "coral-20": "254, 204, 223", // #feccdf
32
- "coral-30": "254, 154, 191", // #fe9abf
33
- "coral-40": "253, 103, 160", // #fd67a0
34
- "coral-50": "253, 53, 129", // #fd3581
35
- "coral-60": "255, 0, 102", // #ff0066
36
- "coral-70": "232, 0, 90", // #e8005a
37
- "coral-80": "214, 0, 87", // #d60057
38
- "coral-90": "192, 3, 77", // #c0034d
39
- "coral-100": "163, 0, 63", // #a3003f
40
- /* Red */
41
- "red-10": "255, 235, 235", // #ffebeb
42
- "red-20": "255, 214, 214", // #ffd6d6
43
- "red-30": "255, 204, 204", // #ffcccc
44
- "red-40": "255, 179, 179", // #ffb3b3
45
- "red-50": "255, 128, 128", // #ff8080
46
- "red-60": "255, 75, 75", // #ff4b4b
47
- "red-70": "224, 41, 53", // #e02935
48
- "red-80": "179, 33, 42", // #b3212a
49
- "red-90": "140, 26, 33", // #8c1a21
50
- "red-100": "115, 21, 27", // #73151b
51
- /* Tomato */
52
- "tomato-10": "251, 224, 223", // #fbe0df
53
- "tomato-20": "253, 216, 216", // #fdd8d8
54
- "tomato-30": "246, 193, 194", // #f6c1c2
55
- "tomato-40": "240, 148, 151", // #f09497
56
- "tomato-50": "227, 99, 103", // #e36367
57
- "tomato-60": "224, 72, 77", // #e0484d
58
- "tomato-70": "212, 58, 64", // #d43a40
59
- "tomato-80": "205, 45, 51", // #cd2d33
60
- "tomato-90": "190, 39, 48", // #be2730
61
- "tomato-100": "157, 32, 40", // #9d2028
62
- "tomato-desaturated": "229, 179, 182", // #e5b3b6
63
- /* Orange */
64
- "orange-10": "255, 231, 204", // #ffe7cc
65
- "orange-20": "254, 226, 194", // #fee2c2
66
- "orange-30": "252, 218, 192", // #fce0c0
67
- "orange-40": "245, 199, 146", // #f5c792
68
- "orange-50": "244, 158, 72", // #f49e48
69
- "orange-60": "229, 121, 26", // #e5791a
70
- "orange-70": "201, 79, 19", // #c94f13
71
- "orange-80": "191, 76, 18", // #bf4c12
72
- "orange-90": "178, 68, 1", // #b24401
73
- "orange-100": "147, 57, 1", // #933901
74
- "orange-desaturated": "235, 186, 142", // #ebba8e
75
- /* Lemon */
76
- "lemon-10": "250, 241, 193", // #faf1c1
77
- "lemon-20": "249, 240, 190", // #f9f0be
78
- "lemon-30": "249, 237, 174", // #f9edae
79
- "lemon-40": "245, 226, 127", // #f5e27f
80
- "lemon-50": "228, 203, 73", // #e4cb49
81
- "lemon-60": "182, 158, 35", // #b69e23
82
- "lemon-70": "142, 116, 23", // #8e7417
83
- "lemon-80": "132, 108, 21", // #846c15
84
- "lemon-90": "122, 99, 16", // #7a6310
85
- "lemon-100": "104, 84, 13", // #68540d
86
- "lemon-desaturated": "228, 215, 149", // #e4d795
87
- /* Melon */
88
- "melon-10": "227, 248, 216", // #e3f8d8
89
- "melon-20": "214, 237, 202", // #d6edca
90
- "melon-30": "190, 226, 171", // #bee2ab
91
- "melon-40": "161, 214, 135", // #a1d687
92
- "melon-50": "122, 185, 91", // #7ab95b
93
- "melon-60": "93, 160, 59", // #5da03b
94
- "melon-70": "75, 132, 46", // #4b842e
95
- "melon-80": "69, 121, 42", // #45792a
96
- "melon-90": "71, 114, 49", // #477231
97
- "melon-100": "60, 96, 41", // #3c6029
98
- "melon-desaturated": "169, 208, 178", // #a9d0b2
99
- /* Mint */
100
- "mint-10": "220, 242, 249", // #dcf2f9
101
- "mint-20": "207, 234, 242", // #cfeaf2
102
- "mint-30": "177, 217, 231", // #b1d9e7
103
- "mint-40": "138, 199, 219", // #8ac7db
104
- "mint-50": "89, 181, 212", // #59b5d4
105
- "mint-60": "36, 150, 188", // #2496bc
106
- "mint-70": "9, 126, 165", // #097ea5
107
- "mint-80": "8, 118, 155", // #08769b
108
- "mint-90": "1, 114, 152", // #017298
109
- "mint-100": "1, 99, 132", // #016384
110
- "mint-desaturated": "162, 203, 216", // #a2cbd8
111
- /* Blueberry */
112
- "blueberry-10": "215, 228, 255", // #d7e4ff
113
- "blueberry-20": "202, 219, 252", // #cadbfc
114
- "blueberry-30": "187, 209, 251", // #bbd1fb
115
- "blueberry-40": "139, 175, 249", // #8baff9
116
- "blueberry-50": "105, 146, 226", // #6992e2
117
- "blueberry-60": "91, 131, 210", // #5b83d2
118
- "blueberry-70": "64, 110, 203", // #406ecb
119
- "blueberry-80": "32, 89, 202", // #2059ca
120
- "blueberry-90": "28, 77, 175", // #1c4daf
121
- "blueberry-100": "24, 66, 149", // #184295
122
- "blueberry-desaturated": "173, 199, 224", // #adc7e0
123
- /* Grape */
124
- "grape-10": "222, 220, 249", // #dedcf9
125
- "grape-20": "216, 216, 249", // #d8d8f9
126
- "grape-30": "207, 207, 247", // #cfcff7
127
- "grape-40": "162, 163, 240", // #a2a3f0
128
- "grape-50": "142, 129, 228", // #8e81e4
129
- "grape-60": "132, 108, 224", // #846ce0
130
- "grape-70": "114, 86, 219", // #7256db
131
- "grape-80": "94, 62, 214", // #5e3ed6
132
- "grape-90": "74, 58, 182", // #4a3ab6
133
- "grape-100": "63, 49, 155", // #3f319b
134
- "grape-desaturated": "189, 187, 221", // #bdbbdd
135
- /* Dragonfruit */
136
- "dragonfruit-10": "255, 225, 243", // #ffe1f3
137
- "dragonfruit-20": "246, 213, 243", // #f6d5f3
138
- "dragonfruit-30": "230, 188, 226", // #e6bce2
139
- "dragonfruit-40": "216, 151, 209", // #d897d1
140
- "dragonfruit-50": "202, 114, 193", // #ca72c1
141
- "dragonfruit-60": "196, 100, 186", // #c464ba
142
- "dragonfruit-70": "186, 74, 171", // #ba4aab
143
- "dragonfruit-80": "175, 75, 168", // #af4ba8
144
- "dragonfruit-90": "163, 67, 157", // #a3439d
145
- "dragonfruit-100": "141, 58, 136", // #8d3a88
146
- "dragonfruit-desaturated": "232, 201, 221", // #e8c9dd
147
- /* Truffle */
148
- "truffle-10": "236, 239, 238", // #ecefee
149
- "truffle-20": "219, 225, 223", // #dbe1df
150
- "truffle-30": "197, 206, 203", // #c5cecb
151
- "truffle-40": "170, 182, 178", // #aab6b2
152
- "truffle-50": "131, 149, 144", // #839590
153
- "truffle-60": "108, 127, 121", // #6c7f79
154
- "truffle-70": "96, 113, 108", // #60716c
155
- "truffle-80": "80, 98, 93", // #50625d
156
- "truffle-90": "70, 83, 79", // #46534f
157
- "truffle-100": "56, 66, 63", // #38423f
158
- "truffle-desaturated": "196, 202, 200", // #c4cac8
159
- /* Pure colors */
160
- "white": "255, 255, 255", // #ffffff
161
- "black": "0, 0, 0", // #000000
162
- /* Status colors */
163
- "status-info": "49, 99, 201", // #3163c9
164
- "status-info-light": "236, 242, 254", // #ecf2fe
165
- "status-success": "0, 132, 63", // #00843f
166
- "status-success-light": "243, 250, 235", // #f3faeb
167
- "status-warning": "255, 170, 1", // #ffaa01
168
- "status-warning-light": "254, 246, 231", // #fef6e7
169
- "status-error": "179, 33, 42", // #b3212a
170
- "status-error-light": "252, 233, 235" // #fce9eb
7
+ /* Gray */ 'gray-10': '249, 250, 250',
8
+ // #f9fafa
9
+ 'gray-20': '236, 240, 244',
10
+ // #ececf4
11
+ 'gray-30': '220, 225, 229',
12
+ // #dcdde5
13
+ 'gray-40': '184, 193, 204',
14
+ // #b8c1cc
15
+ 'gray-50': '155, 168, 182',
16
+ // #9ba8b6
17
+ 'gray-60': '129, 143, 156',
18
+ // #81909c
19
+ 'gray-70': '99, 112, 126',
20
+ // #63707e
21
+ 'gray-80': '72, 82, 91',
22
+ // #48525b
23
+ 'gray-90': '40, 46, 52',
24
+ // #282e34
25
+ 'gray-100': '27, 31, 34',
26
+ // #1b1f22
27
+ /* Blue */ 'blue-10': '245, 250, 255',
28
+ // #f5faff
29
+ 'blue-20': '230, 244, 254',
30
+ // #e6f4fe
31
+ 'blue-30': '205, 230, 254',
32
+ // #cde6fe
33
+ 'blue-40': '180, 217, 253',
34
+ // #b4d9fd
35
+ 'blue-50': '131, 191, 252',
36
+ // #83bffc
37
+ 'blue-60': '81, 143, 251',
38
+ // #518ffb
39
+ 'blue-70': '48, 106, 227',
40
+ // #306AE3
41
+ 'blue-80': '49, 99, 201',
42
+ // #3163c9
43
+ 'blue-90': '42, 86, 176',
44
+ // #2a56b0
45
+ 'blue-100': '30, 61, 125',
46
+ // #1e3d7d
47
+ /* Coral */ 'coral-10': '255, 230, 239',
48
+ // #ffe6ef
49
+ 'coral-20': '254, 204, 223',
50
+ // #feccdf
51
+ 'coral-30': '254, 154, 191',
52
+ // #fe9abf
53
+ 'coral-40': '253, 103, 160',
54
+ // #fd67a0
55
+ 'coral-50': '253, 53, 129',
56
+ // #fd3581
57
+ 'coral-60': '255, 0, 102',
58
+ // #ff0066
59
+ 'coral-70': '232, 0, 90',
60
+ // #e8005a
61
+ 'coral-80': '214, 0, 87',
62
+ // #d60057
63
+ 'coral-90': '192, 3, 77',
64
+ // #c0034d
65
+ 'coral-100': '163, 0, 63',
66
+ // #a3003f
67
+ /* Red */ 'red-10': '255, 235, 235',
68
+ // #ffebeb
69
+ 'red-20': '255, 214, 214',
70
+ // #ffd6d6
71
+ 'red-30': '255, 204, 204',
72
+ // #ffcccc
73
+ 'red-40': '255, 179, 179',
74
+ // #ffb3b3
75
+ 'red-50': '255, 128, 128',
76
+ // #ff8080
77
+ 'red-60': '255, 75, 75',
78
+ // #ff4b4b
79
+ 'red-70': '224, 41, 53',
80
+ // #e02935
81
+ 'red-80': '179, 33, 42',
82
+ // #b3212a
83
+ 'red-90': '140, 26, 33',
84
+ // #8c1a21
85
+ 'red-100': '115, 21, 27',
86
+ // #73151b
87
+ /* Tomato */ 'tomato-10': '251, 224, 223',
88
+ // #fbe0df
89
+ 'tomato-20': '253, 216, 216',
90
+ // #fdd8d8
91
+ 'tomato-30': '246, 193, 194',
92
+ // #f6c1c2
93
+ 'tomato-40': '240, 148, 151',
94
+ // #f09497
95
+ 'tomato-50': '227, 99, 103',
96
+ // #e36367
97
+ 'tomato-60': '224, 72, 77',
98
+ // #e0484d
99
+ 'tomato-70': '212, 58, 64',
100
+ // #d43a40
101
+ 'tomato-80': '205, 45, 51',
102
+ // #cd2d33
103
+ 'tomato-90': '190, 39, 48',
104
+ // #be2730
105
+ 'tomato-100': '157, 32, 40',
106
+ // #9d2028
107
+ 'tomato-desaturated': '229, 179, 182',
108
+ // #e5b3b6
109
+ /* Orange */ 'orange-10': '255, 231, 204',
110
+ // #ffe7cc
111
+ 'orange-20': '254, 226, 194',
112
+ // #fee2c2
113
+ 'orange-30': '252, 218, 192',
114
+ // #fce0c0
115
+ 'orange-40': '245, 199, 146',
116
+ // #f5c792
117
+ 'orange-50': '244, 158, 72',
118
+ // #f49e48
119
+ 'orange-60': '229, 121, 26',
120
+ // #e5791a
121
+ 'orange-70': '201, 79, 19',
122
+ // #c94f13
123
+ 'orange-80': '191, 76, 18',
124
+ // #bf4c12
125
+ 'orange-90': '178, 68, 1',
126
+ // #b24401
127
+ 'orange-100': '147, 57, 1',
128
+ // #933901
129
+ 'orange-desaturated': '235, 186, 142',
130
+ // #ebba8e
131
+ /* Lemon */ 'lemon-10': '250, 241, 193',
132
+ // #faf1c1
133
+ 'lemon-20': '249, 240, 190',
134
+ // #f9f0be
135
+ 'lemon-30': '249, 237, 174',
136
+ // #f9edae
137
+ 'lemon-40': '245, 226, 127',
138
+ // #f5e27f
139
+ 'lemon-50': '228, 203, 73',
140
+ // #e4cb49
141
+ 'lemon-60': '182, 158, 35',
142
+ // #b69e23
143
+ 'lemon-70': '142, 116, 23',
144
+ // #8e7417
145
+ 'lemon-80': '132, 108, 21',
146
+ // #846c15
147
+ 'lemon-90': '122, 99, 16',
148
+ // #7a6310
149
+ 'lemon-100': '104, 84, 13',
150
+ // #68540d
151
+ 'lemon-desaturated': '228, 215, 149',
152
+ // #e4d795
153
+ /* Melon */ 'melon-10': '227, 248, 216',
154
+ // #e3f8d8
155
+ 'melon-20': '214, 237, 202',
156
+ // #d6edca
157
+ 'melon-30': '190, 226, 171',
158
+ // #bee2ab
159
+ 'melon-40': '161, 214, 135',
160
+ // #a1d687
161
+ 'melon-50': '122, 185, 91',
162
+ // #7ab95b
163
+ 'melon-60': '93, 160, 59',
164
+ // #5da03b
165
+ 'melon-70': '75, 132, 46',
166
+ // #4b842e
167
+ 'melon-80': '69, 121, 42',
168
+ // #45792a
169
+ 'melon-90': '71, 114, 49',
170
+ // #477231
171
+ 'melon-100': '60, 96, 41',
172
+ // #3c6029
173
+ 'melon-desaturated': '169, 208, 178',
174
+ // #a9d0b2
175
+ /* Mint */ 'mint-10': '220, 242, 249',
176
+ // #dcf2f9
177
+ 'mint-20': '207, 234, 242',
178
+ // #cfeaf2
179
+ 'mint-30': '177, 217, 231',
180
+ // #b1d9e7
181
+ 'mint-40': '138, 199, 219',
182
+ // #8ac7db
183
+ 'mint-50': '89, 181, 212',
184
+ // #59b5d4
185
+ 'mint-60': '36, 150, 188',
186
+ // #2496bc
187
+ 'mint-70': '9, 126, 165',
188
+ // #097ea5
189
+ 'mint-80': '8, 118, 155',
190
+ // #08769b
191
+ 'mint-90': '1, 114, 152',
192
+ // #017298
193
+ 'mint-100': '1, 99, 132',
194
+ // #016384
195
+ 'mint-desaturated': '162, 203, 216',
196
+ // #a2cbd8
197
+ /* Blueberry */ 'blueberry-10': '215, 228, 255',
198
+ // #d7e4ff
199
+ 'blueberry-20': '202, 219, 252',
200
+ // #cadbfc
201
+ 'blueberry-30': '187, 209, 251',
202
+ // #bbd1fb
203
+ 'blueberry-40': '139, 175, 249',
204
+ // #8baff9
205
+ 'blueberry-50': '105, 146, 226',
206
+ // #6992e2
207
+ 'blueberry-60': '91, 131, 210',
208
+ // #5b83d2
209
+ 'blueberry-70': '64, 110, 203',
210
+ // #406ecb
211
+ 'blueberry-80': '32, 89, 202',
212
+ // #2059ca
213
+ 'blueberry-90': '28, 77, 175',
214
+ // #1c4daf
215
+ 'blueberry-100': '24, 66, 149',
216
+ // #184295
217
+ 'blueberry-desaturated': '173, 199, 224',
218
+ // #adc7e0
219
+ /* Grape */ 'grape-10': '222, 220, 249',
220
+ // #dedcf9
221
+ 'grape-20': '216, 216, 249',
222
+ // #d8d8f9
223
+ 'grape-30': '207, 207, 247',
224
+ // #cfcff7
225
+ 'grape-40': '162, 163, 240',
226
+ // #a2a3f0
227
+ 'grape-50': '142, 129, 228',
228
+ // #8e81e4
229
+ 'grape-60': '132, 108, 224',
230
+ // #846ce0
231
+ 'grape-70': '114, 86, 219',
232
+ // #7256db
233
+ 'grape-80': '94, 62, 214',
234
+ // #5e3ed6
235
+ 'grape-90': '74, 58, 182',
236
+ // #4a3ab6
237
+ 'grape-100': '63, 49, 155',
238
+ // #3f319b
239
+ 'grape-desaturated': '189, 187, 221',
240
+ // #bdbbdd
241
+ /* Dragonfruit */ 'dragonfruit-10': '255, 225, 243',
242
+ // #ffe1f3
243
+ 'dragonfruit-20': '246, 213, 243',
244
+ // #f6d5f3
245
+ 'dragonfruit-30': '230, 188, 226',
246
+ // #e6bce2
247
+ 'dragonfruit-40': '216, 151, 209',
248
+ // #d897d1
249
+ 'dragonfruit-50': '202, 114, 193',
250
+ // #ca72c1
251
+ 'dragonfruit-60': '196, 100, 186',
252
+ // #c464ba
253
+ 'dragonfruit-70': '186, 74, 171',
254
+ // #ba4aab
255
+ 'dragonfruit-80': '175, 75, 168',
256
+ // #af4ba8
257
+ 'dragonfruit-90': '163, 67, 157',
258
+ // #a3439d
259
+ 'dragonfruit-100': '141, 58, 136',
260
+ // #8d3a88
261
+ 'dragonfruit-desaturated': '232, 201, 221',
262
+ // #e8c9dd
263
+ /* Truffle */ 'truffle-10': '236, 239, 238',
264
+ // #ecefee
265
+ 'truffle-20': '219, 225, 223',
266
+ // #dbe1df
267
+ 'truffle-30': '197, 206, 203',
268
+ // #c5cecb
269
+ 'truffle-40': '170, 182, 178',
270
+ // #aab6b2
271
+ 'truffle-50': '131, 149, 144',
272
+ // #839590
273
+ 'truffle-60': '108, 127, 121',
274
+ // #6c7f79
275
+ 'truffle-70': '96, 113, 108',
276
+ // #60716c
277
+ 'truffle-80': '80, 98, 93',
278
+ // #50625d
279
+ 'truffle-90': '70, 83, 79',
280
+ // #46534f
281
+ 'truffle-100': '56, 66, 63',
282
+ // #38423f
283
+ 'truffle-desaturated': '196, 202, 200',
284
+ // #c4cac8
285
+ /* Pure colors */ 'white': '255, 255, 255',
286
+ // #ffffff
287
+ 'black': '0, 0, 0',
288
+ // #000000
289
+ /* Status colors */ 'status-info': '49, 99, 201',
290
+ // #3163c9
291
+ 'status-info-light': '236, 242, 254',
292
+ // #ecf2fe
293
+ 'status-success': '0, 132, 63',
294
+ // #00843f
295
+ 'status-success-light': '243, 250, 235',
296
+ // #f3faeb
297
+ 'status-warning': '255, 170, 1',
298
+ // #ffaa01
299
+ 'status-warning-light': '254, 246, 231',
300
+ // #fef6e7
301
+ 'status-error': '179, 33, 42',
302
+ // #b3212a
303
+ 'status-error-light': '252, 233, 235' // #fce9eb
171
304
  );
172
305
  $mrl-global-colors-opacity: (
173
- "white": (
174
- "02": ".24",
175
- "03": ".30",
176
- "04": ".40",
177
- "06": ".60",
178
- "08": ".80"
179
- )
306
+ 'white': (
307
+ '02': '.24',
308
+ '03': '.30',
309
+ '04': '.40',
310
+ '06': '.60',
311
+ '08': '.80'
312
+ )
180
313
  );
181
314
 
182
315
  :root {
183
- @each $token-name, $token-value in $mrl-global-color-vars {
184
- --mrl-#{$token-name}: #{$token-value};
185
- }
316
+ @each $token-name, $token-value in $mrl-global-color-vars {
317
+ --mrl-#{$token-name}: #{$token-value};
318
+ }
186
319
 
187
- @each $color-name, $opacity-map in $mrl-global-colors-opacity {
188
- @each $token-name, $token-value in $opacity-map {
189
- --mrl-#{$color-name}-opacity-#{$token-name}: rgba(var(--mrl-#{$color-name}), #{$token-value});
190
- }
191
- }
320
+ @each $color-name, $opacity-map in $mrl-global-colors-opacity {
321
+ @each $token-name, $token-value in $opacity-map {
322
+ --mrl-#{$color-name}-opacity-#{$token-name}: rgba(var(--mrl-#{$color-name}), #{$token-value});
323
+ }
324
+ }
192
325
 
193
- --mrl-status-private: var(--mrl-gray-100); // #1f1f1f - @TODO - remove when releasing v2
194
- --mrl-black-opacity-00: rgba(42, 82, 121, 0.04); // #2a5279
195
- --mrl-black-opacity-01: rgba(42, 82, 121, 0.12); // #2a5279
196
- --mrl-black-opacity-02: rgba(21, 57, 75, 0.24); // #15394b
197
- --mrl-black-opacity-03: rgba(11, 41, 70, 0.32); // #0b2946
198
- --mrl-black-opacity-05: rgba(37, 61, 86, 0.56); // #253d56
199
- --mrl-black-opacity-06: rgba(21, 41, 60, 0.64); // #15293c
200
- --mrl-black-opacity-08: rgba(24, 36, 47, 0.8); // #18242f
326
+ --mrl-status-private: var(--mrl-gray-100); // #1f1f1f - @TODO - remove when releasing v2
327
+ --mrl-black-opacity-00: rgba(42, 82, 121, 0.06); // #2a5279
328
+ --mrl-black-opacity-01: rgba(42, 82, 121, 0.12); // #2a5279
329
+ --mrl-black-opacity-02: rgba(21, 57, 75, 0.24); // #15394b
330
+ --mrl-black-opacity-03: rgba(11, 41, 70, 0.32); // #0b2946
331
+ --mrl-black-opacity-05: rgba(31, 51, 71, 0.56); // #1f3347
332
+ --mrl-black-opacity-06: rgba(21, 41, 60, 0.64); // #15293c
333
+ --mrl-black-opacity-08: rgba(24, 36, 47, 0.8); // #18242f
201
334
  }
package/src/styles/global-variables/shadows.scss CHANGED
@@ -12,13 +12,11 @@
12
12
 
13
13
  /* Shadow/Elevation Tokens */
14
14
  $mrl-global-shadow-vars: (
15
- /* Base */
16
- "01": "0 0 1px 0 rgba(var(--mrl-black), 0.32),0 4px 4px 0 rgba(var(--mrl-black), 0.04)",
17
- "02": "0 0 1px 0 rgba(var(--mrl-black), 0.32),0 6px 8px 0 rgba(var(--mrl-black), 0.04)",
18
- "03": "0 0 1px 0 rgba(var(--mrl-black), 0.32),0 24px 20px 0 rgba(var(--mrl-black), 0.04)",
19
- /* Interactive */
20
- "interactive-01": "0 4px 5px 0 rgba(var(--mrl-black), 0.08)",
21
- "interactive-02": "0 12px 20px 0px rgba(var(--mrl-black), 0.20)"
15
+ /* Base */ '01': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 4px 4px 0 rgba(42, 82, 121, 0.04)',
16
+ '02': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 6px 8px 0 rgba(42, 82, 121, 0.04)',
17
+ '03': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 24px 20px 0 rgba(42, 82, 121, 0.08)',
18
+ /* Interactive */ 'interactive-01': '0 4px 5px 0 rgba(24, 36, 47, 0.08)',
19
+ 'interactive-02': '0 12px 20px 0px rgba(27, 57, 75, 0.20)'
22
20
  );
23
21
 
24
22
  :root {