@telia/teddy 0.6.12 → 0.6.14

package/dist/components/tooltip/index.d.ts

@@ -17,7 +17,7 @@ export declare const Tooltip: typeof Root & {
         }>) => void) | undefined;
         side?: "top" | "bottom" | "left" | "right" | undefined;
         sideOffset?: number | undefined;
-        align?: "end" | "start" | "center" | undefined;
+        align?: "center" | "end" | "start" | undefined;
         alignOffset?: number | undefined;
         arrowPadding?: number | undefined;
         avoidCollisions?: boolean | undefined;

package/dist/main.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_select_index = require("./components/select/index.cjs");
 const components_avatar_index = require("./components/avatar/index.cjs");
 const components_dashboardCard_index = require("./components/dashboard-card/index.cjs");
 const components_table_index = require("./components/table/index.cjs");
@@ -67,6 +68,7 @@ const tokens_spacing_variables = require("./tokens/spacing/variables.cjs");
 const tokens_typography_variables = require("./tokens/typography/variables.cjs");
 const sonner = require("sonner");
 const components_input_inputGroup = require("./components/input/input-group.cjs");
+exports.Select = components_select_index.Select;
 exports.Avatar = components_avatar_index.Avatar;
 exports.DashboardCard = components_dashboardCard_index.DashboardCard;
 exports.Table = components_table_index.Table;

package/dist/main.js

@@ -1,3 +1,4 @@
+import { Select } from "./components/select/index.js";
 import { Avatar } from "./components/avatar/index.js";
 import { DashboardCard } from "./components/dashboard-card/index.js";
 import { Table } from "./components/table/index.js";
@@ -114,6 +115,7 @@ export {
   RadioGroup,
   Ribbon,
   ScrollArea,
+  Select,
   Skeleton,
   Slider,
   Spinner,

package/dist/style.css

@@ -1,4 +1,27 @@
-@charset 'UTF-8';@layer icon {
+@charset 'UTF-8';._teddy-label_1hc8e_1 {
+  color: var(--teddy-color-text-default);
+  font-family: var(--teddy-typography-family-default);
+  font-weight: var(--teddy-typography-weight-medium);
+  font-size: var(--teddy-typography-scale-100);
+  line-height: var(--teddy-typography-line-height-default);
+}
+._teddy-label--disabled_1hc8e_8 {
+  color: var(--teddy-color-text-weak);
+  cursor: default;
+}
+._teddy-label--required_1hc8e_12::before {
+  content: "* ";
+}._teddy-helper-text_6xdzb_1 {
+  font-family: var(--teddy-typography-family-default);
+  font-weight: var(--teddy-typography-weight-normal);
+  font-size: var(--teddy-typography-scale-75);
+  line-height: var(--teddy-typography-line-height-loose);
+  color: var(--teddy-color-text-medium);
+  display: block;
+}
+._teddy-helper-text--disabled_6xdzb_9 {
+  color: var(--teddy-color-text-weak);
+}@layer icon {
   ._teddy-icon_1ur3a_2 {
     display: inline;
     align-self: center;
@@ -117,6 +140,115 @@
     line-height: var(--teddy-typography-line-height-tight);
     text-transform: uppercase;
   }
+}._teddy-field-error-text_1735t_1 {
+  font-family: var(--teddy-typography-family-default);
+  font-weight: var(--teddy-typography-weight-normal);
+  font-size: var(--teddy-typography-scale-100);
+  line-height: var(--teddy-typography-line-height-loose);
+  color: var(--teddy-color-text-status-error-strong);
+  display: flex;
+  flex-direction: row;
+  gap: var(--teddy-spacing-50);
+  align-items: center;
+}
+._teddy-field-error-text__indicator_1735t_12 {
+  color: var(--teddy-color-text-status-error-medium);
+  line-height: var(--teddy-typography-line-height-tight);
+}._teddy-select_1i9a7_1 {
+  box-sizing: border-box;
+  display: block;
+  width: 200px;
+}
+._teddy-select_1i9a7_1 label {
+  display: flex;
+  margin-bottom: 5px;
+  padding: 0;
+  font-size: 13px;
+}
+._teddy-select__trigger_1i9a7_12 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  padding: 1px 10px;
+  font-size: 13px;
+  line-height: 1;
+  height: 35px;
+  width: calc(100% - 25px);
+  gap: 5px;
+  background-color: white;
+  border: 1px solid #757579;
+  color: #353537;
+}
+._teddy-select__trigger_1i9a7_12:hover {
+  border: 2px solid #6d02a3;
+  padding: 0 9px;
+}
+._teddy-select__trigger_1i9a7_12:focus, ._teddy-select__trigger_1i9a7_12 :focus:hover {
+  outline: var(--teddy-border-width-sm) solid var(--teddy-color-border-interactive-focus);
+  outline-offset: calc(var(--teddy-spacing-10) * 2);
+  border-width: var(--teddy-border-width-xs);
+  border-color: var(--teddy-color-border-interactive-subtle-hover);
+  padding: 1px 10px;
+}
+._teddy-select__trigger--error_1i9a7_38 {
+  border: 1px solid #e4175c;
+  padding: 1px 10px;
+}
+._teddy-select__trigger--disabled_1i9a7_42, ._teddy-select__trigger--disabled_1i9a7_42:hover {
+  color: #aaaab0;
+  background-color: #e5e5eb;
+  border: 1px solid #aaaab0;
+  padding: 0 10px;
+}
+._teddy-select__trigger--readonly_1i9a7_48, ._teddy-select__trigger--readonly_1i9a7_48:hover {
+  border: 1px solid #aaaab0;
+  background-color: #f3f3f8;
+  padding: 0 10px;
+}
+._teddy-select__icon_1i9a7_53 {
+  color: #8d8d94;
+}
+._teddy-select__content_1i9a7_56 {
+  overflow: hidden;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 10px 20px -15px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  border: 1px solid black;
+  min-width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+}
+._teddy-select__viewport_1i9a7_65 {
+  padding: 5px;
+  overflow: scroll;
+}
+._teddy-select__item_1i9a7_69 {
+  font-size: 13px;
+  line-height: 1;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 35px;
+  padding: 0 35px 0 25px;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+}
+._teddy-select__item_1i9a7_69:disabled {
+  color: #e5e5eb;
+  pointer-events: none;
+}
+._teddy-select__item_1i9a7_69:hover {
+  background-color: #e5e5eb;
+  outline: none;
+}
+._teddy-select__item-indicator_1i9a7_89 {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }._teddy-avatar_e3370_1 {
   display: flex;
   align-items: center;
@@ -2067,6 +2199,10 @@
   --teddy-color-border-status-info: var(--teddy-color-blue-500);
   --teddy-color-border-status-warning: var(--teddy-color-orange-400);
   --teddy-color-border-status-error: var(--teddy-color-red-500);
+  --teddy-color-border-interactive-subtle-negative-hover: var(--teddy-color-purple-200);
+  --teddy-color-border-interactive-subtle-negative: var(--teddy-color-transparent-white-300);
+  --teddy-color-border-interactive-expressive: var(--teddy-color-purple-800);
+  --teddy-color-border-interactive-focus-negative: var(--teddy-color-blue-300);
   --teddy-color-border-interactive-subtle-hover: var(--teddy-color-purple-800);
   --teddy-color-border-interactive-subtle: var(--teddy-color-transparent-black-300);
   --teddy-color-border-interactive-selected: var(--teddy-color-purple-550);
@@ -2083,10 +2219,73 @@
   --teddy-color-border-strong: var(--teddy-color-transparent-black-500);
   --teddy-color-border-medium-negative: var(--teddy-color-transparent-white-300);
   --teddy-color-border-medium: var(--teddy-color-transparent-black-300);
+  --teddy-color-background-card-teal-emphasis-active-negative: var(--teddy-color-teal-600);
+  --teddy-color-background-card-teal-emphasis-active: var(--teddy-color-teal-300);
+  --teddy-color-background-card-teal-emphasis-hover-negative: var(--teddy-color-teal-700);
+  --teddy-color-background-card-teal-emphasis-hover: var(--teddy-color-teal-200);
+  --teddy-color-background-card-teal-emphasis-negative: var(--teddy-color-teal-800);
+  --teddy-color-background-card-teal-emphasis: var(--teddy-color-teal-100);
+  --teddy-color-background-card-teal-active-negative: var(--teddy-color-teal-700);
+  --teddy-color-background-card-teal-active: var(--teddy-color-teal-200);
+  --teddy-color-background-card-teal-hover-negative: var(--teddy-color-teal-800);
+  --teddy-color-background-card-teal-hover: var(--teddy-color-teal-100);
+  --teddy-color-background-card-teal-negative: var(--teddy-color-teal-900);
+  --teddy-color-background-card-teal: var(--teddy-color-teal-50);
+  --teddy-color-background-card-dark-purple-active-negative: var(--teddy-color-purple-600);
+  --teddy-color-background-card-dark-purple-active: var(--teddy-color-purple-400);
+  --teddy-color-background-card-dark-purple-hover-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-card-dark-purple-hover: var(--teddy-color-purple-300);
+  --teddy-color-background-card-dark-purple-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-card-dark-purple: var(--teddy-color-purple-200);
+  --teddy-color-background-card-light-purple-active-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-card-light-purple-active: var(--teddy-color-purple-300);
+  --teddy-color-background-card-light-purple-hover-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-card-light-purple-hover: var(--teddy-color-purple-200);
+  --teddy-color-background-card-light-purple-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-light-purple: var(--teddy-color-purple-100);
+  --teddy-color-background-card-beige-emphasis-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-emphasis-active: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-emphasis-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-emphasis-hover: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-emphasis-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-beige-emphasis: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-active: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-hover: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-beige: var(--teddy-color-functional-white);
+  --teddy-color-background-card-gray-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-gray-active: var(--teddy-color-purple-100);
+  --teddy-color-background-card-gray-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-gray-hover: var(--teddy-color-purple-100);
+  --teddy-color-background-card-gray-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-gray: var(--teddy-color-functional-white);
+  --teddy-color-background-card-default-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-default-active: var(--teddy-color-purple-100);
+  --teddy-color-background-card-default-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-default-hover: var(--teddy-color-purple-100);
+  --teddy-color-background-card-default-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-default: var(--teddy-color-functional-white);
+  --teddy-color-background-light-purple-negative: var(--teddy-color-gray-700);
+  --teddy-color-background-light-purple: var(--teddy-color-purple-50);
   --teddy-color-background-tone-on-tone-quaternary: var(--teddy-color-beige-50);
   --teddy-color-background-tone-on-tone-tertiary: var(--teddy-color-beige-100);
   --teddy-color-background-tone-on-tone-secondary: var(--teddy-color-purple-100);
   --teddy-color-background-tone-on-tone-primary: var(--teddy-color-purple-900);
+  --teddy-color-background-status-attention-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-status-special-strong-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-status-special-strong: var(--teddy-color-purple-100);
+  --teddy-color-background-status-special-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-status-neutral-negative: var(--teddy-color-gray-700);
+  --teddy-color-background-status-warning-strong-negative: var(--teddy-color-orange-600);
+  --teddy-color-background-status-warning-negative: var(--teddy-color-orange-700);
+  --teddy-color-background-status-error-strong-negative: var(--teddy-color-red-600);
+  --teddy-color-background-status-error-negative: var(--teddy-color-red-700);
+  --teddy-color-background-status-success-strong-negative: var(--teddy-color-green-600);
+  --teddy-color-background-status-success-negative: var(--teddy-color-green-700);
+  --teddy-color-background-status-info-strong-negative: var(--teddy-color-blue-600);
+  --teddy-color-background-status-info-negative: var(--teddy-color-blue-700);
   --teddy-color-background-status-attention: var(--teddy-color-purple-700);
   --teddy-color-background-status-special: var(--teddy-color-purple-100);
   --teddy-color-background-status-neutral: var(--teddy-color-gray-100);
@@ -2123,11 +2322,23 @@
   --teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
   --teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
   --teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
+  --teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
   --teddy-color-background-secondary: var(--teddy-color-gray-50);
+  --teddy-color-background-primary-negative: var(--teddy-color-gray-900);
   --teddy-color-background-primary: var(--teddy-color-functional-white);
+  --teddy-color-text-card-beige-negative: var(--teddy-color-beige-100);
+  --teddy-color-text-card-beige: var(--teddy-color-beige-700);
+  --teddy-color-text-card-teal-negative: var(--teddy-color-teal-50);
+  --teddy-color-text-card-teal: var(--teddy-color-teal-700);
   --teddy-color-text-tone-on-tone-tertiary: var(--teddy-color-beige-700);
   --teddy-color-text-tone-on-tone-secondary: var(--teddy-color-purple-900);
   --teddy-color-text-tone-on-tone-primary: var(--teddy-color-purple-100);
+  --teddy-color-text-status-special-negative: var(--teddy-color-transparent-white-850);
+  --teddy-color-text-status-neutral-negative: var(--teddy-color-transparent-white-850);
+  --teddy-color-text-status-info-strong-negative: var(--teddy-color-blue-100);
+  --teddy-color-text-status-warning-strong-negative: var(--teddy-color-orange-100);
+  --teddy-color-text-status-success-strong-negative: var(--teddy-color-green-100);
+  --teddy-color-text-status-error-strong-negative: var(--teddy-color-red-100);
   --teddy-color-text-status-attention: var(--teddy-color-functional-white);
   --teddy-color-text-status-special: var(--teddy-color-purple-800);
   --teddy-color-text-status-neutral: var(--teddy-color-transparent-black-700);
@@ -2520,19 +2731,6 @@
 }
 ._teddy-checkbox--error_1tihh_89 ._teddy-checkbox__trigger_1tihh_12::before {
   box-shadow: inset 0 0 0 1px var(--teddy-color-border-status-error);
-}._teddy-label_1hc8e_1 {
-  color: var(--teddy-color-text-default);
-  font-family: var(--teddy-typography-family-default);
-  font-weight: var(--teddy-typography-weight-medium);
-  font-size: var(--teddy-typography-scale-100);
-  line-height: var(--teddy-typography-line-height-default);
-}
-._teddy-label--disabled_1hc8e_8 {
-  color: var(--teddy-color-text-weak);
-  cursor: default;
-}
-._teddy-label--required_1hc8e_12::before {
-  content: "* ";
 }@keyframes _fadeInAnimation_mi6fm_1 {
   0% {
     opacity: 0;
@@ -4857,30 +5055,6 @@
       height: 0;
     }
   }
-}._teddy-field-error-text_1735t_1 {
-  font-family: var(--teddy-typography-family-default);
-  font-weight: var(--teddy-typography-weight-normal);
-  font-size: var(--teddy-typography-scale-100);
-  line-height: var(--teddy-typography-line-height-loose);
-  color: var(--teddy-color-text-status-error-strong);
-  display: flex;
-  flex-direction: row;
-  gap: var(--teddy-spacing-50);
-  align-items: center;
-}
-._teddy-field-error-text__indicator_1735t_12 {
-  color: var(--teddy-color-text-status-error-medium);
-  line-height: var(--teddy-typography-line-height-tight);
-}._teddy-helper-text_6xdzb_1 {
-  font-family: var(--teddy-typography-family-default);
-  font-weight: var(--teddy-typography-weight-normal);
-  font-size: var(--teddy-typography-scale-75);
-  line-height: var(--teddy-typography-line-height-loose);
-  color: var(--teddy-color-text-medium);
-  display: block;
-}
-._teddy-helper-text--disabled_6xdzb_9 {
-  color: var(--teddy-color-text-weak);
 }@keyframes _fadeInAnimation_mhz8x_1 {
   0% {
     opacity: 0;
@@ -6391,6 +6565,10 @@
   --teddy-color-border-status-info: var(--teddy-color-blue-500);
   --teddy-color-border-status-warning: var(--teddy-color-orange-400);
   --teddy-color-border-status-error: var(--teddy-color-red-500);
+  --teddy-color-border-interactive-subtle-negative-hover: var(--teddy-color-purple-200);
+  --teddy-color-border-interactive-subtle-negative: var(--teddy-color-transparent-white-300);
+  --teddy-color-border-interactive-expressive: var(--teddy-color-purple-800);
+  --teddy-color-border-interactive-focus-negative: var(--teddy-color-blue-300);
   --teddy-color-border-interactive-subtle-hover: var(--teddy-color-purple-800);
   --teddy-color-border-interactive-subtle: var(--teddy-color-transparent-black-300);
   --teddy-color-border-interactive-selected: var(--teddy-color-purple-550);
@@ -6407,10 +6585,73 @@
   --teddy-color-border-strong: var(--teddy-color-transparent-black-500);
   --teddy-color-border-medium-negative: var(--teddy-color-transparent-white-300);
   --teddy-color-border-medium: var(--teddy-color-transparent-black-300);
+  --teddy-color-background-card-teal-emphasis-active-negative: var(--teddy-color-teal-600);
+  --teddy-color-background-card-teal-emphasis-active: var(--teddy-color-teal-300);
+  --teddy-color-background-card-teal-emphasis-hover-negative: var(--teddy-color-teal-700);
+  --teddy-color-background-card-teal-emphasis-hover: var(--teddy-color-teal-200);
+  --teddy-color-background-card-teal-emphasis-negative: var(--teddy-color-teal-800);
+  --teddy-color-background-card-teal-emphasis: var(--teddy-color-teal-100);
+  --teddy-color-background-card-teal-active-negative: var(--teddy-color-teal-700);
+  --teddy-color-background-card-teal-active: var(--teddy-color-teal-200);
+  --teddy-color-background-card-teal-hover-negative: var(--teddy-color-teal-800);
+  --teddy-color-background-card-teal-hover: var(--teddy-color-teal-100);
+  --teddy-color-background-card-teal-negative: var(--teddy-color-teal-900);
+  --teddy-color-background-card-teal: var(--teddy-color-teal-50);
+  --teddy-color-background-card-dark-purple-active-negative: var(--teddy-color-purple-600);
+  --teddy-color-background-card-dark-purple-active: var(--teddy-color-purple-400);
+  --teddy-color-background-card-dark-purple-hover-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-card-dark-purple-hover: var(--teddy-color-purple-300);
+  --teddy-color-background-card-dark-purple-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-card-dark-purple: var(--teddy-color-purple-200);
+  --teddy-color-background-card-light-purple-active-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-card-light-purple-active: var(--teddy-color-purple-300);
+  --teddy-color-background-card-light-purple-hover-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-card-light-purple-hover: var(--teddy-color-purple-200);
+  --teddy-color-background-card-light-purple-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-light-purple: var(--teddy-color-purple-100);
+  --teddy-color-background-card-beige-emphasis-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-emphasis-active: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-emphasis-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-emphasis-hover: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-emphasis-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-beige-emphasis: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-active: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-beige-hover: var(--teddy-color-beige-100);
+  --teddy-color-background-card-beige-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-beige: var(--teddy-color-functional-white);
+  --teddy-color-background-card-gray-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-gray-active: var(--teddy-color-purple-100);
+  --teddy-color-background-card-gray-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-gray-hover: var(--teddy-color-purple-100);
+  --teddy-color-background-card-gray-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-gray: var(--teddy-color-functional-white);
+  --teddy-color-background-card-default-active-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-default-active: var(--teddy-color-purple-100);
+  --teddy-color-background-card-default-hover-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-card-default-hover: var(--teddy-color-purple-100);
+  --teddy-color-background-card-default-negative: var(--teddy-color-gray-900);
+  --teddy-color-background-card-default: var(--teddy-color-functional-white);
+  --teddy-color-background-light-purple-negative: var(--teddy-color-gray-700);
+  --teddy-color-background-light-purple: var(--teddy-color-purple-50);
   --teddy-color-background-tone-on-tone-quaternary: var(--teddy-color-beige-50);
   --teddy-color-background-tone-on-tone-tertiary: var(--teddy-color-beige-100);
   --teddy-color-background-tone-on-tone-secondary: var(--teddy-color-purple-100);
   --teddy-color-background-tone-on-tone-primary: var(--teddy-color-purple-900);
+  --teddy-color-background-status-attention-negative: var(--teddy-color-purple-700);
+  --teddy-color-background-status-special-strong-negative: var(--teddy-color-purple-800);
+  --teddy-color-background-status-special-strong: var(--teddy-color-purple-100);
+  --teddy-color-background-status-special-negative: var(--teddy-color-purple-900);
+  --teddy-color-background-status-neutral-negative: var(--teddy-color-gray-700);
+  --teddy-color-background-status-warning-strong-negative: var(--teddy-color-orange-600);
+  --teddy-color-background-status-warning-negative: var(--teddy-color-orange-700);
+  --teddy-color-background-status-error-strong-negative: var(--teddy-color-red-600);
+  --teddy-color-background-status-error-negative: var(--teddy-color-red-700);
+  --teddy-color-background-status-success-strong-negative: var(--teddy-color-green-600);
+  --teddy-color-background-status-success-negative: var(--teddy-color-green-700);
+  --teddy-color-background-status-info-strong-negative: var(--teddy-color-blue-600);
+  --teddy-color-background-status-info-negative: var(--teddy-color-blue-700);
   --teddy-color-background-status-attention: var(--teddy-color-purple-700);
   --teddy-color-background-status-special: var(--teddy-color-purple-100);
   --teddy-color-background-status-neutral: var(--teddy-color-gray-100);
@@ -6447,11 +6688,23 @@
   --teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
   --teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
   --teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
+  --teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
   --teddy-color-background-secondary: var(--teddy-color-gray-50);
+  --teddy-color-background-primary-negative: var(--teddy-color-gray-900);
   --teddy-color-background-primary: var(--teddy-color-functional-white);
+  --teddy-color-text-card-beige-negative: var(--teddy-color-beige-100);
+  --teddy-color-text-card-beige: var(--teddy-color-beige-700);
+  --teddy-color-text-card-teal-negative: var(--teddy-color-teal-50);
+  --teddy-color-text-card-teal: var(--teddy-color-teal-700);
   --teddy-color-text-tone-on-tone-tertiary: var(--teddy-color-beige-700);
   --teddy-color-text-tone-on-tone-secondary: var(--teddy-color-purple-900);
   --teddy-color-text-tone-on-tone-primary: var(--teddy-color-purple-100);
+  --teddy-color-text-status-special-negative: var(--teddy-color-transparent-white-850);
+  --teddy-color-text-status-neutral-negative: var(--teddy-color-transparent-white-850);
+  --teddy-color-text-status-info-strong-negative: var(--teddy-color-blue-100);
+  --teddy-color-text-status-warning-strong-negative: var(--teddy-color-orange-100);
+  --teddy-color-text-status-success-strong-negative: var(--teddy-color-green-100);
+  --teddy-color-text-status-error-strong-negative: var(--teddy-color-red-100);
   --teddy-color-text-status-attention: var(--teddy-color-functional-white);
   --teddy-color-text-status-special: var(--teddy-color-purple-800);
   --teddy-color-text-status-neutral: var(--teddy-color-transparent-black-700);