@crowdstrike/glide-core 0.22.0 → 0.24.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 (53) hide show
  1. package/dist/accordion.styles.js +22 -21
  2. package/dist/button-group.button.styles.js +46 -22
  3. package/dist/button-group.styles.js +7 -7
  4. package/dist/button.d.ts +3 -0
  5. package/dist/button.js +1 -1
  6. package/dist/button.styles.js +62 -42
  7. package/dist/checkbox-group.js +6 -5
  8. package/dist/checkbox-group.styles.js +5 -5
  9. package/dist/checkbox.d.ts +10 -2
  10. package/dist/checkbox.js +23 -17
  11. package/dist/checkbox.styles.js +46 -28
  12. package/dist/drawer.styles.js +6 -4
  13. package/dist/dropdown.d.ts +1 -1
  14. package/dist/dropdown.js +20 -18
  15. package/dist/dropdown.option.js +1 -1
  16. package/dist/dropdown.option.styles.js +26 -28
  17. package/dist/dropdown.styles.js +64 -58
  18. package/dist/icon-button.styles.js +44 -23
  19. package/dist/inline-alert.js +1 -1
  20. package/dist/inline-alert.styles.js +24 -21
  21. package/dist/input.styles.js +33 -25
  22. package/dist/label.styles.js +22 -27
  23. package/dist/menu.button.styles.js +6 -4
  24. package/dist/menu.js +1 -1
  25. package/dist/menu.link.styles.js +6 -4
  26. package/dist/menu.options.styles.js +12 -16
  27. package/dist/menu.styles.js +9 -6
  28. package/dist/modal.styles.js +16 -13
  29. package/dist/popover.js +1 -1
  30. package/dist/popover.styles.js +14 -14
  31. package/dist/radio-group.js +15 -15
  32. package/dist/radio-group.radio.d.ts +2 -1
  33. package/dist/radio-group.radio.js +1 -1
  34. package/dist/radio-group.radio.styles.js +31 -11
  35. package/dist/radio-group.styles.js +8 -10
  36. package/dist/split-button.primary-button.styles.js +41 -26
  37. package/dist/split-button.secondary-button.styles.js +61 -21
  38. package/dist/styles/focus-outline.js +1 -1
  39. package/dist/styles/variables.css +1 -1
  40. package/dist/tab.group.styles.js +6 -5
  41. package/dist/tab.panel.styles.js +1 -1
  42. package/dist/tab.styles.js +8 -7
  43. package/dist/tag.styles.js +27 -26
  44. package/dist/textarea.styles.js +22 -18
  45. package/dist/toasts.styles.js +2 -2
  46. package/dist/toasts.toast.styles.js +20 -20
  47. package/dist/toggle.styles.js +15 -7
  48. package/dist/tooltip.container.styles.js +14 -13
  49. package/dist/tooltip.js +1 -1
  50. package/dist/tooltip.styles.js +1 -1
  51. package/package.json +8 -9
  52. package/dist/library/get-parent-class-name.d.ts +0 -3
  53. package/dist/library/get-parent-class-name.js +0 -1
package/dist/split-button.secondary-button.styles.js CHANGED
@@ -3,20 +3,27 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
3
3
  `,css`
4
4
  .component {
5
5
  align-items: center;
6
- background-color: var(--glide-core-surface-page);
7
- border-color: var(--glide-core-border-primary);
8
- border-radius: 0 0.75rem 0.75rem 0;
6
+ background-color: var(
7
+ --glide-core-color-interactive-surface-container-active
8
+ );
9
+ border-color: var(
10
+ --glide-core-color-interactive-surface-container-active
11
+ );
12
+ border-inline-start-color: var(
13
+ --glide-core-private-color-button-stroke-default
14
+ );
15
+ border-radius: 0 var(--glide-core-rounding-base-radius-md)
16
+ var(--glide-core-rounding-base-radius-md) 0;
9
17
  border-style: solid;
10
18
  border-width: 1px;
11
19
  cursor: pointer;
12
20
  display: inline-flex;
13
- font-family: var(--glide-core-heading-xxs-font-family);
14
- font-style: var(--glide-core-heading-xxs-font-style);
15
- font-weight: var(--glide-core-heading-xxs-font-weight);
21
+ font-family: var(--glide-core-typography-family-primary);
22
+ font-weight: var(--glide-core-typography-weight-bold);
16
23
  gap: 0.625rem;
17
24
  justify-content: center;
18
- padding-block: var(--glide-core-spacing-xs);
19
- padding-inline: var(--glide-core-spacing-xs);
25
+ padding-block: var(--glide-core-spacing-base-xs);
26
+ padding-inline: var(--glide-core-spacing-base-xs);
20
27
  position: relative;
21
28
  text-decoration: none;
22
29
  transition-duration: 150ms;
@@ -25,14 +32,18 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
25
32
  user-select: none;
26
33
 
27
34
  &:disabled {
28
- background-color: var(--glide-core-surface-disabled);
35
+ background-color: var(
36
+ --glide-core-color-interactive-surface-container--disabled
37
+ );
29
38
  border-block-color: transparent;
30
39
  border-inline-end-color: transparent;
31
- border-inline-start-color: var(--glide-core-border-base-light);
40
+ border-inline-start-color: var(
41
+ --glide-core-color-static-stroke-secondary
42
+ );
32
43
  cursor: not-allowed;
33
44
 
34
45
  svg {
35
- color: var(--glide-core-text-tertiary-disabled);
46
+ color: var(--glide-core-color-interactive-icon-link--disabled);
36
47
  }
37
48
  }
38
49
 
@@ -41,24 +52,47 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
41
52
  }
42
53
 
43
54
  &:focus-visible {
44
- box-shadow: 0 0 0 1px var(--glide-core-surface-page);
55
+ box-shadow: 0 0 0 1px
56
+ var(--glide-core-color-interactive-surface-container);
45
57
 
46
58
  /* So the box shadow isn't covered up by its primary button. */
47
59
  z-index: 1;
60
+
61
+ svg {
62
+ color: var(--glide-core-color-interactive-icon-link);
63
+ }
48
64
  }
49
65
 
50
66
  &.primary {
51
- color: var(--glide-core-text-selected);
67
+ color: var(--glide-core-color-interactive-text-onsolid);
52
68
  }
53
69
 
54
70
  &.secondary {
55
- color: var(--glide-core-text-primary);
71
+ background-color: var(--glide-core-color-interactive-surface-container);
72
+ border: 1px solid var(--glide-core-private-color-button-stroke-default);
73
+ color: var(--glide-core-color-interactive-text-link);
74
+
75
+ svg {
76
+ color: var(--glide-core-color-interactive-icon-active);
77
+ }
78
+
79
+ &.disabled {
80
+ background-color: var(
81
+ --glide-core-color-interactive-surface-container--disabled
82
+ );
83
+ border: 1px solid
84
+ var(--glide-core-color-interactive-stroke-primary--disabled);
85
+
86
+ svg {
87
+ color: var(--glide-core-color-interactive-icon-link--disabled);
88
+ }
89
+ }
56
90
  }
57
91
 
58
92
  &.small {
59
93
  block-size: 1.75rem;
60
94
  box-sizing: border-box;
61
- font-size: var(--glide-core-body-xs-font-size);
95
+ font-size: var(--glide-core-typography-size-body-small);
62
96
  line-height: 1rem;
63
97
  min-inline-size: fit-content;
64
98
  }
@@ -71,9 +105,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
71
105
  }
72
106
 
73
107
  &:not(:disabled):is(:active, .active) {
74
- background-color: var(--glide-core-surface-selected-hover);
108
+ background-color: var(--glide-core-private-color-button-surface-active);
75
109
  border-color: transparent;
76
- color: var(--glide-core-text-selected);
110
+ color: var(--glide-core-private-color-button-text-primary);
77
111
 
78
112
  svg {
79
113
  color: var(--glide-core-icon-selected);
@@ -81,20 +115,26 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
81
115
  }
82
116
 
83
117
  &:not(:active, .active, :disabled):is(:focus, :hover) {
84
- background-color: var(--glide-core-surface-hover);
118
+ background-color: var(
119
+ --glide-core-color-interactive-surface-container--hover
120
+ );
85
121
  border-color: transparent;
86
- color: var(--glide-core-text-primary);
122
+ color: var(--glide-core-color-interactive-icon-link);
87
123
  }
88
124
 
89
125
  &:not(:active, .active, :disabled):is(:hover) {
90
- box-shadow: var(--glide-core-glow-sm);
126
+ box-shadow: var(--glide-core-effect-hovered);
91
127
 
92
128
  /* So the box shadow isn't covered up by its primary button. */
93
129
  z-index: 1;
130
+
131
+ svg {
132
+ color: var(--glide-core-color-interactive-icon-link);
133
+ }
94
134
  }
95
135
 
96
136
  svg {
97
- color: var(--glide-core-icon-primary);
137
+ color: var(--glide-core-private-color-button-icon-primary);
98
138
  }
99
139
  }
100
140
  `];
package/dist/styles/focus-outline.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import{css,unsafeCSS}from"lit";export default e=>css`
2
2
  /* stylelint-disable selector-type-case, selector-type-no-unknown */
3
3
  ${unsafeCSS(e)} {
4
- outline: 2px solid var(--glide-core-border-focus) !important;
4
+ outline: 2px solid var(--glide-core-color-interactive-stroke-focus) !important;
5
5
  outline-offset: 1px;
6
6
  }
7
7
  `;
package/dist/styles/variables.css CHANGED
@@ -1 +1 @@
1
- :root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-radius-zero: 0rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-sm: .0625rem;--glide-core-border-width-zero: 0rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #5183df;--glide-core-data-viz-cyan-cyan: #299ed1;--glide-core-data-viz-gold-gold: #cc8519;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #f0f0f0;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #6563d9;--glide-core-data-viz-lilac-lilac: #ce66e5;--glide-core-data-viz-magenta-magenta: #f9338b;--glide-core-data-viz-moss-moss: #959328;--glide-core-data-viz-olive-olive: #7f994d;--glide-core-data-viz-red-red: #db2d24;--glide-core-data-viz-rose-rose: #ea5da3;--glide-core-data-viz-teal-teal: #39a288;--glide-core-data-viz-turquoise-turqoise: #339da3;--glide-core-data-viz-violet-violet: #af52de;--glide-core-effects-shadow-footer-background-blur: 1rem;--glide-core-effects-shadow-footer-blur: .5rem;--glide-core-effects-shadow-footer-fill: #b5b5b540;--glide-core-effects-shadow-footer-spread: -.5rem;--glide-core-effects-shadow-footer-x: 0rem;--glide-core-effects-shadow-footer-y: -.5rem;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .875rem;--glide-core-effects-shadow-large-fill: #00000040;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .25rem;--glide-core-effects-shadow-nav-background-blur: 6.25rem;--glide-core-effects-shadow-nav-blur: .25rem;--glide-core-effects-shadow-nav-fill: #00000040;--glide-core-effects-shadow-nav-spread: 0rem;--glide-core-effects-shadow-nav-x: 0rem;--glide-core-effects-shadow-nav-y: .25rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #b5b5b540;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #ffffff59;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 6.25rem;--glide-core-effects-shadow-xlarge-blur: 3.75rem;--glide-core-effects-shadow-xlarge-fill: #adadad;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-empty-state: #db2d24;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #6d6d6d;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #00000000;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #0000000d;--glide-core-surface-base-gray-lightest: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-empty-state: #ff3b3014;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #d7e7ff;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-aliases: #095341;--glide-core-text-syntax-fields: #7c1faa;--glide-core-text-syntax-formatting: #212121;--glide-core-text-syntax-function: #ff2893;--glide-core-text-syntax-literals: #794d0c;--glide-core-text-syntax-object: #c8095e;--glide-core-text-syntax-operator: #1b51b5;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #3989da;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #585858;--glide-core-border-base-dark: #8a8a8a;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #424242;--glide-core-border-base-lighter: #424242;--glide-core-border-base-lightest: #c9c9c9;--glide-core-border-base-transparent: #ffffff1a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #3989da;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #424242;--glide-core-border-primary-hover: #3989da;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #6e8ec4;--glide-core-data-viz-cyan-cyan: #4b98b9;--glide-core-data-viz-gold-gold: #b98d4b;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #000000e5;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #7574e5;--glide-core-data-viz-lilac-lilac: #b37cc5;--glide-core-data-viz-magenta-magenta: #c2678f;--glide-core-data-viz-moss-moss: #949151;--glide-core-data-viz-olive-olive: #7a845c;--glide-core-data-viz-red-red: #db4743;--glide-core-data-viz-rose-rose: #be7e9f;--glide-core-data-viz-teal-teal: #5c9d8c;--glide-core-data-viz-turquoise-turqoise: #639d9f;--glide-core-data-viz-violet-violet: #a66dc3;--glide-core-effects-shadow-footer-background-blur: 1rem;--glide-core-effects-shadow-footer-blur: .5rem;--glide-core-effects-shadow-footer-fill: #b5b5b540;--glide-core-effects-shadow-footer-spread: -.5rem;--glide-core-effects-shadow-footer-x: 0rem;--glide-core-effects-shadow-footer-y: -.5rem;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .75rem;--glide-core-effects-shadow-large-fill: #00000080;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .125rem;--glide-core-effects-shadow-nav-background-blur: 6.25rem;--glide-core-effects-shadow-nav-blur: .25rem;--glide-core-effects-shadow-nav-fill: #00000040;--glide-core-effects-shadow-nav-spread: 0rem;--glide-core-effects-shadow-nav-x: 0rem;--glide-core-effects-shadow-nav-y: .25rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #00000040;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #0000000d;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 0rem;--glide-core-effects-shadow-xlarge-blur: 4rem;--glide-core-effects-shadow-xlarge-fill: #000000f7;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #3989da;--glide-core-icon-default: #f0f0f0;--glide-core-icon-default2: #8a8a8a;--glide-core-icon-display: #f0f0f0;--glide-core-icon-display-light: #8a8a8a;--glide-core-icon-empty-state: #db4743;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #73b2f3;--glide-core-icon-primary-hover: #4d99e7;--glide-core-icon-secondary-disabled: #c9c9c9;--glide-core-icon-selected: #f0f0f0;--glide-core-icon-selected-disabled: #c9c9c9;--glide-core-icon-selected2: #f0f0f0;--glide-core-icon-tertiary-disabled: #ffffff33;--glide-core-status-error: #db4743;--glide-core-status-expired: #db4743;--glide-core-status-failed: #db4743;--glide-core-status-in-progress: #fad232;--glide-core-status-queued: #63a8c7;--glide-core-status-scheduled: #ae73cd;--glide-core-status-success: #51bc6f;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #db4743;--glide-core-status-warning-high: #e3901d;--glide-core-status-warning-informational: #3989da;--glide-core-status-warning-low: #6d6d6d;--glide-core-status-warning-medium: #fad232;--glide-core-surface-active: #ffffffe5;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #151414f7;--glide-core-surface-base: #ffffff26;--glide-core-surface-base-dark: #625c5c;--glide-core-surface-base-gray: #ffffff1a;--glide-core-surface-base-gray-dark: #ffffff1a;--glide-core-surface-base-gray-light: #ffffff12;--glide-core-surface-base-gray-lighter: #ffffff0d;--glide-core-surface-base-gray-lightest: #ffffff0d;--glide-core-surface-base-light: #ffffff08;--glide-core-surface-base-lighter: #ffffff12;--glide-core-surface-base-lightest: #ffffff0d;--glide-core-surface-base-xlightest: #333030;--glide-core-surface-disabled: #6d6d6d;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-empty-state: #ff3b3026;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #3989da;--glide-core-surface-hover: #567a9e75;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #464242;--glide-core-surface-page: #212121;--glide-core-surface-primary: #3989da;--glide-core-surface-primary-disabled: #3888d999;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #3989da;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #256db7;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #6d6d6d;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #f0f0f0;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #f0f0f0;--glide-core-text-body-lighter: #f0f0f0;--glide-core-text-disabled: #c9c9c9;--glide-core-text-header-1: #f0f0f0;--glide-core-text-header-2: #f0f0f0;--glide-core-text-link: #73b2f3;--glide-core-text-link-dark-surface: #73b2f3;--glide-core-text-link-table: #93c4f6;--glide-core-text-placeholder: #9e9e9e;--glide-core-text-primary: #73b2f3;--glide-core-text-primary-hover: #4d99e7;--glide-core-text-secondary: #3989da;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #f0f0f0;--glide-core-text-selected-2: #f0f0f0;--glide-core-text-syntax-aliases: #095341;--glide-core-text-syntax-fields: #7c1faa;--glide-core-text-syntax-formatting: #212121;--glide-core-text-syntax-function: #ff2893;--glide-core-text-syntax-literals: #794d0c;--glide-core-text-syntax-object: #c8095e;--glide-core-text-syntax-operator: #1b51b5;--glide-core-text-tertiary: #f0f0f0;--glide-core-text-tertiary-disabled: #ffffff8c}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-checkbox: 0px 0px 7px 0px #5ba4ee;--glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x) var(--glide-core-effects-shadow-small-y) var(--glide-core-effects-shadow-small-blur) var(--glide-core-effects-shadow-small-spread) var(--glide-core-effects-shadow-small-fill);--glide-core-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, .15), 0px 3px 1px 0px rgba(0, 0, 0, .06);--glide-core-shadow-lg: var(--glide-core-effects-shadow-large-x) var(--glide-core-effects-shadow-large-y) var(--glide-core-effects-shadow-large-blur) var(--glide-core-effects-shadow-large-spread) var(--glide-core-effects-shadow-large-fill);--glide-core-shadow-xl: var(--glide-core-effects-shadow-xlarge-x) var(--glide-core-effects-shadow-xlarge-y) var(--glide-core-effects-shadow-xlarge-blur) var(--glide-core-effects-shadow-xlarge-spread) var(--glide-core-effects-shadow-xlarge-fill);--glide-core-shadow-footer: var(--glide-core-effects-shadow-footer-x) var(--glide-core-effects-shadow-footer-y) var(--glide-core-effects-shadow-footer-blur) var(--glide-core-effects-shadow-footer-spread) var(--glide-core-effects-shadow-footer-fill);--glide-core-shadow-nav: var(--glide-core-effects-shadow-nav-x) var(--glide-core-effects-shadow-nav-y) var(--glide-core-effects-shadow-nav-blur) var(--glide-core-effects-shadow-nav-spread) var(--glide-core-effects-shadow-nav-fill)}
1
+ :root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-success-surface-container: #f1fdf4;--glide-core-color-success-surface-container-light: #f5fcf7;--glide-core-color-success-surface-solid: #34c759;--glide-core-color-success-surface-solid--hover: #248b3e;--glide-core-color-success-stroke-primary: #34c759;--glide-core-color-success-stroke-secondary: #d6f4de;--glide-core-color-success-text-status: #34c759;--glide-core-color-success-text-container: #212121;--glide-core-color-success-icon-default: #34c759;--glide-core-color-attention-surface-container: #fffbeb;--glide-core-color-attention-surface-container-light: #fffcf2;--glide-core-color-attention-surface-solid: #ffcc00;--glide-core-color-attention-surface-solid--hover: #b28f00;--glide-core-color-attention-stroke-primary: #ffcc00;--glide-core-color-attention-stroke-secondary: #fff5cc;--glide-core-color-attention-text-status: #ffcc00;--glide-core-color-attention-text-container: #212121;--glide-core-color-attention-icon-default: #ffcc00;--glide-core-color-warning-surface-container: #fff6e9;--glide-core-color-warning-surface-container-light: #fffaf2;--glide-core-color-warning-surface-solid: #ff9500;--glide-core-color-warning-surface-solid--hover: #b26800;--glide-core-color-warning-stroke-primary: #ff9500;--glide-core-color-warning-stroke-secondary: #ffeacc;--glide-core-color-warning-text-status: #ff9500;--glide-core-color-warning-text-container: #212121;--glide-core-color-warning-icon-default: #ff9500;--glide-core-color-info-surface-container: #e5f1fc;--glide-core-color-info-surface-container-light: #f2f8fe;--glide-core-color-info-surface-solid: #0073e6;--glide-core-color-info-surface-solid--hover: #0051a1;--glide-core-color-info-stroke-primary: #0073e6;--glide-core-color-info-stroke-secondary: #cce3fa;--glide-core-color-info-text-status: #0073e6;--glide-core-color-info-text-container: #212121;--glide-core-color-info-icon-default: #0073e6;--glide-core-color-error-surface-container: #fff0ef;--glide-core-color-error-surface-container-light: #fdf4f4;--glide-core-color-error-surface-solid: #db2d24;--glide-core-color-error-surface-solid--hover: #992019;--glide-core-color-error-stroke-primary: #db2d24;--glide-core-color-error-stroke-secondary: #f8d5d3;--glide-core-color-error-text-status: #db2d24;--glide-core-color-error-text-container: #212121;--glide-core-color-error-icon-default: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #2c2c2c;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-success-surface-container: #1c261e;--glide-core-color-success-surface-container-light: #181d19;--glide-core-color-success-surface-solid: #61c479;--glide-core-color-success-surface-solid--hover: #90d6a1;--glide-core-color-success-stroke-primary: #61c479;--glide-core-color-success-stroke-secondary: #233728;--glide-core-color-success-text-status: #61c479;--glide-core-color-success-text-container: #dcdcdc;--glide-core-color-success-icon-default: #61c479;--glide-core-color-attention-surface-container: #2a271a;--glide-core-color-attention-surface-container-light: #1f1d17;--glide-core-color-attention-surface-solid: #f0cf4f;--glide-core-color-attention-surface-solid--hover: #f5dd84;--glide-core-color-attention-stroke-primary: #f0cf4f;--glide-core-color-attention-stroke-secondary: #403920;--glide-core-color-attention-text-status: #f0cf4f;--glide-core-color-attention-text-container: #dcdcdc;--glide-core-color-attention-icon-default: #f0cf4f;--glide-core-color-warning-surface-container: #2c241a;--glide-core-color-warning-surface-container-light: #201c17;--glide-core-color-warning-surface-solid: #ffb64f;--glide-core-color-warning-surface-solid--hover: #ffcc84;--glide-core-color-warning-stroke-primary: #ffb64f;--glide-core-color-warning-stroke-secondary: #433420;--glide-core-color-warning-text-status: #ffb64f;--glide-core-color-warning-text-container: #dcdcdc;--glide-core-color-warning-icon-default: #ffb64f;--glide-core-color-info-surface-container: #171f26;--glide-core-color-info-surface-container-light: #15191d;--glide-core-color-info-surface-solid: #2d7dcc;--glide-core-color-info-surface-solid--hover: #6ca4db;--glide-core-color-info-stroke-primary: #2d7dcc;--glide-core-color-info-stroke-secondary: #192939;--glide-core-color-info-text-status: #2d7dcc;--glide-core-color-info-text-container: #dcdcdc;--glide-core-color-info-icon-default: #2d7dcc;--glide-core-color-error-surface-container: #291d1c;--glide-core-color-error-surface-container-light: #1e1818;--glide-core-color-error-surface-solid: #e36963;--glide-core-color-error-surface-solid--hover: #eb9692;--glide-core-color-error-stroke-primary: #e36963;--glide-core-color-error-stroke-secondary: #3d2524;--glide-core-color-error-text-status: #e36963;--glide-core-color-error-text-container: #dcdcdc;--glide-core-color-error-icon-default: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #6ca4db;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
package/dist/tab.group.styles.js CHANGED
@@ -16,7 +16,8 @@ import{css}from"lit";export default[css`
16
16
  }
17
17
 
18
18
  .tab-container {
19
- border-block-end: 1px solid var(--glide-core-border-base-lighter);
19
+ border-block-end: 1px solid
20
+ var(--glide-core-private-color-tabs-stroke-underline);
20
21
  box-sizing: border-box;
21
22
  display: flex;
22
23
  padding-block-end: var(--tabs-padding-block-end);
@@ -27,7 +28,7 @@ import{css}from"lit";export default[css`
27
28
 
28
29
  .tab-group {
29
30
  display: flex;
30
- gap: var(--glide-core-spacing-xl);
31
+ gap: var(--glide-core-spacing-base-xl);
31
32
  overflow: auto hidden;
32
33
  position: relative;
33
34
  scrollbar-width: none;
@@ -38,7 +39,7 @@ import{css}from"lit";export default[css`
38
39
  }
39
40
 
40
41
  &::after {
41
- background: var(--glide-core-border-focus);
42
+ background: var(--glide-core-color-interactive-stroke-active);
42
43
  block-size: 0.125rem;
43
44
  content: '';
44
45
  inline-size: var(--private-selected-tab-indicator-width);
@@ -66,7 +67,7 @@ import{css}from"lit";export default[css`
66
67
  align-items: center;
67
68
  background-color: transparent;
68
69
  border: none;
69
- color: var(--glide-core-icon-default);
70
+ color: var(--glide-core-color-interactive-icon-default);
70
71
  cursor: pointer;
71
72
  display: flex;
72
73
  flex-shrink: 0;
@@ -77,7 +78,7 @@ import{css}from"lit";export default[css`
77
78
  padding: 0;
78
79
 
79
80
  &.disabled {
80
- color: var(--glide-core-icon-tertiary-disabled);
81
+ color: var(--glide-core-color-interactive-icon-default--disabled);
81
82
  }
82
83
 
83
84
  &.start {
package/dist/tab.panel.styles.js CHANGED
@@ -24,7 +24,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
24
24
  }
25
25
 
26
26
  .component {
27
- font-family: var(--glide-core-font-sans);
27
+ font-family: var(--glide-core-typography-family-primary);
28
28
  outline: none;
29
29
  padding-inline-end: var(--padding-inline-end);
30
30
  padding-inline-start: var(--padding-inline-start);
package/dist/tab.styles.js CHANGED
@@ -8,23 +8,24 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
8
8
  .component {
9
9
  align-items: center;
10
10
  box-sizing: border-box;
11
+ color: var(--glide-core-color-interactive-text-default);
11
12
  cursor: pointer;
12
13
  display: flex;
13
- font-family: var(--glide-core-heading-xxs-font-family);
14
- font-size: var(--glide-core-heading-xxxs-font-size);
15
- font-style: var(--glide-core-heading-xxs-font-style);
16
- font-weight: var(--glide-core-body-sm-font-weight);
14
+ font-family: var(--glide-core-typography-family-primary);
15
+ font-size: var(--glide-core-typography-size-body-default);
16
+ font-weight: var(--glide-core-typography-weight-regular);
17
17
  gap: 0.4375rem;
18
18
  justify-content: center;
19
19
  padding-block: 0.4375rem;
20
+ user-select: none;
20
21
 
21
22
  &:hover {
22
- color: var(--glide-core-text-primary);
23
+ color: var(--glide-core-color-interactive-text-link);
23
24
  }
24
25
 
25
26
  &.disabled {
26
27
  border: none;
27
- color: var(--glide-core-text-tertiary-disabled);
28
+ color: var(--glide-core-color-interactive-text-default--disabled);
28
29
  pointer-events: none;
29
30
  }
30
31
  }
@@ -34,7 +35,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
34
35
  border-radius: 0.0625rem;
35
36
  display: flex;
36
37
  flex-shrink: 0;
37
- gap: var(--glide-core-spacing-xs);
38
+ gap: var(--glide-core-spacing-base-xs);
38
39
  white-space: nowrap;
39
40
  }
40
41
  `];
package/dist/tag.styles.js CHANGED
@@ -24,30 +24,31 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
24
24
 
25
25
  .component {
26
26
  align-items: center;
27
- background: var(--glide-core-surface-base-gray-lighter);
28
- border-radius: var(--glide-core-border-radius-round);
29
- color: var(--glide-core-text-body-1);
27
+ background: var(--glide-core-color-static-surface-container-secondary);
28
+ border-radius: var(--glide-core-rounding-base-radius-round);
29
+ color: var(--glide-core-color-static-text-default);
30
30
  display: flex;
31
- font-family: var(--glide-core-body-xs-font-family);
32
- font-size: var(--glide-core-body-xs-font-size);
33
- font-style: var(--glide-core-body-xs-font-variant);
34
- font-weight: var(--glide-core-body-xs-font-weight);
31
+ font-family: var(--glide-core-typography-family-primary);
32
+ font-size: var(--glide-core-typography-size-body-small);
33
+ font-weight: var(--glide-core-typography-weight-regular);
35
34
  justify-content: center;
36
35
  line-height: 1;
37
36
  max-inline-size: max-content;
38
- min-block-size: var(--glide-core-spacing-md);
37
+ min-block-size: var(--glide-core-spacing-base-md);
39
38
  opacity: 1;
40
- padding: var(--glide-core-spacing-xxxs) var(--glide-core-spacing-xs);
39
+ padding: var(--glide-core-spacing-base-xxxs)
40
+ var(--glide-core-spacing-base-xs);
41
41
 
42
42
  &.large {
43
43
  min-block-size: 0.875rem;
44
- padding: var(--glide-core-spacing-xxs) var(--glide-core-spacing-sm);
44
+ padding: var(--glide-core-spacing-base-xxs)
45
+ var(--glide-core-spacing-base-sm);
45
46
  }
46
47
 
47
48
  &.small {
48
49
  font-size: 0.625rem;
49
- min-block-size: var(--glide-core-spacing-md);
50
- padding: 0 var(--glide-core-spacing-xs);
50
+ min-block-size: var(--glide-core-spacing-base-md);
51
+ padding: 0 var(--glide-core-spacing-base-xs);
51
52
  }
52
53
 
53
54
  &.added {
@@ -57,7 +58,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
57
58
  }
58
59
 
59
60
  &.disabled {
60
- color: var(--glide-core-icon-tertiary-disabled);
61
+ color: var(--glide-core-color-interactive-icon-default--disabled);
61
62
  }
62
63
 
63
64
  &.removed {
@@ -81,7 +82,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
81
82
  background-color: transparent;
82
83
  border: none;
83
84
  border-radius: 0.0625rem;
84
- color: var(--glide-core-icon-display);
85
+ color: var(--glide-core-color-interactive-icon-default);
85
86
  cursor: pointer;
86
87
  display: flex;
87
88
  justify-content: center;
@@ -92,28 +93,28 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
92
93
  &.large {
93
94
  block-size: 0.875rem;
94
95
  inline-size: 0.875rem;
95
- margin-inline-start: var(--glide-core-spacing-xs);
96
+ margin-inline-start: var(--glide-core-spacing-base-xs);
96
97
  }
97
98
 
98
99
  &.medium {
99
- block-size: var(--glide-core-spacing-sm);
100
- inline-size: var(--glide-core-spacing-sm);
100
+ block-size: var(--glide-core-spacing-base-sm);
101
+ inline-size: var(--glide-core-spacing-base-sm);
101
102
  margin-inline-start: 0.375rem;
102
103
  }
103
104
 
104
105
  &.small {
105
106
  block-size: 0.625rem;
106
107
  inline-size: 0.6215rem;
107
- margin-inline-start: var(--glide-core-spacing-xxs);
108
+ margin-inline-start: var(--glide-core-spacing-base-xxs);
108
109
  }
109
110
 
110
111
  &.disabled {
111
- color: var(--glide-core-icon-tertiary-disabled);
112
+ color: var(--glide-core-color-interactive-icon-default--disabled);
112
113
  cursor: not-allowed;
113
114
  }
114
115
 
115
116
  &:hover:not(.disabled) {
116
- color: var(--glide-core-icon-primary-hover);
117
+ color: var(--glide-core-color-interactive-icon-active--hover);
117
118
  }
118
119
 
119
120
  &:focus {
@@ -126,7 +127,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
126
127
  &::slotted(*) {
127
128
  block-size: 0.875rem;
128
129
  inline-size: 0.875rem;
129
- margin-inline-end: var(--glide-core-spacing-xs);
130
+ margin-inline-end: var(--glide-core-spacing-base-xs);
130
131
  }
131
132
  }
132
133
 
@@ -142,7 +143,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
142
143
  &::slotted(*) {
143
144
  block-size: 0.625rem;
144
145
  inline-size: 0.625rem;
145
- margin-inline-end: var(--glide-core-spacing-xxs);
146
+ margin-inline-end: var(--glide-core-spacing-base-xxs);
146
147
  }
147
148
  }
148
149
 
@@ -161,7 +162,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
161
162
  padding: 0;
162
163
 
163
164
  &.large {
164
- margin-inline-start: var(--glide-core-spacing-xs);
165
+ margin-inline-start: var(--glide-core-spacing-base-xs);
165
166
  }
166
167
 
167
168
  &.medium {
@@ -173,11 +174,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
173
174
  &.small {
174
175
  --private-size: 0.625rem;
175
176
 
176
- margin-inline-start: var(--glide-core-spacing-xxs);
177
+ margin-inline-start: var(--glide-core-spacing-base-xxs);
177
178
  }
178
179
 
179
180
  &.disabled {
180
- color: var(--glide-core-icon-tertiary-disabled);
181
+ color: var(--glide-core-color-interactive-icon-default--disabled);
181
182
  cursor: not-allowed;
182
183
  }
183
184
 
@@ -186,7 +187,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
186
187
  }
187
188
 
188
189
  &:hover:not(.disabled) {
189
- color: var(--glide-core-icon-primary-hover);
190
+ color: var(--glide-core-color-interactive-icon-active--hover);
190
191
  }
191
192
  }
192
193
  `];
package/dist/textarea.styles.js CHANGED
@@ -3,7 +3,7 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
3
3
  `,css`
4
4
  glide-core-private-label::part(private-tooltips) {
5
5
  align-items: flex-start;
6
- margin-block-start: var(--glide-core-spacing-sm);
6
+ margin-block-start: var(--glide-core-spacing-base-sm);
7
7
  }
8
8
 
9
9
  .textarea-container {
@@ -24,19 +24,20 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
24
24
 
25
25
  textarea {
26
26
  appearance: none;
27
- background-color: var(--glide-core-surface-base-lighter);
28
- border: 1px solid var(--glide-core-border-base);
29
- border-radius: 0.5rem;
30
- color: var(--glide-core-text-body-1);
27
+ background-color: var(--glide-core-color-interactive-surface-container);
28
+ border: 1px solid var(--glide-core-color-interactive-stroke-primary);
29
+ border-radius: var(--glide-core-rounding-base-radius-sm);
30
+ color: var(--glide-core-color-interactive-text-default);
31
31
  cursor: inherit;
32
32
  display: block;
33
33
  flex-grow: 1;
34
- font-family: var(--glide-core-body-xs-font-family);
35
- font-size: var(--glide-core-body-sm-font-size);
36
- font-weight: var(--glide-core-body-xs-font-weight);
34
+ font-family: var(--glide-core-typography-family-primary);
35
+ font-size: var(--glide-core-typography-size-body-default);
36
+ font-weight: var(--glide-core-typography-weight-regular);
37
37
  max-block-size: 5lh;
38
38
  min-block-size: 3lh;
39
- padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
39
+ padding: var(--glide-core-spacing-base-xs)
40
+ var(--glide-core-spacing-base-sm);
40
41
  resize: vertical;
41
42
  transition: border-color 200ms ease-in-out;
42
43
 
@@ -49,15 +50,15 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
49
50
  &:focus-visible,
50
51
  &:focus-visible[readonly],
51
52
  &:hover {
52
- border-color: var(--glide-core-border-focus);
53
+ border-color: var(--glide-core-color-interactive-stroke-primary--hover);
53
54
  }
54
55
 
55
56
  &::placeholder {
56
- color: var(--glide-core-text-placeholder);
57
+ color: var(--glide-core-color-interactive-text-placeholder);
57
58
  }
58
59
 
59
60
  &.error {
60
- border-color: var(--glide-core-status-error);
61
+ border-color: var(--glide-core-color-error-stroke-primary);
61
62
  }
62
63
 
63
64
  &[readonly] {
@@ -70,22 +71,25 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
70
71
  }
71
72
 
72
73
  &[disabled] {
73
- background-color: var(--glide-core-surface-disabled);
74
- border: 0.0625rem solid var(--glide-core-border-base-light);
75
- color: var(--glide-core-text-tertiary-disabled);
74
+ background-color: var(
75
+ --glide-core-color-interactive-surface-container--disabled
76
+ );
77
+ border: 0.0625rem solid
78
+ var(--glide-core-color-interactive-stroke-primary--disabled);
79
+ color: var(--glide-core-color-interactive-text-default--disabled);
76
80
  }
77
81
  }
78
82
 
79
83
  .meta {
80
- column-gap: var(--glide-core-spacing-xs);
84
+ column-gap: var(--glide-core-spacing-base-xs);
81
85
  display: flex;
82
- font-size: var(--glide-core-body-xs-font-size);
86
+ font-size: var(--glide-core-typography-size-body-small);
83
87
  justify-content: space-between;
84
88
  }
85
89
 
86
90
  .character-count {
87
91
  &.error {
88
- font-weight: var(--glide-core-font-weight-bold);
92
+ font-weight: var(--glide-core-typography-weight-bold);
89
93
  }
90
94
  }
91
95
  `];
package/dist/toasts.styles.js CHANGED
@@ -4,7 +4,7 @@ import{css}from"lit";export default[css`
4
4
  border: none;
5
5
  display: none;
6
6
  flex-direction: column-reverse;
7
- gap: var(--glide-core-spacing-md);
7
+ gap: var(--glide-core-spacing-base-md);
8
8
  inline-size: 24.25rem;
9
9
  inset-block-start: 0;
10
10
  inset-inline-end: 0;
@@ -12,7 +12,7 @@ import{css}from"lit";export default[css`
12
12
  max-block-size: 100%;
13
13
  max-inline-size: 100%;
14
14
  overflow: hidden;
15
- padding: var(--glide-core-spacing-sm);
15
+ padding: var(--glide-core-spacing-base-sm);
16
16
  position: fixed;
17
17
 
18
18
  &:popover-open {