@kong/design-tokens 2.0.2-pr.682.fe83971.0 → 3.0.0

package/README.md

@@ -21,6 +21,7 @@ Kong Design Tokens for Konnect, via [Style Dictionary](https://github.com/amzn/s
   - [Directory structure](#directory-structure)
   - [Token Requirements](#token-requirements)
   - [Creating a new theme](#creating-a-new-theme)
+  - [Previewing a theme](#previewing-a-theme)
   - [Theme `$description` authoring rules](#theme-description-authoring-rules)
   - [Development Sandbox](#development-sandbox)
   - [Lint and fix](#lint-and-fix)
@@ -513,7 +514,46 @@ an empty slot to fill), or `pnpm themes:unfilled <name>` to check what any one t
 > `themes:sync` / `themes:unfilled` commands directly rather than duplicating their logic, so
 > renaming or restructuring those commands (`scripts/theme-scaffold.mjs`, `scripts/themes-sync.mjs`,
 > `scripts/themes-unfilled.mjs`) only needs updating in one place — the skill won't silently drift
-> out of sync with them.
+> out of sync with them. The relationship runs the other way for previewing: `theme:preview` (see
+> [Previewing a theme](#previewing-a-theme)) is this package aliasing *into* the skill's own
+> `scripts/preview.mjs`, not the reverse — that script is a verification tool owned by the skill.
+
+### Previewing a theme
+
+`pnpm theme:preview -- <name> [<name>...] [--port 8747] [--kongponents <version|tag>]` renders a
+theme against **real `@kong/kongponents` components** (buttons in every state, badges, cards,
+inputs, radios/switch, multiselect, date picker, tabs, a paginated table, modals/prompts/slideouts,
+tooltips, alerts, and more) loaded from a CDN — no local install or build. It serves a local HTTP
+gallery and prints the URL to open:
+
+```sh
+pnpm build:tokens                              # theme:preview reads dist/themes/<name>.css
+pnpm theme:preview -- my-brand
+# Preview serving at:  http://localhost:8747/index.html
+```
+
+Pass more than one theme name to compare them side by side in one page — the common case for a
+day/night pair, since they're usually eyeballed together rather than one at a time:
+
+```sh
+pnpm theme:preview -- my-brand-day my-brand-night
+# renders Original (unthemed) | my-brand-day | my-brand-night as three columns on one page
+```
+
+By default it renders against the `latest` published `@kong/kongponents`, which does not yet
+consume every component token (e.g. button geometry/per-appearance colors) — pass
+`--kongponents <version|tag>` (or `--kongponents-css <url>`/`--kongponents-esm <url>` for a
+canary/PR build not on the normal registry path) to preview against the build that actually reads
+the tokens your theme sets:
+
+```sh
+pnpm theme:preview -- my-brand --kongponents 9.60.6
+```
+
+`theme:preview` is a convenience alias for `packages/skills/theme-creation/scripts/preview.mjs` —
+the script itself is owned by, and lives in, the `theme-creation` skill (see that skill's
+`CLAUDE.md`), not this package, since it's a verification tool with no build/test contract of its
+own. `pnpm --filter @kong/design-tokens theme:preview -- ...` works the same from the repo root.
 
 ### Theme `$description` authoring rules
 

package/TOKENS.md

@@ -2902,10 +2902,6 @@ Component tokens are documented here for reference. They ship **with no default
 --kui-segmented-control-padding-x-large: initial;
 /* Segmented control button focus-visible shadow. */
 --kui-segmented-control-shadow-focus: initial;
-/* Select dropdown popover border radius. */
---kui-select-border-radius: initial;
-/* Select dropdown popover border color. */
---kui-select-color-border: initial;
 /* Select item background color. */
 --kui-select-item-color-background: initial;
 /* Select item background color on hover. */
@@ -7813,18 +7809,6 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
-  {
-    name: "--kui-select-border-radius",
-    description: "Select dropdown popover border radius.",
-    category: "component",
-    value: null,
-  },
-  {
-    name: "--kui-select-color-border",
-    description: "Select dropdown popover border color.",
-    category: "component",
-    value: null,
-  },
   {
     name: "--kui-select-item-color-background",
     description: "Select item background color.",

package/dist/themes/electric-lime-day.cjs

@@ -14,7 +14,7 @@ const electricLimeDay = {
   '--kui-alert-color-text-danger-hover': "#AD0020",
   '--kui-alert-color-text-decorative': "#6F28FF",
   '--kui-alert-color-text-decorative-hover': "#5200F5",
-  '--kui-alert-color-text-info': "#0076F4",
+  '--kui-alert-color-text-info': "#0063CC",
   '--kui-alert-color-text-info-hover': "#0063CC",
   '--kui-alert-color-text-success': "#007D60",
   '--kui-alert-color-text-success-hover': "#005944",
@@ -37,8 +37,8 @@ const electricLimeDay = {
   '--kui-badge-color-text-danger-hover': "#AD0020",
   '--kui-badge-color-text-decorative': "#6F28FF",
   '--kui-badge-color-text-decorative-hover': "#5200F5",
-  '--kui-badge-color-text-disabled': "#9DA99D",
-  '--kui-badge-color-text-info': "#0076F4",
+  '--kui-badge-color-text-disabled': "#697769",
+  '--kui-badge-color-text-info': "#0063CC",
   '--kui-badge-color-text-info-hover': "#0063CC",
   '--kui-badge-color-text-neutral': "#3D443D",
   '--kui-badge-color-text-neutral-hover': "#242824",
@@ -116,19 +116,19 @@ const electricLimeDay = {
   '--kui-button-color-border-tertiary-hover': "transparent",
   '--kui-button-color-text-danger': "#FFFFFF",
   '--kui-button-color-text-danger-active': "#FFFFFF",
-  '--kui-button-color-text-danger-disabled': "#9DA99D",
+  '--kui-button-color-text-danger-disabled': "#4E594E",
   '--kui-button-color-text-danger-hover': "#FFFFFF",
   '--kui-button-color-text-primary': "#CCFF00",
   '--kui-button-color-text-primary-active': "#CCFF00",
-  '--kui-button-color-text-primary-disabled': "#9DA99D",
+  '--kui-button-color-text-primary-disabled': "#4E594E",
   '--kui-button-color-text-primary-hover': "#CCFF00",
   '--kui-button-color-text-secondary': "#3D443D",
   '--kui-button-color-text-secondary-active': "#242824",
-  '--kui-button-color-text-secondary-disabled': "#9DA99D",
+  '--kui-button-color-text-secondary-disabled': "#697769",
   '--kui-button-color-text-secondary-hover': "#242824",
   '--kui-button-color-text-tertiary': "#3D443D",
   '--kui-button-color-text-tertiary-active': "#242824",
-  '--kui-button-color-text-tertiary-disabled': "#9DA99D",
+  '--kui-button-color-text-tertiary-disabled': "#697769",
   '--kui-button-color-text-tertiary-hover': "#242824",
   '--kui-button-font-size-large': "16px",
   '--kui-button-font-size-medium': "14px",
@@ -169,7 +169,7 @@ const electricLimeDay = {
   '--kui-checkbox-color-background': "#FFFFFF",
   '--kui-checkbox-color-background-checked': "#4E594E",
   '--kui-checkbox-color-icon': "#FFFFFF",
-  '--kui-checkbox-shadow-border': "0px 0px 0px 1px #E3E8E3 inset",
+  '--kui-checkbox-shadow-border': "0px 0px 0px 1px #D2D7D2 inset",
   '--kui-checkbox-shadow-border-checked': "0px 0px 0px 1px #4E594E inset",
   '--kui-checkbox-shadow-border-hover': "0px 0px 0px 1px #4E594E inset",
   '--kui-checkbox-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
@@ -267,7 +267,7 @@ const electricLimeDay = {
   '--kui-color-border-neutral-weak': "#9DA99D",
   '--kui-color-border-neutral-weaker': "#E3E8E3",
   '--kui-color-border-neutral-weakest': "#F1F3F1",
-  '--kui-color-border-primary': "#9DA99D",
+  '--kui-color-border-primary': "#697769",
   '--kui-color-border-primary-strong': "#242824",
   '--kui-color-border-primary-stronger': "#181B18",
   '--kui-color-border-primary-strongest': "#090D09",
@@ -282,50 +282,50 @@ const electricLimeDay = {
   '--kui-color-text-danger-strong': "#AD0020",
   '--kui-color-text-danger-stronger': "#850018",
   '--kui-color-text-danger-strongest': "#5C0011",
-  '--kui-color-text-danger-weak': "#FF395D",
-  '--kui-color-text-danger-weaker': "#FFBDC9",
-  '--kui-color-text-danger-weakest': "#FFE5EA",
-  '--kui-color-text-decorative-aqua': "#00ABD2",
+  '--kui-color-text-danger-weak': "#D60027",
+  '--kui-color-text-danger-weaker': "#D60027",
+  '--kui-color-text-danger-weakest': "#D60027",
+  '--kui-color-text-decorative-aqua': "#00819D",
   '--kui-color-text-decorative-pink': "#D60067",
   '--kui-color-text-decorative-purple': "#6F28FF",
   '--kui-color-text-decorative-purple-strong': "#5200F5",
-  '--kui-color-text-disabled': "#9DA99D",
-  '--kui-color-text-info': "#0076F4",
+  '--kui-color-text-disabled': "#697769",
+  '--kui-color-text-info': "#0063CC",
   '--kui-color-text-info-strong': "#0063CC",
   '--kui-color-text-info-stronger': "#004A99",
   '--kui-color-text-info-strongest': "#003166",
-  '--kui-color-text-info-weak': "#5FACFF",
-  '--kui-color-text-info-weaker': "#BEDDFF",
-  '--kui-color-text-info-weakest': "#EEF6FF",
+  '--kui-color-text-info-weak': "#0063CC",
+  '--kui-color-text-info-weaker': "#0063CC",
+  '--kui-color-text-info-weakest': "#0063CC",
   '--kui-color-text-inverse': "#FFFFFF",
   '--kui-color-text-neutral': "#4E594E",
   '--kui-color-text-neutral-strong': "#3D443D",
   '--kui-color-text-neutral-stronger': "#242824",
   '--kui-color-text-neutral-strongest': "#181B18",
-  '--kui-color-text-neutral-weak': "#9DA99D",
-  '--kui-color-text-neutral-weaker': "#E3E8E3",
-  '--kui-color-text-neutral-weakest': "#F1F3F1",
+  '--kui-color-text-neutral-weak': "#697769",
+  '--kui-color-text-neutral-weaker': "#697769",
+  '--kui-color-text-neutral-weakest': "#697769",
   '--kui-color-text-primary': "#3D443D",
   '--kui-color-text-primary-strong': "#242824",
   '--kui-color-text-primary-stronger': "#181B18",
   '--kui-color-text-primary-strongest': "#090D09",
-  '--kui-color-text-primary-weak': "#9DA99D",
-  '--kui-color-text-primary-weaker': "#E3E8E3",
-  '--kui-color-text-primary-weakest': "#F1F3F1",
+  '--kui-color-text-primary-weak': "#697769",
+  '--kui-color-text-primary-weaker': "#697769",
+  '--kui-color-text-primary-weakest': "#697769",
   '--kui-color-text-success': "#007D60",
   '--kui-color-text-success-strong': "#005944",
   '--kui-color-text-success-stronger': "#004737",
   '--kui-color-text-success-strongest': "#003629",
-  '--kui-color-text-success-weak': "#00D6A4",
-  '--kui-color-text-success-weaker': "#B5FFEE",
-  '--kui-color-text-success-weakest': "#ECFFFB",
+  '--kui-color-text-success-weak': "#007D60",
+  '--kui-color-text-success-weaker': "#007D60",
+  '--kui-color-text-success-weakest': "#007D60",
   '--kui-color-text-warning': "#807300",
   '--kui-color-text-warning-strong': "#807300",
   '--kui-color-text-warning-stronger': "#665C00",
   '--kui-color-text-warning-strongest': "#4D4500",
-  '--kui-color-text-warning-weak': "#FFE500",
-  '--kui-color-text-warning-weaker': "#FFF496",
-  '--kui-color-text-warning-weakest': "#FFFCE0",
+  '--kui-color-text-warning-weak': "#807300",
+  '--kui-color-text-warning-weaker': "#807300",
+  '--kui-color-text-warning-weakest': "#807300",
   '--kui-copy-color-text': "#4E594E",
   '--kui-copy-font-family-code': "'JetBrains Mono', Consolas, monospace",
   '--kui-copy-font-size': "12px",
@@ -338,11 +338,11 @@ const electricLimeDay = {
   '--kui-date-time-picker-day-color-background-selected-hover': "#3D443D",
   '--kui-date-time-picker-day-color-background-today': "#F1F3F1",
   '--kui-date-time-picker-day-color-text': "#3D443D",
-  '--kui-date-time-picker-day-color-text-disabled': "#9DA99D",
+  '--kui-date-time-picker-day-color-text-disabled': "#4E594E",
   '--kui-date-time-picker-day-color-text-selected': "#FFFFFF",
   '--kui-date-time-picker-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-dropdown-border-radius': "6px",
-  '--kui-dropdown-color-border': "#E3E8E3",
+  '--kui-dropdown-color-border': "#D2D7D2",
   '--kui-dropdown-item-color-background': "#FFFFFF",
   '--kui-dropdown-item-color-background-active': "#E3E8E3",
   '--kui-dropdown-item-color-background-danger-active': "#FFBDC9",
@@ -350,10 +350,10 @@ const electricLimeDay = {
   '--kui-dropdown-item-color-background-hover': "#F1F3F1",
   '--kui-dropdown-item-color-background-selected': "#F1F3F1",
   '--kui-dropdown-item-color-background-selected-disabled': "#F1F3F1",
-  '--kui-dropdown-item-color-border-divider': "#E3E8E3",
+  '--kui-dropdown-item-color-border-divider': "#D2D7D2",
   '--kui-dropdown-item-color-text': "#3D443D",
   '--kui-dropdown-item-color-text-danger': "#D60027",
-  '--kui-dropdown-item-color-text-disabled': "#9DA99D",
+  '--kui-dropdown-item-color-text-disabled': "#697769",
   '--kui-dropdown-item-color-text-selected': "#181B18",
   '--kui-dropdown-item-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-dropdown-item-font-size': "14px",
@@ -374,7 +374,7 @@ const electricLimeDay = {
   '--kui-empty-state-icon-border-radius': "4px",
   '--kui-empty-state-icon-color': "#4E594E",
   '--kui-empty-state-icon-color-background': "#ECFCFF",
-  '--kui-empty-state-icon-color-text-background': "#00ABD2",
+  '--kui-empty-state-icon-color-text-background': "#00647A",
   '--kui-empty-state-icon-padding': "8px",
   '--kui-empty-state-icon-size': "32px",
   '--kui-empty-state-icon-size-background': "24px",
@@ -386,16 +386,16 @@ const electricLimeDay = {
   '--kui-empty-state-title-font-size': "18px",
   '--kui-empty-state-title-font-weight': "700",
   '--kui-empty-state-title-line-height': "24px",
-  '--kui-file-upload-color-text-disabled': "#9DA99D",
+  '--kui-file-upload-color-text-disabled': "#4E594E",
   '--kui-file-upload-color-text-placeholder': "#4E594E",
   '--kui-file-upload-dropzone-border-radius': "6px",
   '--kui-file-upload-dropzone-border-width': "1px",
   '--kui-file-upload-dropzone-color-background': "#F9FBF9",
   '--kui-file-upload-dropzone-color-background-disabled': "#F1F3F1",
-  '--kui-file-upload-dropzone-color-border': "#E3E8E3",
+  '--kui-file-upload-dropzone-color-border': "#697769",
   '--kui-file-upload-dropzone-color-border-disabled': "#F1F3F1",
   '--kui-file-upload-dropzone-color-border-error': "#D60027",
-  '--kui-file-upload-dropzone-color-border-hover': "#9DA99D",
+  '--kui-file-upload-dropzone-color-border-hover': "#4E594E",
   '--kui-file-upload-dropzone-color-text': "#4E594E",
   '--kui-file-upload-dropzone-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-filter-group-clear-border-radius': "4px",
@@ -405,7 +405,7 @@ const electricLimeDay = {
   '--kui-filter-group-pill-color-background-hover': "#F9FBF9",
   '--kui-filter-group-pill-color-background-selected': "#F9FBF9",
   '--kui-filter-group-pill-color-background-selected-hover': "#F1F3F1",
-  '--kui-filter-group-pill-color-border': "#E3E8E3",
+  '--kui-filter-group-pill-color-border': "#D2D7D2",
   '--kui-filter-group-pill-color-border-hover': "#4E594E",
   '--kui-filter-group-pill-color-border-selected': "#4E594E",
   '--kui-filter-group-pill-color-text': "#242824",
@@ -449,7 +449,7 @@ const electricLimeDay = {
   '--kui-input-color-background-disabled': "#F1F3F1",
   '--kui-input-color-background-readonly': "#F9FBF9",
   '--kui-input-color-text': "#3D443D",
-  '--kui-input-color-text-disabled': "#9DA99D",
+  '--kui-input-color-text-disabled': "#4E594E",
   '--kui-input-color-text-placeholder': "#4E594E",
   '--kui-input-color-text-readonly': "#3D443D",
   '--kui-input-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
@@ -458,7 +458,7 @@ const electricLimeDay = {
   '--kui-input-line-height': "24px",
   '--kui-input-padding-x': "12px",
   '--kui-input-padding-y': "8px",
-  '--kui-input-shadow-border': "0px 0px 0px 1px #E3E8E3 inset",
+  '--kui-input-shadow-border': "0px 0px 0px 1px #D2D7D2 inset",
   '--kui-input-shadow-border-disabled': "none",
   '--kui-input-shadow-border-error': "0px 0px 0px 1px #D60027 inset",
   '--kui-input-shadow-border-error-hover': "0px 0px 0px 1px #AD0020 inset",
@@ -476,9 +476,9 @@ const electricLimeDay = {
   '--kui-input-switch-thumb-border-width': "2px",
   '--kui-input-switch-thumb-color-background': "#FFFFFF",
   '--kui-input-switch-thumb-color-background-disabled': "#E3E8E3",
-  '--kui-input-switch-thumb-color-border': "#9DA99D",
-  '--kui-input-switch-thumb-color-border-hover': "#E3E8E3",
-  '--kui-input-switch-thumb-shadow-border': "0px 0px 0px 1px #E3E8E3 inset",
+  '--kui-input-switch-thumb-color-border': "#697769",
+  '--kui-input-switch-thumb-color-border-hover': "#4E594E",
+  '--kui-input-switch-thumb-shadow-border': "0px 0px 0px 1px #D2D7D2 inset",
   '--kui-input-switch-thumb-shadow-border-disabled': "0px 0px 0px 1px #9DA99D inset",
   '--kui-input-switch-thumb-shadow-border-selected': "0px 0px 0px 1px #3D443D inset",
   '--kui-label-color-text': "#3D443D",
@@ -505,7 +505,7 @@ const electricLimeDay = {
   '--kui-line-height-100': "56px",
   '--kui-link-color-text': "#4E594E",
   '--kui-link-color-text-active': "#181B18",
-  '--kui-link-color-text-disabled': "#9DA99D",
+  '--kui-link-color-text-disabled': "#697769",
   '--kui-link-color-text-hover': "#3D443D",
   '--kui-link-font-weight': "400",
   '--kui-link-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
@@ -530,11 +530,11 @@ const electricLimeDay = {
   '--kui-method-color-text-head-strong': "#D2D7D2",
   '--kui-method-color-text-options': "#3D443D",
   '--kui-method-color-text-options-strong': "#242824",
-  '--kui-method-color-text-patch': "#00819D",
+  '--kui-method-color-text-patch': "#00647A",
   '--kui-method-color-text-patch-strong': "#00647A",
-  '--kui-method-color-text-post': "#0076F4",
+  '--kui-method-color-text-post': "#0063CC",
   '--kui-method-color-text-post-strong': "#0063CC",
-  '--kui-method-color-text-put': "#998A00",
+  '--kui-method-color-text-put': "#807300",
   '--kui-method-color-text-put-strong': "#807300",
   '--kui-method-color-text-trace': "#D60067",
   '--kui-method-color-text-trace-strong': "#AD0053",
@@ -566,14 +566,14 @@ const electricLimeDay = {
   '--kui-modal-title-line-height': "28px",
   '--kui-multiselect-footer-border-width': "1px",
   '--kui-multiselect-footer-color-background': "#FFFFFF",
-  '--kui-multiselect-footer-color-border': "#E3E8E3",
+  '--kui-multiselect-footer-color-border': "#D2D7D2",
   '--kui-multiselect-footer-color-text': "#4E594E",
   '--kui-multiselect-group-color-text': "#4E594E",
   '--kui-multiselect-group-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-multiselect-group-font-weight': "500",
   '--kui-multiselect-search-border-width': "1px",
   '--kui-multiselect-search-color-background': "#FFFFFF",
-  '--kui-multiselect-search-color-border': "#E3E8E3",
+  '--kui-multiselect-search-color-border': "#D2D7D2",
   '--kui-navigation-color-background': "#001933",
   '--kui-navigation-color-background-selected': "rgba(255, 255, 255, 0.12)",
   '--kui-navigation-color-border': "rgba(255, 255, 255, 0.12)",
@@ -590,7 +590,7 @@ const electricLimeDay = {
   '--kui-pagination-border-width': "1px",
   '--kui-pagination-color-background': "transparent",
   '--kui-pagination-color-background-selected': "#F9FBF9",
-  '--kui-pagination-color-border': "#E3E8E3",
+  '--kui-pagination-color-border': "#D2D7D2",
   '--kui-pagination-color-border-hover': "#4E594E",
   '--kui-pagination-color-border-selected': "#4E594E",
   '--kui-pagination-color-text': "#4E594E",
@@ -605,7 +605,7 @@ const electricLimeDay = {
   '--kui-pop-close-color-text-hover': "#3D443D",
   '--kui-pop-close-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-pop-color-background': "#FFFFFF",
-  '--kui-pop-color-border': "#E3E8E3",
+  '--kui-pop-color-border': "#D2D7D2",
   '--kui-pop-color-text': "#242824",
   '--kui-pop-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-pop-font-size': "12px",
@@ -619,7 +619,7 @@ const electricLimeDay = {
   '--kui-pop-title-line-height': "20px",
   '--kui-radio-color-background': "#FFFFFF",
   '--kui-radio-color-background-checked': "#4E594E",
-  '--kui-radio-shadow-border': "0px 0px 0px 1px #E3E8E3 inset",
+  '--kui-radio-shadow-border': "0px 0px 0px 1px #D2D7D2 inset",
   '--kui-radio-shadow-border-checked': "0px 0px 0px 1px #4E594E inset",
   '--kui-radio-shadow-border-hover': "0px 0px 0px 1px #4E594E inset",
   '--kui-radio-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
@@ -628,14 +628,14 @@ const electricLimeDay = {
   '--kui-segmented-control-color-background': "#FFFFFF",
   '--kui-segmented-control-color-background-disabled-selected': "#F1F3F1",
   '--kui-segmented-control-color-background-selected': "#F9FBF9",
-  '--kui-segmented-control-color-border': "#9DA99D",
+  '--kui-segmented-control-color-border': "#697769",
   '--kui-segmented-control-color-border-active': "#181B18",
   '--kui-segmented-control-color-border-disabled': "#F1F3F1",
   '--kui-segmented-control-color-border-hover': "#3D443D",
   '--kui-segmented-control-color-border-selected': "#242824",
   '--kui-segmented-control-color-text': "#4E594E",
   '--kui-segmented-control-color-text-active': "#181B18",
-  '--kui-segmented-control-color-text-disabled': "#9DA99D",
+  '--kui-segmented-control-color-text-disabled': "#4E594E",
   '--kui-segmented-control-color-text-hover': "#3D443D",
   '--kui-segmented-control-color-text-selected': "#242824",
   '--kui-segmented-control-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
@@ -645,21 +645,19 @@ const electricLimeDay = {
   '--kui-segmented-control-padding-x': "12px",
   '--kui-segmented-control-padding-x-large': "16px",
   '--kui-segmented-control-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
-  '--kui-select-border-radius': "6px",
-  '--kui-select-color-border': "#E3E8E3",
   '--kui-select-item-color-background': "#FFFFFF",
   '--kui-select-item-color-background-hover': "#F1F3F1",
   '--kui-select-item-color-background-selected': "#F1F3F1",
   '--kui-select-item-color-background-selected-disabled': "#F1F3F1",
   '--kui-select-item-color-text': "#3D443D",
-  '--kui-select-item-color-text-disabled': "#9DA99D",
+  '--kui-select-item-color-text-disabled': "#697769",
   '--kui-select-item-color-text-selected': "#181B18",
   '--kui-select-item-font-size': "14px",
   '--kui-select-item-line-height': "24px",
   '--kui-select-item-padding-x': "16px",
   '--kui-select-item-padding-y': "12px",
   '--kui-shadow': "0px 4px 20px 0px color-mix(in srgb, #181b18 5%, transparent)",
-  '--kui-shadow-border': "0px 0px 0px 1px #E3E8E3 inset",
+  '--kui-shadow-border': "0px 0px 0px 1px #697769 inset",
   '--kui-shadow-border-danger': "0px 0px 0px 1px #D60027 inset",
   '--kui-shadow-border-danger-strong': "0px 0px 0px 1px #AD0020 inset",
   '--kui-shadow-border-disabled': "0px 0px 0px 1px #242824 inset",
@@ -687,7 +685,7 @@ const electricLimeDay = {
   '--kui-slideout-close-color-text-hover': "#3D443D",
   '--kui-slideout-close-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-slideout-color-background': "#FFFFFF",
-  '--kui-slideout-color-border': "#E3E8E3",
+  '--kui-slideout-color-border': "#D2D7D2",
   '--kui-slideout-color-text': "#3D443D",
   '--kui-slideout-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-slideout-font-size': "14px",
@@ -807,9 +805,9 @@ const electricLimeDay = {
   '--kui-status-color-background-300': "#FFFCE0",
   '--kui-status-color-background-400': "#FFF3EF",
   '--kui-status-color-background-500': "#FFE5EA",
-  '--kui-status-color-text-100': "#0076F4",
+  '--kui-status-color-text-100': "#0063CC",
   '--kui-status-color-text-200': "#007D60",
-  '--kui-status-color-text-300': "#998A00",
+  '--kui-status-color-text-300': "#807300",
   '--kui-status-color-text-400': "#D13500",
   '--kui-status-color-text-500': "#D60027",
   '--kui-stepper-border-radius': "50%",
@@ -853,10 +851,10 @@ const electricLimeDay = {
   '--kui-tabs-border-width': "1px",
   '--kui-tabs-border-width-selected': "2px",
   '--kui-tabs-color-background-hover': "#F1F3F1",
-  '--kui-tabs-color-border': "#E3E8E3",
+  '--kui-tabs-color-border': "#D2D7D2",
   '--kui-tabs-color-border-selected': "#181B18",
   '--kui-tabs-color-text': "#4E594E",
-  '--kui-tabs-color-text-disabled': "#9DA99D",
+  '--kui-tabs-color-text-disabled': "#697769",
   '--kui-tabs-color-text-hover': "#3D443D",
   '--kui-tabs-color-text-minimal-hover': "#242824",
   '--kui-tabs-color-text-selected': "#090D09",
@@ -906,8 +904,8 @@ const electricLimeDay = {
   '--kui-tree-list-color-background-hover': "#F1F3F1",
   '--kui-tree-list-color-background-selected': "#F1F3F1",
   '--kui-tree-list-color-border': "#F1F3F1",
-  '--kui-tree-list-color-border-connector': "#E3E8E3",
-  '--kui-tree-list-color-border-selected': "#E3E8E3",
+  '--kui-tree-list-color-border-connector': "#D2D7D2",
+  '--kui-tree-list-color-border-selected': "#4E594E",
   '--kui-tree-list-color-text': "#3D443D",
   '--kui-tree-list-color-text-icon': "#4E594E",
   '--kui-tree-list-color-text-icon-selected': "#3D443D",