@sebgroup/green-core 1.74.0 → 1.74.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/details/details.styles.js +27 -13
- package/components/theme/chlorophyll-tokens.scss.js +1 -1
- package/generated/react/index.d.ts +4 -4
- package/generated/react/index.js +4 -4
- package/package.json +1 -1
- package/tokens/dark.css.js +1 -1
- package/tokens/light.css.js +1 -1
- package/tokens/motion.css.js +1 -1
- package/tokens/shadow.css.js +1 -1
- package/tokens/size.css.js +1 -1
- package/tokens/text.css.js +1 -1
- package/utils/helpers/custom-element-scoping.js +1 -1
|
@@ -32,6 +32,23 @@ const styles = css`
|
|
|
32
32
|
width: max-content;
|
|
33
33
|
height: max-content;
|
|
34
34
|
line-height: 1;
|
|
35
|
+
position: relative;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.summary-icon::after {
|
|
39
|
+
content: '';
|
|
40
|
+
position: absolute;
|
|
41
|
+
border-radius: var(--gds-space-max);
|
|
42
|
+
transition: all 280ms;
|
|
43
|
+
inset: 0;
|
|
44
|
+
scale: 0.9;
|
|
45
|
+
opacity: 0;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
background-color: color-mix(
|
|
48
|
+
in srgb,
|
|
49
|
+
transparent,
|
|
50
|
+
var(--gds-color-l3-states-light-hover)
|
|
51
|
+
);
|
|
35
52
|
}
|
|
36
53
|
|
|
37
54
|
.summary:focus {
|
|
@@ -43,20 +60,15 @@ const styles = css`
|
|
|
43
60
|
}
|
|
44
61
|
|
|
45
62
|
@media (pointer: fine) {
|
|
46
|
-
.summary:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var(--gds-color-l3-states-light-hover)
|
|
51
|
-
);
|
|
63
|
+
.summary:hover .summary-icon::after,
|
|
64
|
+
.summary:focus-visible .summary-icon::after {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
scale: 1;
|
|
52
67
|
}
|
|
53
68
|
|
|
54
|
-
.summary:active .summary-icon {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
transparent,
|
|
58
|
-
var(--gds-color-l3-states-light-pressed)
|
|
59
|
-
);
|
|
69
|
+
.summary:active .summary-icon::after {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
scale: 1;
|
|
60
72
|
}
|
|
61
73
|
|
|
62
74
|
.details:hover,
|
|
@@ -104,11 +116,13 @@ const styles = css`
|
|
|
104
116
|
transition:
|
|
105
117
|
height 0.35s ease,
|
|
106
118
|
padding-block-end 0.35s ease;
|
|
107
|
-
overflow
|
|
119
|
+
overflow: hidden;
|
|
108
120
|
outline: none;
|
|
121
|
+
scrollbar-width: none;
|
|
109
122
|
}
|
|
110
123
|
|
|
111
124
|
.content.open {
|
|
125
|
+
overflow: auto;
|
|
112
126
|
height: max-content;
|
|
113
127
|
max-height: 100vh;
|
|
114
128
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 07:57:51 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 07:57:51 GMT\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n --gds-comp-checkbox-container-height: 1rem;\n --gds-comp-checkbox-container-width: 1rem;\n --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base300);\n --gds-comp-checkbox-border-color: var(--gds-sys-color-base900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);\n --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);\n --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n --gds-ref-color-white: #ffffff;\n --gds-ref-color-black: #000000;\n --gds-ref-pallet-base000: hsl(0 0% 100%);\n --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n --gds-ref-pallet-base1000: hsl(0 0% 0%);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-blue-dark-1: #0092e1;\n --gds-sys-color-blue-dark-2: #007ac7;\n --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n --gds-sys-color-base: var(--gds-ref-pallet-base800);\n --gds-sys-color-font: var(--gds-ref-pallet-base800);\n --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #41b0ee;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n --heading-primary-color: rgb(0, 0, 0);\n --text-primary-color: rgb(51, 51, 51);\n --text-secondary-color: rgb(134, 134, 134);\n --text-disabled-color: var(--gds-ref-pallet-base600);\n --text-primary-disabled-color: var(--gds-ref-pallet-base600);\n --border-color: rgba(0, 0, 0, 0.17);\n --border-secondary-color: rgba(0, 0, 0, 0.1);\n --border-disabled-color: var(--gds-ref-pallet-base500);\n --border-primary-disabled-color: var(--gds-ref-pallet-base500);\n --border-color-invalid: rgb(159, 0, 10);\n --border-color-valid: rgb(55, 157, 0);\n --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);\n --link-color-dark: rgb(51, 51, 51);\n --link-color-dark-visited: rgb(73, 73, 73);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(0, 122, 199);\n --intent-primary-color: #fff;\n --intent-primary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(222, 222, 222);\n --intent-secondary-color: black;\n --intent-secondary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(0, 122, 199);\n --intent-info-color: #fff;\n --intent-info-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n --intent-success-color: #fff;\n --intent-success-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 197, 0);\n --intent-warning-color: black;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(159, 0, 10);\n --intent-danger-color: #fff;\n --intent-danger-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(238, 238, 238);\n --intent-light-color: black;\n --intent-light-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(51, 51, 51);\n --intent-dark-color: #fff;\n --intent-dark-fadable-color: 255, 255, 255;\n --grey-1100: rgb(26, 26, 26);\n --grey-1000: rgb(51, 51, 51);\n --grey-900: rgb(73, 73, 73);\n --grey-800: rgb(134, 134, 134);\n --grey-700: rgb(173, 173, 173);\n --grey-600: rgb(206, 206, 206);\n --grey-500: rgb(222, 222, 222);\n --grey-400: rgb(233, 233, 233);\n --grey-300: rgb(238, 238, 238);\n --grey-200: rgb(248, 248, 248);\n --grey-100: rgb(255, 255, 255);\n color: var(--text-primary-color);\n --gds-sys-outline-color: #333333;\n --gds-comp-chips-fr-color: #333333;\n --gds-comp-chips-bg-color: #ffffff;\n --gds-comp-chips-br-color: #333333;\n --gds-comp-chips-fr-color-hover: #ffffff;\n --gds-comp-chips-bg-color-hover: #494949;\n --gds-comp-chips-br-color-hover: #494949;\n --gds-comp-chips-bg-color-active: #333333;\n --gds-comp-chips-bg-color-action: #333333;\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #333333;\n --sg-text-secondary: #333333;\n --sg-form-control-bg: #fff;\n --sg-form-control-bg-disabled: #eeeeee;\n --sg-border-color: var(--gds-ref-pallet-base600);\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 0%;\n --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #f8f8f8;\n --sg-grey-200: #e9e9e9;\n --sg-grey-300: #dedede;\n --sg-grey-400: #cecece;\n --sg-grey-500: #adadad;\n --sg-grey-600: #868686;\n --sg-grey-700: #494949;\n --sg-grey-800: #333333;\n --sg-grey-900: #1a1a1a;\n --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n --sg-bg-level-0: #eeeeee;\n --sg-bg-level-1: #fff;\n --sg-bg-level-2: #fff;\n --sg-bg-level-3: #fff;\n --sg-table-header-background: #1a1a1a;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #dedede;\n --sg-skeleton-loader-background-color: #f8f8f8;\n --sg-modal-background: #fff;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #fff;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #fff;\n --sg-card-heading-color: #333333;\n --sg-card-color: #333333;\n --sg-card-border: solid 1px #fff;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #0092e1;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2C99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base100: #f8f8f8;\n --gds-sys-color-base200: #e9e9e9;\n --gds-sys-color-base300: #dedede;\n --gds-sys-color-base400: #cecece;\n --gds-sys-color-base500: #adadad;\n --gds-sys-color-base600: #868686;\n --gds-sys-color-base700: #494949;\n --gds-sys-color-base800: #333333;\n --gds-sys-color-base900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #00adff;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base100: #121212;\n --gds-sys-color-base200: #222222;\n --gds-sys-color-base300: #272727;\n --gds-sys-color-base400: #2c2c2c;\n --gds-sys-color-base500: #333333;\n --gds-sys-color-base600: #494949;\n --gds-sys-color-base700: #757575;\n --gds-sys-color-base800: #ababab;\n --gds-sys-color-base900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n }\n}";
|
|
1
|
+
const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n --gds-comp-checkbox-container-height: 1rem;\n --gds-comp-checkbox-container-width: 1rem;\n --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base300);\n --gds-comp-checkbox-border-color: var(--gds-sys-color-base900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);\n --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);\n --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n --gds-ref-color-white: #ffffff;\n --gds-ref-color-black: #000000;\n --gds-ref-pallet-base000: hsl(0 0% 100%);\n --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n --gds-ref-pallet-base1000: hsl(0 0% 0%);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-blue-dark-1: #0092e1;\n --gds-sys-color-blue-dark-2: #007ac7;\n --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n --gds-sys-color-base: var(--gds-ref-pallet-base800);\n --gds-sys-color-font: var(--gds-ref-pallet-base800);\n --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #41b0ee;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n --heading-primary-color: rgb(0, 0, 0);\n --text-primary-color: rgb(51, 51, 51);\n --text-secondary-color: rgb(134, 134, 134);\n --text-disabled-color: var(--gds-ref-pallet-base600);\n --text-primary-disabled-color: var(--gds-ref-pallet-base600);\n --border-color: rgba(0, 0, 0, 0.17);\n --border-secondary-color: rgba(0, 0, 0, 0.1);\n --border-disabled-color: var(--gds-ref-pallet-base500);\n --border-primary-disabled-color: var(--gds-ref-pallet-base500);\n --border-color-invalid: rgb(159, 0, 10);\n --border-color-valid: rgb(55, 157, 0);\n --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);\n --link-color-dark: rgb(51, 51, 51);\n --link-color-dark-visited: rgb(73, 73, 73);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(0, 122, 199);\n --intent-primary-color: #fff;\n --intent-primary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(222, 222, 222);\n --intent-secondary-color: black;\n --intent-secondary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(0, 122, 199);\n --intent-info-color: #fff;\n --intent-info-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n --intent-success-color: #fff;\n --intent-success-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 197, 0);\n --intent-warning-color: black;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(159, 0, 10);\n --intent-danger-color: #fff;\n --intent-danger-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(238, 238, 238);\n --intent-light-color: black;\n --intent-light-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(51, 51, 51);\n --intent-dark-color: #fff;\n --intent-dark-fadable-color: 255, 255, 255;\n --grey-1100: rgb(26, 26, 26);\n --grey-1000: rgb(51, 51, 51);\n --grey-900: rgb(73, 73, 73);\n --grey-800: rgb(134, 134, 134);\n --grey-700: rgb(173, 173, 173);\n --grey-600: rgb(206, 206, 206);\n --grey-500: rgb(222, 222, 222);\n --grey-400: rgb(233, 233, 233);\n --grey-300: rgb(238, 238, 238);\n --grey-200: rgb(248, 248, 248);\n --grey-100: rgb(255, 255, 255);\n color: var(--text-primary-color);\n --gds-sys-outline-color: #333333;\n --gds-comp-chips-fr-color: #333333;\n --gds-comp-chips-bg-color: #ffffff;\n --gds-comp-chips-br-color: #333333;\n --gds-comp-chips-fr-color-hover: #ffffff;\n --gds-comp-chips-bg-color-hover: #494949;\n --gds-comp-chips-br-color-hover: #494949;\n --gds-comp-chips-bg-color-active: #333333;\n --gds-comp-chips-bg-color-action: #333333;\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #333333;\n --sg-text-secondary: #333333;\n --sg-form-control-bg: #fff;\n --sg-form-control-bg-disabled: #eeeeee;\n --sg-border-color: var(--gds-ref-pallet-base600);\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 0%;\n --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #f8f8f8;\n --sg-grey-200: #e9e9e9;\n --sg-grey-300: #dedede;\n --sg-grey-400: #cecece;\n --sg-grey-500: #adadad;\n --sg-grey-600: #868686;\n --sg-grey-700: #494949;\n --sg-grey-800: #333333;\n --sg-grey-900: #1a1a1a;\n --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n --sg-bg-level-0: #eeeeee;\n --sg-bg-level-1: #fff;\n --sg-bg-level-2: #fff;\n --sg-bg-level-3: #fff;\n --sg-table-header-background: #1a1a1a;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #dedede;\n --sg-skeleton-loader-background-color: #f8f8f8;\n --sg-modal-background: #fff;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #fff;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #fff;\n --sg-card-heading-color: #333333;\n --sg-card-color: #333333;\n --sg-card-border: solid 1px #fff;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #0092e1;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2C99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base100: #f8f8f8;\n --gds-sys-color-base200: #e9e9e9;\n --gds-sys-color-base300: #dedede;\n --gds-sys-color-base400: #cecece;\n --gds-sys-color-base500: #adadad;\n --gds-sys-color-base600: #868686;\n --gds-sys-color-base700: #494949;\n --gds-sys-color-base800: #333333;\n --gds-sys-color-base900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #00adff;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base100: #121212;\n --gds-sys-color-base200: #222222;\n --gds-sys-color-base300: #272727;\n --gds-sys-color-base400: #2c2c2c;\n --gds-sys-color-base500: #333333;\n --gds-sys-color-base600: #494949;\n --gds-sys-color-base700: #757575;\n --gds-sys-color-base800: #ababab;\n --gds-sys-color-base900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n }\n}";
|
|
2
2
|
export default styles;
|
|
@@ -13,8 +13,8 @@ export * from './div/index.js';
|
|
|
13
13
|
export * from './divider/index.js';
|
|
14
14
|
export * from './dropdown/index.js';
|
|
15
15
|
export * from './fab/index.js';
|
|
16
|
-
export * from './flex/index.js';
|
|
17
16
|
export * from './filter-chips/index.js';
|
|
17
|
+
export * from './flex/index.js';
|
|
18
18
|
export * from './grid/index.js';
|
|
19
19
|
export * from './grouped-list/index.js';
|
|
20
20
|
export * from './list-item/index.js';
|
|
@@ -23,11 +23,11 @@ export * from './img/index.js';
|
|
|
23
23
|
export * from './input/index.js';
|
|
24
24
|
export * from './link/index.js';
|
|
25
25
|
export * from './mask/index.js';
|
|
26
|
-
export * from './menu-button/index.js';
|
|
27
26
|
export * from './backdrop/index.js';
|
|
28
27
|
export * from './popover/index.js';
|
|
29
28
|
export * from './radio/index.js';
|
|
30
29
|
export * from './rich-text/index.js';
|
|
30
|
+
export * from './menu-button/index.js';
|
|
31
31
|
export * from './segmented-control/index.js';
|
|
32
32
|
export * from './select/index.js';
|
|
33
33
|
export * from './signal/index.js';
|
|
@@ -39,13 +39,13 @@ export * from './theme/index.js';
|
|
|
39
39
|
export * from './video/index.js';
|
|
40
40
|
export * from './form-control-footer/index.js';
|
|
41
41
|
export * from './form-control-header/index.js';
|
|
42
|
-
export * from './option/index.js';
|
|
43
42
|
export * from './menu-item/index.js';
|
|
43
|
+
export * from './option/index.js';
|
|
44
44
|
export * from './icons/icon-details/index.js';
|
|
45
|
+
export * from './filter-chip/index.js';
|
|
45
46
|
export * from './formatted-account/index.js';
|
|
46
47
|
export * from './formatted-date/index.js';
|
|
47
48
|
export * from './formatted-number/index.js';
|
|
48
|
-
export * from './filter-chip/index.js';
|
|
49
49
|
export * from './radio-group/index.js';
|
|
50
50
|
export * from './segment/index.js';
|
|
51
51
|
export * from './sensitive-number/index.js';
|
package/generated/react/index.js
CHANGED
|
@@ -13,8 +13,8 @@ export * from "./div/index.js";
|
|
|
13
13
|
export * from "./divider/index.js";
|
|
14
14
|
export * from "./dropdown/index.js";
|
|
15
15
|
export * from "./fab/index.js";
|
|
16
|
-
export * from "./flex/index.js";
|
|
17
16
|
export * from "./filter-chips/index.js";
|
|
17
|
+
export * from "./flex/index.js";
|
|
18
18
|
export * from "./grid/index.js";
|
|
19
19
|
export * from "./grouped-list/index.js";
|
|
20
20
|
export * from "./list-item/index.js";
|
|
@@ -23,11 +23,11 @@ export * from "./img/index.js";
|
|
|
23
23
|
export * from "./input/index.js";
|
|
24
24
|
export * from "./link/index.js";
|
|
25
25
|
export * from "./mask/index.js";
|
|
26
|
-
export * from "./menu-button/index.js";
|
|
27
26
|
export * from "./backdrop/index.js";
|
|
28
27
|
export * from "./popover/index.js";
|
|
29
28
|
export * from "./radio/index.js";
|
|
30
29
|
export * from "./rich-text/index.js";
|
|
30
|
+
export * from "./menu-button/index.js";
|
|
31
31
|
export * from "./segmented-control/index.js";
|
|
32
32
|
export * from "./select/index.js";
|
|
33
33
|
export * from "./signal/index.js";
|
|
@@ -39,13 +39,13 @@ export * from "./theme/index.js";
|
|
|
39
39
|
export * from "./video/index.js";
|
|
40
40
|
export * from "./form-control-footer/index.js";
|
|
41
41
|
export * from "./form-control-header/index.js";
|
|
42
|
-
export * from "./option/index.js";
|
|
43
42
|
export * from "./menu-item/index.js";
|
|
43
|
+
export * from "./option/index.js";
|
|
44
44
|
export * from "./icons/icon-details/index.js";
|
|
45
|
+
export * from "./filter-chip/index.js";
|
|
45
46
|
export * from "./formatted-account/index.js";
|
|
46
47
|
export * from "./formatted-date/index.js";
|
|
47
48
|
export * from "./formatted-number/index.js";
|
|
48
|
-
export * from "./filter-chip/index.js";
|
|
49
49
|
export * from "./radio-group/index.js";
|
|
50
50
|
export * from "./segment/index.js";
|
|
51
51
|
export * from "./sensitive-number/index.js";
|
package/package.json
CHANGED
package/tokens/dark.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\ncolor-scheme: dark;\n --gds-color-l1-background-primary: #0e0e0e;\n --gds-color-l1-background-tertiary: #d7d7d7;\n --gds-color-l1-background-secondary: #131313;\n --gds-color-l1-content-positive: #54b561;\n --gds-color-l1-content-negative: #a63e2a;\n --gds-color-l1-content-primary: #d7d7d7;\n --gds-color-l1-content-secondary: #ababab;\n --gds-color-l1-content-tertiary: #1b1b1b;\n --gds-color-l2-background-primary: #242424;\n --gds-color-l2-background-secondary: #242424;\n --gds-color-l2-background-tertiary: #d7d7d7;\n --gds-color-l2-background-positive: #1d3f22;\n --gds-color-l2-background-negative: #4a1c13;\n --gds-color-l2-background-notice: #152c41;\n --gds-color-l2-background-warning: #4c3212;\n --gds-color-l2-background-information: #353535;\n --gds-color-l2-background-copper-01: #f2efeb;\n --gds-color-l2-background-copper-02: #332a18;\n --gds-color-l2-background-purple-01: #f3eff7;\n --gds-color-l2-background-purple-02: #372b40;\n --gds-color-l2-background-green-01: #ecf6ed;\n --gds-color-l2-background-green-02: #1d3f22;\n --gds-color-l2-background-blue-01: #eaf0f7;\n --gds-color-l2-background-blue-02: #152c41;\n --gds-color-l2-content-primary: #d7d7d7;\n --gds-color-l2-content-secondary: #ababab;\n --gds-color-l2-content-tertiary: #1b1b1b;\n --gds-color-l2-content-positive: #54b561;\n --gds-color-l2-content-negative: #ee8375;\n --gds-color-l2-content-warning: #f3b274;\n --gds-color-l2-content-notice: #78a3d5;\n --gds-color-l2-content-information: #d7d7d7;\n --gds-color-l2-content-copper-01: #1b1b1b;\n --gds-color-l2-content-copper-02: #ffffff;\n --gds-color-l2-content-purple-01: #1b1b1b;\n --gds-color-l2-content-purple-02: #ffffff;\n --gds-color-l2-content-green-01: #1b1b1b;\n --gds-color-l2-content-green-02: #ffffff;\n --gds-color-l2-content-blue-01: #1b1b1b;\n --gds-color-l2-content-blue-02: #ffffff;\n --gds-color-l2-border-primary: #353535;\n --gds-color-l2-border-secondary: #5e5e5e;\n --gds-color-l2-border-tertiary: #2c2c2c;\n --gds-color-l2-border-quarternary: #d7d7d7;\n --gds-color-l2-border-inversed: #1b1b1b;\n --gds-color-l3-background-primary: #d7d7d7;\n --gds-color-l3-background-secondary: #353535;\n --gds-color-l3-background-tertiary: #424242;\n --gds-color-l3-background-quarternary: #0e0e0e;\n --gds-color-l3-background-positive: #54b561;\n --gds-color-l3-background-positive-secondary: #25512b;\n --gds-color-l3-background-positive-badge: #306938;\n --gds-color-l3-background-negative: #c04831;\n --gds-color-l3-background-negative-secondary: #602418;\n --gds-color-l3-background-negative-badge: #4A1C13;\n --gds-color-l3-background-notice: #78a3d5;\n --gds-color-l3-background-notice-secondary: #1A3853;\n --gds-color-l3-background-notice-badge: #214769;\n --gds-color-l3-background-warning: #f3b274;\n --gds-color-l3-background-warning-secondary: #624017;\n --gds-color-l3-background-warning-badge: #744C1B;\n --gds-color-l3-background-information: #d7d7d7;\n --gds-color-l3-background-information-secondary: #424242;\n --gds-color-l3-background-information-badge: #616161;\n --gds-color-l3-background-buy: #3571a6;\n --gds-color-l3-background-copper-01: #e4ded5;\n --gds-color-l3-background-copper-02: #42361f;\n --gds-color-l3-background-purple-01: #e7deee;\n --gds-color-l3-background-purple-02: #473752;\n --gds-color-l3-background-green-01: #d7edd9;\n --gds-color-l3-background-green-02: #25512b;\n --gds-color-l3-background-blue-01: #d3dfef;\n --gds-color-l3-background-blue-02: #1a3853;\n --gds-color-l3-background-disabled: #181818;\n --gds-color-l3-background-disabled-secondary: #1b1b1b;\n --gds-color-l3-content-primary: #1b1b1b;\n --gds-color-l3-content-secondary: #ababab;\n --gds-color-l3-content-tertiary: #d7d7d7;\n --gds-color-l3-content-notice: #78a3d5;\n --gds-color-l3-content-warning: #f3b274;\n --gds-color-l3-content-information: #d7d7d7;\n --gds-color-l3-content-buy: #ffffff;\n --gds-color-l3-content-copper-01: #1b1b1b;\n --gds-color-l3-content-copper-02: #ffffff;\n --gds-color-l3-content-purple-01: #1b1b1b;\n --gds-color-l3-content-purple-02: #ffffff;\n --gds-color-l3-content-green-01: #1b1b1b;\n --gds-color-l3-content-green-02: #ffffff;\n --gds-color-l3-content-blue-01: #1b1b1b;\n --gds-color-l3-content-blue-02: #ffffff;\n --gds-color-l3-content-disabled: #5e5e5e;\n --gds-color-l3-content-positive: #54b561;\n --gds-color-l3-content-negative: #ee8375;\n --gds-color-l3-border-primary: #d7d7d7;\n --gds-color-l3-border-secondary: #ababab;\n --gds-color-l3-border-tertiary: #1b1b1b;\n --gds-color-l3-border-negative: #ee8375;\n --gds-color-l3-states-dark-hover: #ffffff 15%;\n --gds-color-l3-states-dark-pressed: #ffffff 25%;\n --gds-color-l3-states-light-hover: #d7d7d7 10%;\n --gds-color-l3-states-light-pressed: #d7d7d7 20%;\n --gds-color-l3-states-positive-hover: #54b561 10%;\n --gds-color-l3-states-positive-pressed: #54b561 20%;\n --gds-color-l3-states-negative-hover: #ee8375 10%;\n --gds-color-l3-states-negative-pressed: #ee8375 20%;\n";
|
|
2
2
|
export default styles;
|
package/tokens/light.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\ncolor-scheme: light;\n --gds-color-l1-background-primary: #ffffff;\n --gds-color-l1-background-tertiary: #1b1b1b;\n --gds-color-l1-background-secondary: #eeeeee;\n --gds-color-l1-content-positive: #35723d;\n --gds-color-l1-content-negative: #a63e2a;\n --gds-color-l1-content-primary: #1b1b1b;\n --gds-color-l1-content-secondary: #5e5e5e;\n --gds-color-l1-content-tertiary: #ffffff;\n --gds-color-l2-background-primary: #f3f3f3;\n --gds-color-l2-background-secondary: #ffffff;\n --gds-color-l2-background-tertiary: #242424;\n --gds-color-l2-background-positive: #ecf6ed;\n --gds-color-l2-background-negative: #fcecea;\n --gds-color-l2-background-notice: #eaf0f7;\n --gds-color-l2-background-warning: #fcecbc;\n --gds-color-l2-background-information: #e2e2e2;\n --gds-color-l2-background-copper-01: #f2efeb;\n --gds-color-l2-background-copper-02: #332a18;\n --gds-color-l2-background-purple-01: #f3eff7;\n --gds-color-l2-background-purple-02: #372b40;\n --gds-color-l2-background-green-01: #ecf6ed;\n --gds-color-l2-background-green-02: #1d3f22;\n --gds-color-l2-background-blue-01: #eaf0f7;\n --gds-color-l2-background-blue-02: #152c41;\n --gds-color-l2-content-primary: #1b1b1b;\n --gds-color-l2-content-secondary: #5e5e5e;\n --gds-color-l2-content-tertiary: #ffffff;\n --gds-color-l2-content-positive: #35723d;\n --gds-color-l2-content-negative: #a63e2a;\n --gds-color-l2-content-warning: #65581e;\n --gds-color-l2-content-notice: #005fac;\n --gds-color-l2-content-information: #1b1b1b;\n --gds-color-l2-content-copper-01: #1b1b1b;\n --gds-color-l2-content-copper-02: #ffffff;\n --gds-color-l2-content-purple-01: #1b1b1b;\n --gds-color-l2-content-purple-02: #ffffff;\n --gds-color-l2-content-green-01: #1b1b1b;\n --gds-color-l2-content-green-02: #ffffff;\n --gds-color-l2-content-blue-01: #1b1b1b;\n --gds-color-l2-content-blue-02: #ffffff;\n --gds-color-l2-border-primary: #d7d7d7;\n --gds-color-l2-border-secondary: #6f6f6f;\n --gds-color-l2-border-tertiary: #f9f9f9;\n --gds-color-l2-border-quarternary: #1b1b1b;\n --gds-color-l2-border-inversed: #ffffff;\n --gds-color-l3-background-primary: #1b1b1b;\n --gds-color-l3-background-secondary: #e2e2e2;\n --gds-color-l3-background-tertiary: #d7d7d7;\n --gds-color-l3-background-quarternary: #ffffff;\n --gds-color-l3-background-positive: #35723d;\n --gds-color-l3-background-positive-secondary: #d7edd9;\n --gds-color-l3-background-positive-badge: #d7edd9;\n --gds-color-l3-background-negative: #a63e2a;\n --gds-color-l3-background-negative-secondary: #fcecea;\n --gds-color-l3-background-negative-badge: #f8d6d3;\n --gds-color-l3-background-notice: #005fac;\n --gds-color-l3-background-notice-secondary: #d3dfef;\n --gds-color-l3-background-notice-badge: #d3dfef;\n --gds-color-l3-background-warning: #65581e;\n --gds-color-l3-background-warning-secondary: #fadf7b;\n --gds-color-l3-background-warning-badge: #fadf7b;\n --gds-color-l3-background-information: #1b1b1b;\n --gds-color-l3-background-information-secondary: #d7d7d7;\n --gds-color-l3-background-information-badge: #d7d7d7;\n --gds-color-l3-background-buy: #2e6290;\n --gds-color-l3-background-copper-01: #e4ded5;\n --gds-color-l3-background-copper-02: #42361f;\n --gds-color-l3-background-purple-01: #e7deee;\n --gds-color-l3-background-purple-02: #473752;\n --gds-color-l3-background-green-01: #d7edd9;\n --gds-color-l3-background-green-02: #25512b;\n --gds-color-l3-background-blue-01: #d3dfef;\n --gds-color-l3-background-blue-02: #1a3853;\n --gds-color-l3-background-disabled: #f9f9f9;\n --gds-color-l3-background-disabled-secondary: #f3f3f3;\n --gds-color-l3-content-primary: #ffffff;\n --gds-color-l3-content-secondary: #5e5e5e;\n --gds-color-l3-content-tertiary: #1b1b1b;\n --gds-color-l3-content-notice: #005fac;\n --gds-color-l3-content-warning: #65581e;\n --gds-color-l3-content-information: #1b1b1b;\n --gds-color-l3-content-buy: #ffffff;\n --gds-color-l3-content-copper-01: #1b1b1b;\n --gds-color-l3-content-copper-02: #ffffff;\n --gds-color-l3-content-purple-01: #1b1b1b;\n --gds-color-l3-content-purple-02: #ffffff;\n --gds-color-l3-content-green-01: #1b1b1b;\n --gds-color-l3-content-green-02: #ffffff;\n --gds-color-l3-content-blue-01: #1b1b1b;\n --gds-color-l3-content-blue-02: #ffffff;\n --gds-color-l3-content-disabled: #ababab;\n --gds-color-l3-content-positive: #35723d;\n --gds-color-l3-content-negative: #a63e2a;\n --gds-color-l3-border-primary: #1b1b1b;\n --gds-color-l3-border-secondary: #6f6f6f;\n --gds-color-l3-border-tertiary: #d7d7d7;\n --gds-color-l3-border-negative: #a63e2a;\n --gds-color-l3-states-dark-hover: #ffffff 15%;\n --gds-color-l3-states-dark-pressed: #ffffff 25%;\n --gds-color-l3-states-light-hover: #1b1b1b 10%;\n --gds-color-l3-states-light-pressed: #1b1b1b 20%;\n --gds-color-l3-states-positive-hover: #35723d 10%;\n --gds-color-l3-states-positive-pressed: #35723d 20%;\n --gds-color-l3-states-negative-hover: #a63e2a 10%;\n --gds-color-l3-states-negative-pressed: #a63e2a 20%;\n";
|
|
2
2
|
export default styles;
|
package/tokens/motion.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\n:host {\n --gds-sys-motion-duration-slowest: 1.5s;\n --gds-sys-motion-duration-slow: 1s;\n --gds-sys-motion-duration-default: .5s;\n --gds-sys-motion-duration-fast: .4s;\n --gds-sys-motion-duration-fastest: .2s;\n --gds-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --gds-sys-motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n --gds-sys-motion-easing-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);\n --gds-sys-motion-easing-ease-in: cubic-bezier(0.64, 0, 0.78, 0);\n}\n";
|
|
2
2
|
export default styles;
|
package/tokens/shadow.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\n:host {\n--gds-shadow-xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);\n--gds-shadow-s: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n--gds-shadow-m: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);\n--gds-shadow-l: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);\n--gds-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);\n}\n";
|
|
2
2
|
export default styles;
|
package/tokens/size.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\n:host {\n --gds-space-max: 999px;\n --gds-space-8xl: 120px;\n --gds-space-7xl: 112px;\n --gds-space-6xl: 96px;\n --gds-space-5xl: 80px;\n --gds-space-4xl: 64px;\n --gds-space-3xl: 48px;\n --gds-space-2xl: 40px;\n --gds-space-xl: 32px;\n --gds-space-l: 24px;\n --gds-space-m: 16px;\n --gds-space-s: 12px;\n --gds-space-xs: 8px;\n --gds-space-2xs: 4px;\n --gds-space-3xs: 2px;\n --gds-space-4xs: 1px;\n --gds-space-0: 0px;\n}\n";
|
|
2
2
|
export default styles;
|
package/tokens/text.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n\n:host {\n --gds-text-weight-bold: 700;\n --gds-text-weight-medium: 500;\n --gds-text-weight-book: 450;\n --gds-text-weight-regular: 400;\n --gds-text-weight-light: 300;\n --gds-text-size-preamble-xs: 1rem;\n --gds-text-size-preamble-s: 1.125rem;\n --gds-text-size-preamble-m: 1.25rem;\n --gds-text-size-preamble-l: 1.5rem;\n --gds-text-size-preamble-xl: 1.75rem;\n --gds-text-size-preamble-2xl: 2rem;\n --gds-text-size-display-s: 2rem;\n --gds-text-size-display-m: 2.25rem;\n --gds-text-size-display-l: 3rem;\n --gds-text-size-display-xl: 4rem;\n --gds-text-size-display-2xl: 5.125rem;\n --gds-text-size-body-s: 0.875rem;\n --gds-text-size-body-m: 1rem;\n --gds-text-size-body-l: 1.25rem;\n --gds-text-size-detail-xs: 0.75rem;\n --gds-text-size-detail-s: 0.875rem;\n --gds-text-size-detail-m: 1rem;\n --gds-text-size-heading-2xl: 0.875rem;\n --gds-text-size-heading-2xs: 0.875rem;\n --gds-text-size-heading-xs: 1rem;\n --gds-text-size-heading-s: 1.25rem;\n --gds-text-size-heading-m: 1.5rem;\n --gds-text-size-heading-l: 1.75rem;\n --gds-text-size-heading-xl: 2rem;\n --gds-text-line-height-preamble-xs: 1.5rem;\n --gds-text-line-height-preamble-s: 1.625rem;\n --gds-text-line-height-preamble-m: 1.75rem;\n --gds-text-line-height-preamble-l: 2rem;\n --gds-text-line-height-preamble-xl: 2.25rem;\n --gds-text-line-height-preamble-2xl: 2.5rem;\n --gds-text-line-height-display-s: 2.5rem;\n --gds-text-line-height-display-m: 2.75rem;\n --gds-text-line-height-display-l: 3.5rem;\n --gds-text-line-height-display-xl: 4.5rem;\n --gds-text-line-height-display-2xl: 5.625rem;\n --gds-text-line-height-body-s: 1.25rem;\n --gds-text-line-height-body-m: 1.5rem;\n --gds-text-line-height-body-l: 1.625rem;\n --gds-text-line-height-detail-xs: 1rem;\n --gds-text-line-height-detail-s: 1.125rem;\n --gds-text-line-height-detail-m: 1.25rem;\n --gds-text-line-height-heading-2xs: 1.25rem;\n --gds-text-line-height-heading-xs: 1.5rem;\n --gds-text-line-height-heading-s: 1.75rem;\n --gds-text-line-height-heading-m: 2rem;\n --gds-text-line-height-heading-l: 2.5rem;\n --gds-text-line-height-heading-xl: 2.75rem;\n}\n";
|
|
2
2
|
export default styles;
|