@sebgroup/green-core 1.76.1 → 1.76.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/components/badge/badge.style.js +3 -3
  2. package/components/button/button.style.css.js +1 -1
  3. package/components/calendar/calendar.styles.js +20 -19
  4. package/components/card/card.component.js +4 -4
  5. package/components/datepicker/datepicker.component.d.ts +4 -0
  6. package/components/datepicker/datepicker.component.js +12 -1
  7. package/components/datepicker/datepicker.styles.js +9 -9
  8. package/components/datepicker/datepicker.trans.styles.scss.js +1 -1
  9. package/components/details/details.styles.js +24 -24
  10. package/components/div/div.component.js +4 -4
  11. package/components/div/div.style.js +3 -3
  12. package/components/divider/divider.component.js +1 -1
  13. package/components/dropdown/dropdown.component.d.ts +4 -0
  14. package/components/dropdown/dropdown.component.js +13 -5
  15. package/components/dropdown/dropdown.styles.js +10 -10
  16. package/components/fab/fab.styles.js +2 -2
  17. package/components/flex/flex.styles.js +1 -1
  18. package/components/img/img.component.js +1 -1
  19. package/components/link/link.styles.js +1 -1
  20. package/components/menu-button/menu-button.styles.js +10 -10
  21. package/components/radio/radio-group/radio-group.component.js +4 -1
  22. package/components/radio/radio-group/radio-group.styles.js +35 -35
  23. package/components/radio/radio.styles.js +2 -2
  24. package/components/rich-text/rich-text.styles.js +31 -30
  25. package/components/segmented-control/segment/segment.style.css.js +1 -1
  26. package/components/segmented-control/segmented-control.style.css.js +1 -1
  27. package/components/select/select.component.d.ts +4 -0
  28. package/components/select/select.component.js +19 -4
  29. package/components/signal/signal.style.js +1 -1
  30. package/components/spacer/spacer.component.js +1 -1
  31. package/components/spinner/spinner.styles.js +4 -4
  32. package/components/text/default-typography.styles.js +22 -22
  33. package/components/text/text.component.js +3 -3
  34. package/components/textarea/textarea.component.d.ts +4 -0
  35. package/components/textarea/textarea.component.js +12 -1
  36. package/components/textarea/textarea.styles.js +3 -1
  37. package/components/theme/chlorophyll-tokens.scss.js +1 -1
  38. package/components/video/video.component.js +1 -1
  39. package/generated/locales/da.d.ts +0 -1
  40. package/generated/locales/da.js +0 -1
  41. package/generated/locales/de.d.ts +0 -1
  42. package/generated/locales/de.js +0 -1
  43. package/generated/locales/fi.d.ts +0 -1
  44. package/generated/locales/fi.js +0 -1
  45. package/generated/locales/fr.d.ts +0 -1
  46. package/generated/locales/fr.js +0 -1
  47. package/generated/locales/it.d.ts +0 -1
  48. package/generated/locales/it.js +0 -1
  49. package/generated/locales/nl.d.ts +0 -1
  50. package/generated/locales/nl.js +0 -1
  51. package/generated/locales/no.d.ts +0 -1
  52. package/generated/locales/no.js +0 -1
  53. package/generated/locales/sv.d.ts +0 -1
  54. package/generated/locales/sv.js +0 -1
  55. package/generated/react/datepicker/index.d.ts +1 -0
  56. package/generated/react/dropdown/index.d.ts +1 -0
  57. package/generated/react/index.d.ts +2 -2
  58. package/generated/react/index.js +2 -2
  59. package/generated/react/select/index.d.ts +1 -0
  60. package/generated/react/textarea/index.d.ts +1 -0
  61. package/package.json +1 -1
  62. package/primitives/field-base/field-base.styles.js +36 -35
  63. package/primitives/field-base/field-base.trans.styles.scss.js +1 -1
  64. package/primitives/form-control-footer/form-control-footer.styles.js +9 -9
  65. package/primitives/form-control-header/form-control-header.styles.js +13 -12
  66. package/primitives/listbox/option.styles.js +18 -18
  67. package/primitives/menu/menu-heading.styles.js +6 -6
  68. package/primitives/ripple/ripple.styles.scss.js +1 -1
  69. package/primitives/selection-controls/selection-field-label.styles.js +3 -3
  70. package/shared-styles/form-control-host.style.js +11 -11
  71. package/tokens/variables.css.js +2 -0
  72. package/tokens/variables.dark.css.js +2 -0
  73. package/tokens/variables.light.css.js +2 -0
  74. package/tokens.style.d.ts +2 -2
  75. package/tokens.style.js +5 -12
  76. package/utils/decorators/style-expression-property.d.ts +1 -1
  77. package/utils/helpers/custom-element-scoping.js +1 -1
  78. package/utils/helpers/style-expression-helpers.js +4 -4
  79. package/tokens/dark.css.js +0 -2
  80. package/tokens/light.css.js +0 -2
  81. package/tokens/motion.css.js +0 -2
  82. package/tokens/shadow.css.js +0 -2
  83. package/tokens/size.css.js +0 -2
  84. package/tokens/text.css.js +0 -2
package/components/theme/chlorophyll-tokens.scss.js CHANGED
@@ -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 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}";
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, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\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-ref-pallet-base300);\n --gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);\n --gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-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-l1-background-primary: #ffffff;\n --gds-sys-color-l1-background-tertiary: #1b1b1b;\n --gds-sys-color-l1-background-secondary: #eeeeee;\n --gds-sys-color-l1-content-positive: #35723d;\n --gds-sys-color-l1-content-negative: #a63e2a;\n --gds-sys-color-l1-content-primary: #1b1b1b;\n --gds-sys-color-l1-content-secondary: #5e5e5e;\n --gds-sys-color-l1-content-tertiary: #ffffff;\n --gds-sys-color-l2-background-primary: #f3f3f3;\n --gds-sys-color-l2-background-secondary: #ffffff;\n --gds-sys-color-l2-background-tertiary: #242424;\n --gds-sys-color-l2-background-positive: #ecf6ed;\n --gds-sys-color-l2-background-negative: #fcecea;\n --gds-sys-color-l2-background-notice: #eaf0f7;\n --gds-sys-color-l2-background-warning: #fcecbc;\n --gds-sys-color-l2-background-information: #e2e2e2;\n --gds-sys-color-l2-background-copper-01: #f2efeb;\n --gds-sys-color-l2-background-copper-02: #332a18;\n --gds-sys-color-l2-background-purple-01: #f3eff7;\n --gds-sys-color-l2-background-purple-02: #372b40;\n --gds-sys-color-l2-background-green-01: #ecf6ed;\n --gds-sys-color-l2-background-green-02: #1d3f22;\n --gds-sys-color-l2-background-blue-01: #eaf0f7;\n --gds-sys-color-l2-background-blue-02: #152c41;\n --gds-sys-color-l2-content-primary: #1b1b1b;\n --gds-sys-color-l2-content-secondary: #5e5e5e;\n --gds-sys-color-l2-content-tertiary: #ffffff;\n --gds-sys-color-l2-content-positive: #35723d;\n --gds-sys-color-l2-content-negative: #a63e2a;\n --gds-sys-color-l2-content-warning: #65581e;\n --gds-sys-color-l2-content-notice: #005fac;\n --gds-sys-color-l2-content-information: #1b1b1b;\n --gds-sys-color-l2-content-copper-01: #1b1b1b;\n --gds-sys-color-l2-content-copper-02: #ffffff;\n --gds-sys-color-l2-content-purple-01: #1b1b1b;\n --gds-sys-color-l2-content-purple-02: #ffffff;\n --gds-sys-color-l2-content-green-01: #1b1b1b;\n --gds-sys-color-l2-content-green-02: #ffffff;\n --gds-sys-color-l2-content-blue-01: #1b1b1b;\n --gds-sys-color-l2-content-blue-02: #ffffff;\n --gds-sys-color-l2-border-primary: #d7d7d7;\n --gds-sys-color-l2-border-secondary: #6f6f6f;\n --gds-sys-color-l2-border-tertiary: #f9f9f9;\n --gds-sys-color-l2-border-quarternary: #1b1b1b;\n --gds-sys-color-l2-border-inversed: #ffffff;\n --gds-sys-color-l3-background-primary: #003824;\n --gds-sys-color-l3-background-secondary: #e2e2e2;\n --gds-sys-color-l3-background-tertiary: #d7d7d7;\n --gds-sys-color-l3-background-quarternary: #ffffff;\n --gds-sys-color-l3-background-positive: #35723d;\n --gds-sys-color-l3-background-positive-secondary: #d7edd9;\n --gds-sys-color-l3-background-positive-badge: #d7edd9;\n --gds-sys-color-l3-background-negative: #a63e2a;\n --gds-sys-color-l3-background-negative-secondary: #fcecea;\n --gds-sys-color-l3-background-negative-badge: #f8d6d3;\n --gds-sys-color-l3-background-notice: #005fac;\n --gds-sys-color-l3-background-notice-secondary: #d3dfef;\n --gds-sys-color-l3-background-notice-badge: #d3dfef;\n --gds-sys-color-l3-background-warning: #65581e;\n --gds-sys-color-l3-background-warning-secondary: #fadf7b;\n --gds-sys-color-l3-background-warning-badge: #fadf7b;\n --gds-sys-color-l3-background-information: #1b1b1b;\n --gds-sys-color-l3-background-information-secondary: #d7d7d7;\n --gds-sys-color-l3-background-information-badge: #d7d7d7;\n --gds-sys-color-l3-background-buy: #2e6290;\n --gds-sys-color-l3-background-copper-01: #e4ded5;\n --gds-sys-color-l3-background-copper-02: #42361f;\n --gds-sys-color-l3-background-purple-01: #e7deee;\n --gds-sys-color-l3-background-purple-02: #473752;\n --gds-sys-color-l3-background-green-01: #d7edd9;\n --gds-sys-color-l3-background-green-02: #25512b;\n --gds-sys-color-l3-background-blue-01: #d3dfef;\n --gds-sys-color-l3-background-blue-02: #1a3853;\n --gds-sys-color-l3-background-disabled: #f9f9f9;\n --gds-sys-color-l3-background-disabled-secondary: #f3f3f3;\n --gds-sys-color-l3-content-primary: #ffffff;\n --gds-sys-color-l3-content-secondary: #5e5e5e;\n --gds-sys-color-l3-content-tertiary: #1b1b1b;\n --gds-sys-color-l3-content-notice: #005fac;\n --gds-sys-color-l3-content-warning: #65581e;\n --gds-sys-color-l3-content-information: #1b1b1b;\n --gds-sys-color-l3-content-buy: #ffffff;\n --gds-sys-color-l3-content-copper-01: #1b1b1b;\n --gds-sys-color-l3-content-copper-02: #ffffff;\n --gds-sys-color-l3-content-purple-01: #1b1b1b;\n --gds-sys-color-l3-content-purple-02: #ffffff;\n --gds-sys-color-l3-content-green-01: #1b1b1b;\n --gds-sys-color-l3-content-green-02: #ffffff;\n --gds-sys-color-l3-content-blue-01: #1b1b1b;\n --gds-sys-color-l3-content-blue-02: #ffffff;\n --gds-sys-color-l3-content-disabled: #ababab;\n --gds-sys-color-l3-content-positive: #35723d;\n --gds-sys-color-l3-content-negative: #a63e2a;\n --gds-sys-color-l3-border-primary: #1b1b1b;\n --gds-sys-color-l3-border-secondary: #6f6f6f;\n --gds-sys-color-l3-border-tertiary: #d7d7d7;\n --gds-sys-color-l3-border-negative: #a63e2a;\n --gds-sys-color-l3-states-dark-hover: rgba(255, 255, 255, 0.15);\n --gds-sys-color-l3-states-dark-pressed: rgba(255, 255, 255, 0.25);\n --gds-sys-color-l3-states-light-hover: rgba(27, 27, 27, 0.1);\n --gds-sys-color-l3-states-light-pressed: rgba(27, 27, 27, 0.2);\n --gds-sys-color-l3-states-positive-hover: rgba(53, 114, 61, 0.1);\n --gds-sys-color-l3-states-positive-pressed: rgba(53, 114, 61, 0.2);\n --gds-sys-color-l3-states-negative-hover: rgba(166, 62, 42, 0.1);\n --gds-sys-color-l3-states-negative-pressed: rgba(166, 62, 42, 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-l1-background-primary: #0e0e0e;\n --gds-sys-color-l1-background-tertiary: #d7d7d7;\n --gds-sys-color-l1-background-secondary: #131313;\n --gds-sys-color-l1-content-positive: #54b561;\n --gds-sys-color-l1-content-negative: #a63e2a;\n --gds-sys-color-l1-content-primary: #d7d7d7;\n --gds-sys-color-l1-content-secondary: #ababab;\n --gds-sys-color-l1-content-tertiary: #1b1b1b;\n --gds-sys-color-l2-background-primary: #242424;\n --gds-sys-color-l2-background-secondary: #242424;\n --gds-sys-color-l2-background-tertiary: #d7d7d7;\n --gds-sys-color-l2-background-positive: #1d3f22;\n --gds-sys-color-l2-background-negative: #4a1c13;\n --gds-sys-color-l2-background-notice: #152c41;\n --gds-sys-color-l2-background-warning: #4c3212;\n --gds-sys-color-l2-background-information: #353535;\n --gds-sys-color-l2-background-copper-01: #f2efeb;\n --gds-sys-color-l2-background-copper-02: #332a18;\n --gds-sys-color-l2-background-purple-01: #f3eff7;\n --gds-sys-color-l2-background-purple-02: #372b40;\n --gds-sys-color-l2-background-green-01: #ecf6ed;\n --gds-sys-color-l2-background-green-02: #1d3f22;\n --gds-sys-color-l2-background-blue-01: #eaf0f7;\n --gds-sys-color-l2-background-blue-02: #152c41;\n --gds-sys-color-l2-content-primary: #d7d7d7;\n --gds-sys-color-l2-content-secondary: #ababab;\n --gds-sys-color-l2-content-tertiary: #1b1b1b;\n --gds-sys-color-l2-content-positive: #54b561;\n --gds-sys-color-l2-content-negative: #ee8375;\n --gds-sys-color-l2-content-warning: #f3b274;\n --gds-sys-color-l2-content-notice: #78a3d5;\n --gds-sys-color-l2-content-information: #d7d7d7;\n --gds-sys-color-l2-content-copper-01: #1b1b1b;\n --gds-sys-color-l2-content-copper-02: #ffffff;\n --gds-sys-color-l2-content-purple-01: #1b1b1b;\n --gds-sys-color-l2-content-purple-02: #ffffff;\n --gds-sys-color-l2-content-green-01: #1b1b1b;\n --gds-sys-color-l2-content-green-02: #ffffff;\n --gds-sys-color-l2-content-blue-01: #1b1b1b;\n --gds-sys-color-l2-content-blue-02: #ffffff;\n --gds-sys-color-l2-border-primary: #353535;\n --gds-sys-color-l2-border-secondary: #5e5e5e;\n --gds-sys-color-l2-border-tertiary: #2c2c2c;\n --gds-sys-color-l2-border-quarternary: #d7d7d7;\n --gds-sys-color-l2-border-inversed: #1b1b1b;\n --gds-sys-color-l3-background-primary: #d7d7d7;\n --gds-sys-color-l3-background-secondary: #353535;\n --gds-sys-color-l3-background-tertiary: #424242;\n --gds-sys-color-l3-background-quarternary: #0e0e0e;\n --gds-sys-color-l3-background-positive: #54b561;\n --gds-sys-color-l3-background-positive-secondary: #25512b;\n --gds-sys-color-l3-background-positive-badge: #306938;\n --gds-sys-color-l3-background-negative: #c04831;\n --gds-sys-color-l3-background-negative-secondary: #602418;\n --gds-sys-color-l3-background-negative-badge: #4a1c13;\n --gds-sys-color-l3-background-notice: #78a3d5;\n --gds-sys-color-l3-background-notice-secondary: #1a3853;\n --gds-sys-color-l3-background-notice-badge: #214769;\n --gds-sys-color-l3-background-warning: #f3b274;\n --gds-sys-color-l3-background-warning-secondary: #624017;\n --gds-sys-color-l3-background-warning-badge: #744c1b;\n --gds-sys-color-l3-background-information: #d7d7d7;\n --gds-sys-color-l3-background-information-secondary: #424242;\n --gds-sys-color-l3-background-information-badge: #616161;\n --gds-sys-color-l3-background-buy: #3571a6;\n --gds-sys-color-l3-background-copper-01: #e4ded5;\n --gds-sys-color-l3-background-copper-02: #42361f;\n --gds-sys-color-l3-background-purple-01: #e7deee;\n --gds-sys-color-l3-background-purple-02: #473752;\n --gds-sys-color-l3-background-green-01: #d7edd9;\n --gds-sys-color-l3-background-green-02: #25512b;\n --gds-sys-color-l3-background-blue-01: #d3dfef;\n --gds-sys-color-l3-background-blue-02: #1a3853;\n --gds-sys-color-l3-background-disabled: #181818;\n --gds-sys-color-l3-background-disabled-secondary: #1b1b1b;\n --gds-sys-color-l3-content-primary: #1b1b1b;\n --gds-sys-color-l3-content-secondary: #ababab;\n --gds-sys-color-l3-content-tertiary: #d7d7d7;\n --gds-sys-color-l3-content-notice: #78a3d5;\n --gds-sys-color-l3-content-warning: #f3b274;\n --gds-sys-color-l3-content-information: #d7d7d7;\n --gds-sys-color-l3-content-buy: #ffffff;\n --gds-sys-color-l3-content-copper-01: #1b1b1b;\n --gds-sys-color-l3-content-copper-02: #ffffff;\n --gds-sys-color-l3-content-purple-01: #1b1b1b;\n --gds-sys-color-l3-content-purple-02: #ffffff;\n --gds-sys-color-l3-content-green-01: #1b1b1b;\n --gds-sys-color-l3-content-green-02: #ffffff;\n --gds-sys-color-l3-content-blue-01: #1b1b1b;\n --gds-sys-color-l3-content-blue-02: #ffffff;\n --gds-sys-color-l3-content-disabled: #5e5e5e;\n --gds-sys-color-l3-content-positive: #54b561;\n --gds-sys-color-l3-content-negative: #ee8375;\n --gds-sys-color-l3-border-primary: #d7d7d7;\n --gds-sys-color-l3-border-secondary: #ababab;\n --gds-sys-color-l3-border-tertiary: #1b1b1b;\n --gds-sys-color-l3-border-negative: #ee8375;\n --gds-sys-color-l3-states-dark-hover: rgba(255, 255, 255, 0.15);\n --gds-sys-color-l3-states-dark-pressed: rgba(255, 255, 255, 0.25);\n --gds-sys-color-l3-states-light-hover: rgba(215, 215, 215, 0.1);\n --gds-sys-color-l3-states-light-pressed: rgba(215, 215, 215, 0.2);\n --gds-sys-color-l3-states-positive-hover: rgba(84, 181, 97, 0.1);\n --gds-sys-color-l3-states-positive-pressed: rgba(84, 181, 97, 0.2);\n --gds-sys-color-l3-states-negative-hover: rgba(238, 131, 117, 0.1);\n --gds-sys-color-l3-states-negative-pressed: rgba(238, 131, 117, 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;
package/components/video/video.component.js CHANGED
@@ -64,7 +64,7 @@ __decorateClass([
64
64
  ], GdsVideo.prototype, "pointer-events", 2);
65
65
  __decorateClass([
66
66
  styleExpressionProperty({
67
- valueTemplate: (v) => `var(--gds-space-${v})`
67
+ valueTemplate: (v) => `var(--gds-sys-space-${v})`
68
68
  })
69
69
  ], GdsVideo.prototype, "border-radius", 2);
70
70
  __decorateClass([
package/generated/locales/da.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/da.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `November`,
11
11
  "s2ceb11be2290bb1b": `Annuller`,
12
12
  "s39938ecdae568740": `September`,
13
- "s3b151ca64eb26ec1": `Udvide`,
14
13
  "s407a88a592a0987c": `August`,
15
14
  "s46d6587089bd0356": `N\xE6ste m\xE5ned`,
16
15
  "s49730f3d5751a433": `Indl\xE6ser...`,
package/generated/locales/de.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/de.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `November`,
11
11
  "s2ceb11be2290bb1b": `Abbrechen`,
12
12
  "s39938ecdae568740": `September`,
13
- "s3b151ca64eb26ec1": `Expandieren`,
14
13
  "s407a88a592a0987c": `August`,
15
14
  "s46d6587089bd0356": `N\xE4chster Monat`,
16
15
  "s49730f3d5751a433": `Laden...`,
package/generated/locales/fi.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/fi.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `Marraskuu`,
11
11
  "s2ceb11be2290bb1b": `Peruuta`,
12
12
  "s39938ecdae568740": `Syys`,
13
- "s3b151ca64eb26ec1": `Laajentaa`,
14
13
  "s407a88a592a0987c": `Elokuu`,
15
14
  "s46d6587089bd0356": `Seuraava kuukausi`,
16
15
  "s49730f3d5751a433": `Ladataan...`,
package/generated/locales/fr.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/fr.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `Novembre`,
11
11
  "s2ceb11be2290bb1b": `Annuler`,
12
12
  "s39938ecdae568740": `Septembre`,
13
- "s3b151ca64eb26ec1": `D\xE9velopper`,
14
13
  "s407a88a592a0987c": `Ao\xFBt`,
15
14
  "s46d6587089bd0356": `Mois suivant`,
16
15
  "s49730f3d5751a433": `Chargement...`,
package/generated/locales/it.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/it.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `Novembre`,
11
11
  "s2ceb11be2290bb1b": `Annulla`,
12
12
  "s39938ecdae568740": `Settembre`,
13
- "s3b151ca64eb26ec1": `Espandere`,
14
13
  "s407a88a592a0987c": `Agosto`,
15
14
  "s46d6587089bd0356": `Mese successivo`,
16
15
  "s49730f3d5751a433": `Caricamento...`,
package/generated/locales/nl.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/nl.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `November`,
11
11
  "s2ceb11be2290bb1b": `Annuleren`,
12
12
  "s39938ecdae568740": `September`,
13
- "s3b151ca64eb26ec1": `Uitbreiden`,
14
13
  "s407a88a592a0987c": `Augustus`,
15
14
  "s46d6587089bd0356": `Volgende maand`,
16
15
  "s49730f3d5751a433": `Laden...`,
package/generated/locales/no.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/no.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `November`,
11
11
  "s2ceb11be2290bb1b": `Avbryt`,
12
12
  "s39938ecdae568740": `September`,
13
- "s3b151ca64eb26ec1": `Utvide`,
14
13
  "s407a88a592a0987c": `August`,
15
14
  "s46d6587089bd0356": `Neste m\xE5ned`,
16
15
  "s49730f3d5751a433": `Laster...`,
package/generated/locales/sv.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const templates: {
8
8
  s281846ef0421c71f: string;
9
9
  s2ceb11be2290bb1b: string;
10
10
  s39938ecdae568740: string;
11
- s3b151ca64eb26ec1: string;
12
11
  s407a88a592a0987c: string;
13
12
  s46d6587089bd0356: string;
14
13
  s49730f3d5751a433: string;
package/generated/locales/sv.js CHANGED
@@ -10,7 +10,6 @@ const templates = {
10
10
  "s281846ef0421c71f": `November`,
11
11
  "s2ceb11be2290bb1b": `Avbryt`,
12
12
  "s39938ecdae568740": `September`,
13
- "s3b151ca64eb26ec1": `Expandera`,
14
13
  "s407a88a592a0987c": `Augusti`,
15
14
  "s46d6587089bd0356": `N\xE4sta m\xE5nad`,
16
15
  "s49730f3d5751a433": `Laddar...`,
package/generated/react/datepicker/index.d.ts CHANGED
@@ -30,6 +30,7 @@ export declare const GdsDatepicker: (props: React.ComponentProps<ReturnType<type
30
30
  dateformat?: string | undefined;
31
31
  disabledWeekends?: boolean | undefined;
32
32
  disabledDates?: Date[] | undefined;
33
+ showExtendedSupportingText?: boolean | undefined;
33
34
  getFocusedDate?: (() => Promise<Date | undefined>) | undefined;
34
35
  readonly displayValue?: string | undefined;
35
36
  test_calendarButton?: Promise<HTMLButtonElement> | undefined;
package/generated/react/dropdown/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare const GdsDropdown: (props: React.ComponentProps<ReturnType<typeof
15
15
  hideLabel?: boolean | undefined;
16
16
  plain?: boolean | undefined;
17
17
  disableMobileStyles?: boolean | undefined;
18
+ showExtendedSupportingText?: boolean | undefined;
18
19
  readonly options?: import("../../../primitives/listbox/option.component").GdsOption[] | undefined;
19
20
  readonly placeholder?: import("../../../primitives/listbox/option.component").GdsOption | undefined;
20
21
  readonly displayValue?: string | undefined;
package/generated/react/index.d.ts 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 './card/index.js';
5
4
  export * from './calendar/index.js';
5
+ export * from './card/index.js';
6
6
  export * from './coachmark/index.js';
7
7
  export * from './container/index.js';
8
8
  export * from './context-menu/index.js';
@@ -21,8 +21,8 @@ export * from './list-item/index.js';
21
21
  export * from './icons/icon/index.js';
22
22
  export * from './img/index.js';
23
23
  export * from './input/index.js';
24
- export * from './link/index.js';
25
24
  export * from './mask/index.js';
25
+ export * from './link/index.js';
26
26
  export * from './menu-button/index.js';
27
27
  export * from './backdrop/index.js';
28
28
  export * from './popover/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 "./card/index.js";
5
4
  export * from "./calendar/index.js";
5
+ export * from "./card/index.js";
6
6
  export * from "./coachmark/index.js";
7
7
  export * from "./container/index.js";
8
8
  export * from "./context-menu/index.js";
@@ -21,8 +21,8 @@ export * from "./list-item/index.js";
21
21
  export * from "./icons/icon/index.js";
22
22
  export * from "./img/index.js";
23
23
  export * from "./input/index.js";
24
- export * from "./link/index.js";
25
24
  export * from "./mask/index.js";
25
+ export * from "./link/index.js";
26
26
  export * from "./menu-button/index.js";
27
27
  export * from "./backdrop/index.js";
28
28
  export * from "./popover/index.js";
package/generated/react/select/index.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare const GdsSelect: (props: React.ComponentProps<ReturnType<typeof g
18
18
  'margin-inline'?: string | undefined;
19
19
  'margin-block'?: string | undefined;
20
20
  supportingText?: string | undefined;
21
+ showExtendedSupportingText?: boolean | undefined;
21
22
  size?: "small" | "large" | undefined;
22
23
  plain?: boolean | undefined;
23
24
  selectElement?: HTMLSelectElement | undefined;
package/generated/react/textarea/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
21
21
  supportingText?: string | undefined;
22
22
  clearable?: boolean | undefined;
23
23
  resizable?: "auto" | "false" | "manual" | undefined;
24
+ showExtendedSupportingText?: boolean | undefined;
24
25
  maxlength?: number | undefined;
25
26
  size?: "small" | "large" | undefined;
26
27
  plain?: boolean | undefined;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sebgroup/green-core",
3
3
  "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
4
- "version": "1.76.1",
4
+ "version": "1.76.3",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
7
7
  "type": "module",
package/primitives/field-base/field-base.styles.js CHANGED
@@ -21,17 +21,18 @@ const styles = css`
21
21
  position: relative;
22
22
  align-items: center;
23
23
  justify-content: space-between;
24
- gap: var(--gds-space-xs);
25
- padding-block: var(--gds-space-xs);
26
- padding-inline: var(--gds-space-m) var(--gds-space-s);
27
- min-block-size: var(--gds-space-3xl);
28
- block-size: var(--gds-space-3xl);
24
+ gap: var(--gds-sys-space-xs);
25
+ padding-block: var(--gds-sys-space-xs);
26
+ padding-inline: var(--gds-sys-space-m) var(--gds-sys-space-s);
27
+ min-block-size: var(--gds-sys-space-3xl);
28
+ block-size: var(--gds-sys-space-3xl);
29
29
  outline-style: solid;
30
30
  outline-width: 0;
31
- border-radius: var(--gds-space-xs);
32
- background: var(--gds-color-l3-background-secondary);
33
- color: var(--gds-color-l3-content-tertiary);
34
- border: var(--gds-space-4xs) solid var(--gds-color-l3-border-secondary);
31
+ border-radius: var(--gds-sys-space-xs);
32
+ background: var(--gds-sys-color-l3-background-secondary);
33
+ color: var(--gds-sys-color-l3-content-tertiary);
34
+ border: var(--gds-sys-space-4xs) solid
35
+ var(--gds-sys-color-l3-border-secondary);
35
36
  cursor: text;
36
37
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
37
38
  transition-duration: 368ms;
@@ -44,57 +45,57 @@ const styles = css`
44
45
  .right.as-flex {
45
46
  display: flex;
46
47
  position: absolute;
47
- gap: var(--gds-space-xs);
48
- right: var(--gds-space-s);
49
- top: var(--gds-space-xs);
48
+ gap: var(--gds-sys-space-xs);
49
+ right: var(--gds-sys-space-s);
50
+ top: var(--gds-sys-space-xs);
50
51
  block-size: max-content;
51
52
  }
52
53
  }
53
54
 
54
55
  .field.lead-slot-occupied {
55
- padding-inline-start: var(--gds-space-s);
56
+ padding-inline-start: var(--gds-sys-space-s);
56
57
  }
57
58
 
58
59
  .field.action-slot-occupied:not(.trail-slot-occupied) {
59
- padding-inline-end: var(--gds-space-s);
60
+ padding-inline-end: var(--gds-sys-space-s);
60
61
 
61
62
  &.small {
62
- padding-inline-end: var(--gds-space-xs);
63
+ padding-inline-end: var(--gds-sys-space-xs);
63
64
  }
64
65
  }
65
66
 
66
67
  .field:focus-within {
67
- outline-width: var(--gds-space-3xs);
68
- outline-offset: var(--gds-space-3xs);
68
+ outline-width: var(--gds-sys-space-3xs);
69
+ outline-offset: var(--gds-sys-space-3xs);
69
70
  outline-color: currentColor;
70
71
  border-color: currentColor;
71
72
  }
72
73
 
73
74
  .field.small {
74
- gap: var(--gds-space-2xs);
75
- padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs);
76
- min-block-size: var(--gds-space-xl);
77
- block-size: var(--gds-space-xl);
75
+ gap: var(--gds-sys-space-2xs);
76
+ padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs);
77
+ min-block-size: var(--gds-sys-space-xl);
78
+ block-size: var(--gds-sys-space-xl);
78
79
  }
79
80
 
80
81
  .field.multiline {
81
82
  align-items: flex-start;
82
- padding: var(--gds-space-s);
83
- padding-inline-start: var(--gds-space-m);
83
+ padding: var(--gds-sys-space-s);
84
+ padding-inline-start: var(--gds-sys-space-m);
84
85
  height: max-content;
85
86
  }
86
87
 
87
88
  .field.disabled {
88
- background: var(--gds-color-l3-background-disabled);
89
- color: var(--gds-color-l3-content-disabled);
89
+ background: var(--gds-sys-color-l3-background-disabled);
90
+ color: var(--gds-sys-color-l3-content-disabled);
90
91
  border-color: transparent;
91
92
  pointer-events: none;
92
93
  }
93
94
 
94
95
  .field.invalid {
95
- background: var(--gds-color-l3-background-negative-secondary);
96
- border-color: var(--gds-color-l3-border-negative);
97
- color: var(--gds-color-l3-content-negative);
96
+ background: var(--gds-sys-color-l3-background-negative-secondary);
97
+ border-color: var(--gds-sys-color-l3-border-negative);
98
+ color: var(--gds-sys-color-l3-content-negative);
98
99
  }
99
100
 
100
101
  slot:not([name])::slotted(*) {
@@ -103,7 +104,7 @@ const styles = css`
103
104
 
104
105
  .main-slot-wrap {
105
106
  display: flex;
106
- gap: var(--gds-space-xs);
107
+ gap: var(--gds-sys-space-xs);
107
108
  flex: 1;
108
109
  }
109
110
 
@@ -115,16 +116,16 @@ const styles = css`
115
116
  .field:hover {
116
117
  background: color-mix(
117
118
  in srgb,
118
- var(--gds-color-l3-background-secondary),
119
- var(--gds-color-l3-states-light-hover)
119
+ var(--gds-sys-color-l3-background-secondary),
120
+ var(--gds-sys-color-l3-states-light-hover)
120
121
  );
121
122
  }
122
123
 
123
124
  .field.invalid:hover {
124
125
  background: color-mix(
125
126
  in srgb,
126
- var(--gds-color-l3-background-negative-secondary),
127
- var(--gds-color-l3-states-negative-hover)
127
+ var(--gds-sys-color-l3-background-negative-secondary),
128
+ var(--gds-sys-color-l3-states-negative-hover)
128
129
  );
129
130
  }
130
131
  }
@@ -133,8 +134,8 @@ const styles = css`
133
134
  align-items: center;
134
135
  justify-content: center;
135
136
  display: flex;
136
- inline-size: var(--gds-space-l);
137
- block-size: var(--gds-space-l);
137
+ inline-size: var(--gds-sys-space-l);
138
+ block-size: var(--gds-sys-space-l);
138
139
  }
139
140
 
140
141
  .multiline slot[name='action']::slotted([gds-element]) {
package/primitives/field-base/field-base.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\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 */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .field {\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n --border-color: var(--sg-border-color);\n align-items: stretch;\n gap: var(--gds-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs) calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n min-block-size: 44px;\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field:hover {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-space-s) - 1px) var(--gds-space-s) calc(var(--gds-space-s) - 1px) var(--gds-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-color-l3-border-negative);\n color: var(--gds-color-l3-content-negative);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-color-l3-background-disabled);\n color: var(--gds-color-l3-content-disabled);\n border-color: transparent;\n pointer-events: none;\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-space-l);\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\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 */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .field {\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n --border-color: var(--sg-border-color);\n align-items: stretch;\n gap: var(--gds-sys-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n min-block-size: 44px;\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field:hover {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-sys-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-sys-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-sys-color-l3-border-negative);\n color: var(--gds-sys-color-l3-content-negative);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-sys-color-l3-background-disabled);\n color: var(--gds-sys-color-l3-content-disabled);\n border-color: transparent;\n pointer-events: none;\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-sys-space-l);\n }\n}";
2
2
  export default styles;
package/primitives/form-control-footer/form-control-footer.styles.js CHANGED
@@ -7,17 +7,17 @@ const styles = css`
7
7
  display: flex;
8
8
  justify-content: space-between;
9
9
  align-items: center;
10
- gap: var(--gds-space-xl);
10
+ gap: var(--gds-sys-space-xl);
11
11
  }
12
12
 
13
13
  .error-message {
14
14
  display: flex;
15
15
  align-items: flex-start;
16
- gap: var(--gds-space-xs);
17
- margin-top: var(--gds-space-2xs);
18
- font-weight: var(--gds-text-weight-book);
19
- font-size: var(--gds-text-size-detail-s);
20
- color: var(--gds-color-l3-content-negative);
16
+ gap: var(--gds-sys-space-xs);
17
+ margin-top: var(--gds-sys-space-2xs);
18
+ font-weight: var(--gds-sys-text-weight-book);
19
+ font-size: var(--gds-sys-text-size-detail-s);
20
+ color: var(--gds-sys-color-l3-content-negative);
21
21
  }
22
22
 
23
23
  [gds-element^='gds-icon'] {
@@ -27,9 +27,9 @@ const styles = css`
27
27
 
28
28
  :host(.size-small) {
29
29
  & .error-message {
30
- font-size: var(--gds-text-size-detail-xs);
31
- line-height: var(--gds-text-line-height-detail-s);
32
- gap: var(--gds-space-2xs);
30
+ font-size: var(--gds-sys-text-size-detail-xs);
31
+ line-height: var(--gds-sys-text-line-height-detail-s);
32
+ gap: var(--gds-sys-space-2xs);
33
33
  }
34
34
  & [gds-element^='gds-icon'] {
35
35
  width: 16px;