@sebgroup/green-core 1.76.0 → 1.76.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/theme/chlorophyll-tokens.scss.js +1 -1
- package/generated/react/index.d.ts +3 -3
- package/generated/react/index.js +3 -3
- package/package.json +1 -1
- package/primitives/field-base/field-base.component.js +10 -17
- package/primitives/field-base/field-base.styles.js +4 -0
- 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
|
@@ -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 Wed, 16 Apr 2025 10:24:36 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 10:24:36 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 Wed, 16 Apr 2025 11:48:17 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * from './badge/index.js';
|
|
2
2
|
export * from './blur/index.js';
|
|
3
3
|
export * from './button/index.js';
|
|
4
|
-
export * from './calendar/index.js';
|
|
5
4
|
export * from './card/index.js';
|
|
5
|
+
export * from './calendar/index.js';
|
|
6
6
|
export * from './coachmark/index.js';
|
|
7
7
|
export * from './container/index.js';
|
|
8
8
|
export * from './context-menu/index.js';
|
|
@@ -11,8 +11,8 @@ export * from './details/index.js';
|
|
|
11
11
|
export * from './dialog/index.js';
|
|
12
12
|
export * from './div/index.js';
|
|
13
13
|
export * from './divider/index.js';
|
|
14
|
-
export * from './fab/index.js';
|
|
15
14
|
export * from './dropdown/index.js';
|
|
15
|
+
export * from './fab/index.js';
|
|
16
16
|
export * from './filter-chips/index.js';
|
|
17
17
|
export * from './flex/index.js';
|
|
18
18
|
export * from './grid/index.js';
|
|
@@ -50,6 +50,7 @@ export * from './radio-group/index.js';
|
|
|
50
50
|
export * from './segment/index.js';
|
|
51
51
|
export * from './sensitive-account/index.js';
|
|
52
52
|
export * from './sensitive-date/index.js';
|
|
53
|
+
export * from './sensitive-number/index.js';
|
|
53
54
|
export * from './icons/icon-ai/index.js';
|
|
54
55
|
export * from './icons/icon-airplane-up/index.js';
|
|
55
56
|
export * from './icons/icon-archive/index.js';
|
|
@@ -337,4 +338,3 @@ export * from './icons/icon-youtube/index.js';
|
|
|
337
338
|
export * from './icons/icon-zap/index.js';
|
|
338
339
|
export * from './icons/icon-zoom-in/index.js';
|
|
339
340
|
export * from './icons/icon-zoom-out/index.js';
|
|
340
|
-
export * from './sensitive-number/index.js';
|
package/generated/react/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * from "./badge/index.js";
|
|
2
2
|
export * from "./blur/index.js";
|
|
3
3
|
export * from "./button/index.js";
|
|
4
|
-
export * from "./calendar/index.js";
|
|
5
4
|
export * from "./card/index.js";
|
|
5
|
+
export * from "./calendar/index.js";
|
|
6
6
|
export * from "./coachmark/index.js";
|
|
7
7
|
export * from "./container/index.js";
|
|
8
8
|
export * from "./context-menu/index.js";
|
|
@@ -11,8 +11,8 @@ export * from "./details/index.js";
|
|
|
11
11
|
export * from "./dialog/index.js";
|
|
12
12
|
export * from "./div/index.js";
|
|
13
13
|
export * from "./divider/index.js";
|
|
14
|
-
export * from "./fab/index.js";
|
|
15
14
|
export * from "./dropdown/index.js";
|
|
15
|
+
export * from "./fab/index.js";
|
|
16
16
|
export * from "./filter-chips/index.js";
|
|
17
17
|
export * from "./flex/index.js";
|
|
18
18
|
export * from "./grid/index.js";
|
|
@@ -50,6 +50,7 @@ export * from "./radio-group/index.js";
|
|
|
50
50
|
export * from "./segment/index.js";
|
|
51
51
|
export * from "./sensitive-account/index.js";
|
|
52
52
|
export * from "./sensitive-date/index.js";
|
|
53
|
+
export * from "./sensitive-number/index.js";
|
|
53
54
|
export * from "./icons/icon-ai/index.js";
|
|
54
55
|
export * from "./icons/icon-airplane-up/index.js";
|
|
55
56
|
export * from "./icons/icon-archive/index.js";
|
|
@@ -337,4 +338,3 @@ export * from "./icons/icon-youtube/index.js";
|
|
|
337
338
|
export * from "./icons/icon-zap/index.js";
|
|
338
339
|
export * from "./icons/icon-zoom-in/index.js";
|
|
339
340
|
export * from "./icons/icon-zoom-out/index.js";
|
|
340
|
-
export * from "./sensitive-number/index.js";
|
package/package.json
CHANGED
|
@@ -8,7 +8,6 @@ var _handleSlotChange, _renderFieldContents, renderFieldContents_fn, _renderSlot
|
|
|
8
8
|
import { localized } from "@lit/localize";
|
|
9
9
|
import { property, query, state } from "lit/decorators.js";
|
|
10
10
|
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
-
import { map } from "lit/directives/map.js";
|
|
12
11
|
import { GdsElement } from "../../gds-element.js";
|
|
13
12
|
import { gdsCustomElement, html } from "../../scoping.js";
|
|
14
13
|
import { TransitionalStyles } from "../../transitional-styles.js";
|
|
@@ -76,22 +75,16 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
76
75
|
_handleSlotChange = new WeakMap();
|
|
77
76
|
_renderFieldContents = new WeakSet();
|
|
78
77
|
renderFieldContents_fn = function() {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
__privateMethod(this, _renderSlotMain, renderSlotMain_fn).call(this),
|
|
90
|
-
__privateMethod(this, _renderSlotAction, renderSlotAction_fn).call(this),
|
|
91
|
-
__privateMethod(this, _renderSlotTrail, renderSlotTrail_fn).call(this)
|
|
92
|
-
];
|
|
93
|
-
return html`${map(elements, (el) => el)}`;
|
|
94
|
-
}
|
|
78
|
+
const rightSlotsWrapClasses = {
|
|
79
|
+
right: true,
|
|
80
|
+
"as-flex": this.multiline && (this._trailSlotOccupied || this._actionSlotOccupied)
|
|
81
|
+
};
|
|
82
|
+
return html`
|
|
83
|
+
${__privateMethod(this, _renderSlotLead, renderSlotLead_fn).call(this)} ${__privateMethod(this, _renderSlotMain, renderSlotMain_fn).call(this)}
|
|
84
|
+
<div class="${classMap(rightSlotsWrapClasses)}">
|
|
85
|
+
${__privateMethod(this, _renderSlotAction, renderSlotAction_fn).call(this)} ${__privateMethod(this, _renderSlotTrail, renderSlotTrail_fn).call(this)}
|
|
86
|
+
</div>
|
|
87
|
+
`;
|
|
95
88
|
};
|
|
96
89
|
_renderSlotLead = new WeakSet();
|
|
97
90
|
renderSlotLead_fn = function() {
|
package/tokens/dark.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 16 Apr 2025
|
|
1
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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;
|