@staffbase/design 18.3.0

package/dist/theme.css

@@ -0,0 +1,481 @@
+@theme inline {
+  /* Alias chart colors */
+  --color-*: initial;
+  --color-chart-neutral-50: var(--sb-chart-color-neutral-50);
+  --color-chart-neutral-100: var(--sb-chart-color-neutral-100);
+  --color-chart-neutral-200: var(--sb-chart-color-neutral-200);
+  --color-chart-neutral-300: var(--sb-chart-color-neutral-300);
+  --color-chart-neutral-400: var(--sb-chart-color-neutral-400);
+  --color-chart-neutral-500: var(--sb-chart-color-neutral-500);
+  --color-chart-neutral-600: var(--sb-chart-color-neutral-600);
+  --color-chart-neutral-700: var(--sb-chart-color-neutral-700);
+  --color-chart-neutral-800: var(--sb-chart-color-neutral-800);
+  --color-chart-neutral-900: var(--sb-chart-color-neutral-900);
+  --color-chart-negative-100: var(--sb-chart-color-negative-100);
+  --color-chart-negative-200: var(--sb-chart-color-negative-200);
+  --color-chart-negative-300: var(--sb-chart-color-negative-300);
+  --color-chart-negative-400: var(--sb-chart-color-negative-400);
+  --color-chart-negative-500: var(--sb-chart-color-negative-500);
+  --color-chart-negative-600: var(--sb-chart-color-negative-600);
+  --color-chart-negative-700: var(--sb-chart-color-negative-700);
+  --color-chart-negative-800: var(--sb-chart-color-negative-800);
+  --color-chart-positive-100: var(--sb-chart-color-positive-100);
+  --color-chart-positive-200: var(--sb-chart-color-positive-200);
+  --color-chart-positive-300: var(--sb-chart-color-positive-300);
+  --color-chart-positive-400: var(--sb-chart-color-positive-400);
+  --color-chart-positive-500: var(--sb-chart-color-positive-500);
+  --color-chart-positive-600: var(--sb-chart-color-positive-600);
+  --color-chart-positive-700: var(--sb-chart-color-positive-700);
+  --color-chart-positive-800: var(--sb-chart-color-positive-800);
+
+  /* Alias text colors */
+  --text-color-*: initial;
+  --text-color-neutral-strong: var(--sb-text-color-neutral-strong);
+  --text-color-neutral-medium: var(--sb-text-color-neutral-medium);
+  --text-color-neutral-placeholder: var(--sb-text-color-neutral-placeholder);
+  --text-color-neutral-inverse: var(--sb-text-color-neutral-inverse);
+  --text-color-critical-strong: var(--sb-text-color-critical-strong);
+  --text-color-critical-vivid: var(--sb-text-color-critical-vivid);
+  --text-color-critical-weak: var(--sb-text-color-critical-weak);
+  --text-color-critical-inverse: var(--sb-text-color-critical-inverse);
+  --text-color-success-strong: var(--sb-text-color-success-strong);
+  --text-color-success-vivid: var(--sb-text-color-success-vivid);
+  --text-color-success-weak: var(--sb-text-color-success-weak);
+  --text-color-success-inverse: var(--sb-text-color-success-inverse);
+  --text-color-warning-strong: var(--sb-text-color-warning-strong);
+  --text-color-warning-vivid: var(--sb-text-color-warning-vivid);
+  --text-color-warning-weak: var(--sb-text-color-warning-weak);
+  --text-color-warning-inverse: var(--sb-text-color-warning-inverse);
+  --text-color-purple-strong: var(--sb-text-color-purple-strong);
+  --text-color-purple-vivid: var(--sb-text-color-purple-vivid);
+  --text-color-purple-weak: var(--sb-text-color-purple-weak);
+  --text-color-purple-inverse: var(--sb-text-color-purple-inverse);
+  --text-color-pink-strong: var(--sb-text-color-pink-strong);
+  --text-color-pink-vivid: var(--sb-text-color-pink-vivid);
+  --text-color-pink-weak: var(--sb-text-color-pink-weak);
+  --text-color-pink-inverse: var(--sb-text-color-pink-inverse);
+  --text-color-cyan-strong: var(--sb-text-color-cyan-strong);
+  --text-color-cyan-vivid: var(--sb-text-color-cyan-vivid);
+  --text-color-cyan-weak: var(--sb-text-color-cyan-weak);
+  --text-color-cyan-inverse: var(--sb-text-color-cyan-inverse);
+  --text-color-teal-strong: var(--sb-text-color-teal-strong);
+  --text-color-teal-vivid: var(--sb-text-color-teal-vivid);
+  --text-color-teal-weak: var(--sb-text-color-teal-weak);
+  --text-color-teal-inverse: var(--sb-text-color-teal-inverse);
+  --text-color-primary-strong: var(--sb-text-color-primary-strong);
+  --text-color-primary-vivid: var(--sb-text-color-primary-vivid);
+  --text-color-primary-weak: var(--sb-text-color-primary-weak);
+  --text-color-primary-inverse: var(--sb-text-color-primary-inverse);
+
+  /* Alias icon colors */
+  --text-color-icon-neutral-weak: var(--sb-icon-color-neutral-weak);
+  --text-color-icon-neutral-medium: var(--sb-icon-color-neutral-medium);
+  --text-color-icon-neutral-strong: var(--sb-icon-color-neutral-strong);
+  --text-color-icon-inverse: var(--sb-icon-color-inverse);
+  --text-color-icon-primary: var(--sb-icon-color-primary);
+  --text-color-icon-critical: var(--sb-icon-color-critical);
+  --text-color-icon-success: var(--sb-icon-color-success);
+  --text-color-icon-warning: var(--sb-icon-color-warning);
+  --text-color-icon-purple: var(--sb-icon-color-purple);
+  --text-color-icon-pink: var(--sb-icon-color-pink);
+  --text-color-icon-cyan: var(--sb-icon-color-cyan);
+  --text-color-icon-teal: var(--sb-icon-color-teal);
+
+  /* Alias border colors */
+  --border-color-*: initial;
+  --border-color-neutral-strong: var(--sb-border-color-neutral-strong);
+  --border-color-neutral-medium: var(--sb-border-color-neutral-medium);
+  --border-color-neutral-weak: var(--sb-border-color-neutral-weak);
+  --border-color-primary: var(--sb-border-color-primary);
+  --border-color-critical: var(--sb-border-color-critical);
+  --border-color-success: var(--sb-border-color-success);
+  --border-color-warning: var(--sb-border-color-warning);
+  --border-color-purple: var(--sb-border-color-purple);
+  --border-color-pink: var(--sb-border-color-pink);
+  --border-color-cyan: var(--sb-border-color-cyan);
+  --border-color-teal: var(--sb-border-color-teal);
+  --border-color-inverse: var(--sb-border-color-inverse);
+
+  --ring-color-*: initial;
+  --ring-color-neutral-strong: var(--sb-border-color-neutral-strong);
+  --ring-color-neutral-medium: var(--sb-border-color-neutral-medium);
+  --ring-color-neutral-weak: var(--sb-border-color-neutral-weak);
+  --ring-color-primary: var(--sb-border-color-primary);
+  --ring-color-critical: var(--sb-border-color-critical);
+  --ring-color-success: var(--sb-border-color-success);
+  --ring-color-warning: var(--sb-border-color-warning);
+  --ring-color-purple: var(--sb-border-color-purple);
+  --ring-color-pink: var(--sb-border-color-pink);
+  --ring-color-cyan: var(--sb-border-color-cyan);
+  --ring-color-teal: var(--sb-border-color-teal);
+  --ring-color-inverse: var(--sb-border-color-inverse);
+
+  --outline-color-*: initial;
+  --outline-color-neutral-strong: var(--sb-border-color-neutral-strong);
+  --outline-color-neutral-medium: var(--sb-border-color-neutral-medium);
+  --outline-color-neutral-weak: var(--sb-border-color-neutral-weak);
+  --outline-color-primary: var(--sb-border-color-primary);
+  --outline-color-critical: var(--sb-border-color-critical);
+  --outline-color-success: var(--sb-border-color-success);
+  --outline-color-warning: var(--sb-border-color-warning);
+  --outline-color-purple: var(--sb-border-color-purple);
+  --outline-color-pink: var(--sb-border-color-pink);
+  --outline-color-cyan: var(--sb-border-color-cyan);
+  --outline-color-teal: var(--sb-border-color-teal);
+  --outline-color-inverse: var(--sb-border-color-inverse);
+
+  --stroke-*: initial;
+  --stroke-neutral-strong: var(--sb-border-color-neutral-strong);
+  --stroke-neutral-medium: var(--sb-border-color-neutral-medium);
+  --stroke-neutral-weak: var(--sb-border-color-neutral-weak);
+  --stroke-primary: var(--sb-border-color-primary);
+  --stroke-critical: var(--sb-border-color-critical);
+  --stroke-success: var(--sb-border-color-success);
+  --stroke-warning: var(--sb-border-color-warning);
+  --stroke-purple: var(--sb-border-color-purple);
+  --stroke-pink: var(--sb-border-color-pink);
+  --stroke-cyan: var(--sb-border-color-cyan);
+  --stroke-teal: var(--sb-border-color-teal);
+  --stroke-inverse: var(--sb-border-color-inverse);
+
+  /* Alias background colors */
+  --background-color-*: initial;
+  --background-color-neutral-strong: var(--sb-background-color-neutral-strong);
+  --background-color-neutral-strong-hover: var(--sb-background-color-neutral-strong-hover);
+  --background-color-neutral-strong-pressed: var(--sb-background-color-neutral-strong-pressed);
+  --background-color-neutral-medium: var(--sb-background-color-neutral-medium);
+  --background-color-neutral-medium-hover: var(--sb-background-color-neutral-medium-hover);
+  --background-color-neutral-medium-pressed: var(--sb-background-color-neutral-medium-pressed);
+  --background-color-neutral-base: var(--sb-background-color-neutral-base);
+  --background-color-neutral-base-hover: var(--sb-background-color-neutral-base-hover);
+  --background-color-neutral-base-pressed: var(--sb-background-color-neutral-base-pressed);
+  --background-color-neutral-surface: var(--sb-background-color-neutral-surface);
+  --background-color-neutral-surface-hover: var(--sb-background-color-neutral-surface-hover);
+  --background-color-neutral-surface-pressed: var(--sb-background-color-neutral-surface-pressed);
+
+  --background-color-primary-dark: var(--sb-background-color-primary-dark);
+  --background-color-primary-dark-hover: var(--sb-background-color-primary-dark-hover);
+  --background-color-primary-dark-pressed: var(--sb-background-color-primary-dark-pressed);
+  --background-color-primary-strong: var(--sb-background-color-primary-strong);
+  --background-color-primary-strong-hover: var(--sb-background-color-primary-strong-hover);
+  --background-color-primary-strong-pressed: var(--sb-background-color-primary-strong-pressed);
+  --background-color-primary-vivid: var(--sb-background-color-primary-vivid);
+  --background-color-primary-vivid-hover: var(--sb-background-color-primary-vivid-hover);
+  --background-color-primary-vivid-pressed: var(--sb-background-color-primary-vivid-pressed);
+  --background-color-primary-medium: var(--sb-background-color-primary-medium);
+  --background-color-primary-medium-hover: var(--sb-background-color-primary-medium-hover);
+  --background-color-primary-medium-pressed: var(--sb-background-color-primary-medium-pressed);
+  --background-color-primary-weak: var(--sb-background-color-primary-weak);
+  --background-color-primary-weak-hover: var(--sb-background-color-primary-weak-hover);
+  --background-color-primary-weak-pressed: var(--sb-background-color-primary-weak-pressed);
+  --background-color-primary-inverse: var(--sb-background-color-primary-inverse);
+  --background-color-primary-inverse-hover: var(--sb-background-color-primary-inverse-hover);
+  --background-color-primary-inverse-pressed: var(--sb-background-color-primary-inverse-pressed);
+
+  --background-color-yellow-dark: var(--sb-background-color-yellow-dark);
+  --background-color-yellow-dark-hover: var(--sb-background-color-yellow-dark-hover);
+  --background-color-yellow-dark-pressed: var(--sb-background-color-yellow-dark-pressed);
+  --background-color-yellow-strong: var(--sb-background-color-yellow-strong);
+  --background-color-yellow-strong-hover: var(--sb-background-color-yellow-strong-hover);
+  --background-color-yellow-strong-pressed: var(--sb-background-color-yellow-strong-pressed);
+  --background-color-yellow-vivid: var(--sb-background-color-yellow-vivid);
+  --background-color-yellow-vivid-hover: var(--sb-background-color-yellow-vivid-hover);
+  --background-color-yellow-vivid-pressed: var(--sb-background-color-yellow-vivid-pressed);
+  --background-color-yellow-medium: var(--sb-background-color-yellow-medium);
+  --background-color-yellow-medium-hover: var(--sb-background-color-yellow-medium-hover);
+  --background-color-yellow-medium-pressed: var(--sb-background-color-yellow-medium-pressed);
+  --background-color-yellow-weak: var(--sb-background-color-yellow-weak);
+  --background-color-yellow-weak-hover: var(--sb-background-color-yellow-weak-hover);
+  --background-color-yellow-weak-pressed: var(--sb-background-color-yellow-weak-pressed);
+  --background-color-yellow-inverse: var(--sb-background-color-yellow-inverse);
+  --background-color-yellow-inverse-hover: var(--sb-background-color-yellow-inverse-hover);
+  --background-color-yellow-inverse-pressed: var(--sb-background-color-yellow-inverse-pressed);
+
+  --background-color-critical-dark: var(--sb-background-color-critical-dark);
+  --background-color-critical-dark-hover: var(--sb-background-color-critical-dark-hover);
+  --background-color-critical-dark-pressed: var(--sb-background-color-critical-dark-pressed);
+  --background-color-critical-strong: var(--sb-background-color-critical-strong);
+  --background-color-critical-strong-hover: var(--sb-background-color-critical-strong-hover);
+  --background-color-critical-strong-pressed: var(--sb-background-color-critical-strong-pressed);
+  --background-color-critical-vivid: var(--sb-background-color-critical-vivid);
+  --background-color-critical-vivid-hover: var(--sb-background-color-critical-vivid-hover);
+  --background-color-critical-vivid-pressed: var(--sb-background-color-critical-vivid-pressed);
+  --background-color-critical-medium: var(--sb-background-color-critical-medium);
+  --background-color-critical-medium-hover: var(--sb-background-color-critical-medium-hover);
+  --background-color-critical-medium-pressed: var(--sb-background-color-critical-medium-pressed);
+  --background-color-critical-weak: var(--sb-background-color-critical-weak);
+  --background-color-critical-weak-hover: var(--sb-background-color-critical-weak-hover);
+  --background-color-critical-weak-pressed: var(--sb-background-color-critical-weak-pressed);
+  --background-color-critical-inverse: var(--sb-background-color-critical-inverse);
+  --background-color-critical-inverse-hover: var(--sb-background-color-critical-inverse-hover);
+  --background-color-critical-inverse-pressed: var(--sb-background-color-critical-inverse-pressed);
+
+  --background-color-success-dark: var(--sb-background-color-success-dark);
+  --background-color-success-dark-hover: var(--sb-background-color-success-dark-hover);
+  --background-color-success-dark-pressed: var(--sb-background-color-success-dark-pressed);
+  --background-color-success-strong: var(--sb-background-color-success-strong);
+  --background-color-success-strong-hover: var(--sb-background-color-success-strong-hover);
+  --background-color-success-strong-pressed: var(--sb-background-color-success-strong-pressed);
+  --background-color-success-vivid: var(--sb-background-color-success-vivid);
+  --background-color-success-vivid-hover: var(--sb-background-color-success-vivid-hover);
+  --background-color-success-vivid-pressed: var(--sb-background-color-success-vivid-pressed);
+  --background-color-success-medium: var(--sb-background-color-success-medium);
+  --background-color-success-medium-hover: var(--sb-background-color-success-medium-hover);
+  --background-color-success-medium-pressed: var(--sb-background-color-success-medium-pressed);
+  --background-color-success-weak: var(--sb-background-color-success-weak);
+  --background-color-success-weak-hover: var(--sb-background-color-success-weak-hover);
+  --background-color-success-weak-pressed: var(--sb-background-color-success-weak-pressed);
+  --background-color-success-inverse: var(--sb-background-color-success-inverse);
+  --background-color-success-inverse-hover: var(--sb-background-color-success-inverse-hover);
+  --background-color-success-inverse-pressed: var(--sb-background-color-success-inverse-pressed);
+
+  --background-color-warning-dark: var(--sb-background-color-warning-dark);
+  --background-color-warning-dark-hover: var(--sb-background-color-warning-dark-hover);
+  --background-color-warning-dark-pressed: var(--sb-background-color-warning-dark-pressed);
+  --background-color-warning-strong: var(--sb-background-color-warning-strong);
+  --background-color-warning-strong-hover: var(--sb-background-color-warning-strong-hover);
+  --background-color-warning-strong-pressed: var(--sb-background-color-warning-strong-pressed);
+  --background-color-warning-vivid: var(--sb-background-color-warning-vivid);
+  --background-color-warning-vivid-hover: var(--sb-background-color-warning-vivid-hover);
+  --background-color-warning-vivid-pressed: var(--sb-background-color-warning-vivid-pressed);
+  --background-color-warning-medium: var(--sb-background-color-warning-medium);
+  --background-color-warning-medium-hover: var(--sb-background-color-warning-medium-hover);
+  --background-color-warning-medium-pressed: var(--sb-background-color-warning-medium-pressed);
+  --background-color-warning-weak: var(--sb-background-color-warning-weak);
+  --background-color-warning-weak-hover: var(--sb-background-color-warning-weak-hover);
+  --background-color-warning-weak-pressed: var(--sb-background-color-warning-weak-pressed);
+  --background-color-warning-inverse: var(--sb-background-color-warning-inverse);
+  --background-color-warning-inverse-hover: var(--sb-background-color-warning-inverse-hover);
+  --background-color-warning-inverse-pressed: var(--sb-background-color-warning-inverse-pressed);
+
+  --background-color-purple-dark: var(--sb-background-color-purple-dark);
+  --background-color-purple-dark-hover: var(--sb-background-color-purple-dark-hover);
+  --background-color-purple-dark-pressed: var(--sb-background-color-purple-dark-pressed);
+  --background-color-purple-strong: var(--sb-background-color-purple-strong);
+  --background-color-purple-strong-hover: var(--sb-background-color-purple-strong-hover);
+  --background-color-purple-strong-pressed: var(--sb-background-color-purple-strong-pressed);
+  --background-color-purple-vivid: var(--sb-background-color-purple-vivid);
+  --background-color-purple-vivid-hover: var(--sb-background-color-purple-vivid-hover);
+  --background-color-purple-vivid-pressed: var(--sb-background-color-purple-vivid-pressed);
+  --background-color-purple-medium: var(--sb-background-color-purple-medium);
+  --background-color-purple-medium-hover: var(--sb-background-color-purple-medium-hover);
+  --background-color-purple-medium-pressed: var(--sb-background-color-purple-medium-pressed);
+  --background-color-purple-weak: var(--sb-background-color-purple-weak);
+  --background-color-purple-weak-hover: var(--sb-background-color-purple-weak-hover);
+  --background-color-purple-weak-pressed: var(--sb-background-color-purple-weak-pressed);
+  --background-color-purple-inverse: var(--sb-background-color-purple-inverse);
+  --background-color-purple-inverse-hover: var(--sb-background-color-purple-inverse-hover);
+  --background-color-purple-inverse-pressed: var(--sb-background-color-purple-inverse-pressed);
+
+  --background-color-pink-dark: var(--sb-background-color-pink-dark);
+  --background-color-pink-dark-hover: var(--sb-background-color-pink-dark-hover);
+  --background-color-pink-dark-pressed: var(--sb-background-color-pink-dark-pressed);
+  --background-color-pink-strong: var(--sb-background-color-pink-strong);
+  --background-color-pink-strong-hover: var(--sb-background-color-pink-strong-hover);
+  --background-color-pink-strong-pressed: var(--sb-background-color-pink-strong-pressed);
+  --background-color-pink-vivid: var(--sb-background-color-pink-vivid);
+  --background-color-pink-vivid-hover: var(--sb-background-color-pink-vivid-hover);
+  --background-color-pink-vivid-pressed: var(--sb-background-color-pink-vivid-pressed);
+  --background-color-pink-medium: var(--sb-background-color-pink-medium);
+  --background-color-pink-medium-hover: var(--sb-background-color-pink-medium-hover);
+  --background-color-pink-medium-pressed: var(--sb-background-color-pink-medium-pressed);
+  --background-color-pink-weak: var(--sb-background-color-pink-weak);
+  --background-color-pink-weak-hover: var(--sb-background-color-pink-weak-hover);
+  --background-color-pink-weak-pressed: var(--sb-background-color-pink-weak-pressed);
+  --background-color-pink-inverse: var(--sb-background-color-pink-inverse);
+  --background-color-pink-inverse-hover: var(--sb-background-color-pink-inverse-hover);
+  --background-color-pink-inverse-pressed: var(--sb-background-color-pink-inverse-pressed);
+
+  --background-color-cyan-dark: var(--sb-background-color-cyan-dark);
+  --background-color-cyan-dark-hover: var(--sb-background-color-cyan-dark-hover);
+  --background-color-cyan-dark-pressed: var(--sb-background-color-cyan-dark-pressed);
+  --background-color-cyan-strong: var(--sb-background-color-cyan-strong);
+  --background-color-cyan-strong-hover: var(--sb-background-color-cyan-strong-hover);
+  --background-color-cyan-strong-pressed: var(--sb-background-color-cyan-strong-pressed);
+  --background-color-cyan-vivid: var(--sb-background-color-cyan-vivid);
+  --background-color-cyan-vivid-hover: var(--sb-background-color-cyan-vivid-hover);
+  --background-color-cyan-vivid-pressed: var(--sb-background-color-cyan-vivid-pressed);
+  --background-color-cyan-medium: var(--sb-background-color-cyan-medium);
+  --background-color-cyan-medium-hover: var(--sb-background-color-cyan-medium-hover);
+  --background-color-cyan-medium-pressed: var(--sb-background-color-cyan-medium-pressed);
+  --background-color-cyan-weak: var(--sb-background-color-cyan-weak);
+  --background-color-cyan-weak-hover: var(--sb-background-color-cyan-weak-hover);
+  --background-color-cyan-weak-pressed: var(--sb-background-color-cyan-weak-pressed);
+  --background-color-cyan-inverse: var(--sb-background-color-cyan-inverse);
+  --background-color-cyan-inverse-hover: var(--sb-background-color-cyan-inverse-hover);
+  --background-color-cyan-inverse-pressed: var(--sb-background-color-cyan-inverse-pressed);
+
+  --background-color-teal-dark: var(--sb-background-color-teal-dark);
+  --background-color-teal-dark-hover: var(--sb-background-color-teal-dark-hover);
+  --background-color-teal-dark-pressed: var(--sb-background-color-teal-dark-pressed);
+  --background-color-teal-strong: var(--sb-background-color-teal-strong);
+  --background-color-teal-strong-hover: var(--sb-background-color-teal-strong-hover);
+  --background-color-teal-strong-pressed: var(--sb-background-color-teal-strong-pressed);
+  --background-color-teal-vivid: var(--sb-background-color-teal-vivid);
+  --background-color-teal-vivid-hover: var(--sb-background-color-teal-vivid-hover);
+  --background-color-teal-vivid-pressed: var(--sb-background-color-teal-vivid-pressed);
+  --background-color-teal-medium: var(--sb-background-color-teal-medium);
+  --background-color-teal-medium-hover: var(--sb-background-color-teal-medium-hover);
+  --background-color-teal-medium-pressed: var(--sb-background-color-teal-medium-pressed);
+  --background-color-teal-weak: var(--sb-background-color-teal-weak);
+  --background-color-teal-weak-hover: var(--sb-background-color-teal-weak-hover);
+  --background-color-teal-weak-pressed: var(--sb-background-color-teal-weak-pressed);
+  --background-color-teal-inverse: var(--sb-background-color-teal-inverse);
+  --background-color-teal-inverse-hover: var(--sb-background-color-teal-inverse-hover);
+  --background-color-teal-inverse-pressed: var(--sb-background-color-teal-inverse-pressed);
+
+  /* Component Badge colors */
+  --text-color-badge-critical: var(--sb-badge-text-color-critical);
+  --text-color-badge-primary: var(--sb-badge-text-color-primary);
+  --background-color-badge-critical: var(--sb-badge-background-color-critical);
+  --background-color-badge-primary: var(--sb-badge-background-color-primary);
+
+  /* Component Button colors */
+  --text-color-button-critical: var(--sb-button-text-color-critical);
+  --text-color-button-critical-icon: var(--sb-button-icon-color-critical);
+  --text-color-button-critical-inverse: var(--sb-button-text-color-critical-inverse);
+  --text-color-button-critical-icon-inverse: var(--sb-button-icon-color-critical-inverse);
+  --text-color-button-primary: var(--sb-button-text-color-primary);
+  --text-color-button-primary-icon: var(--sb-button-icon-color-primary);
+  --text-color-button-primary-inverse: var(--sb-button-text-color-primary-inverse);
+  --text-color-button-primary-icon-inverse: var(--sb-button-icon-color-primary-inverse);
+  --background-color-button-critical: var(--sb-button-background-color-critical);
+  --background-color-button-critical-hover: var(--sb-button-background-color-critical-hover);
+  --background-color-button-critical-pressed: var(--sb-button-background-color-critical-pressed);
+  --background-color-button-critical-inverse: var(--sb-button-background-color-critical-inverse);
+  --background-color-button-critical-inverse-hover: var(--sb-button-background-color-critical-inverse-hover);
+  --background-color-button-critical-inverse-pressed: var(--sb-button-background-color-critical-inverse-pressed);
+  --background-color-button-primary: var(--sb-button-background-color-primary);
+  --background-color-button-primary-hover: var(--sb-button-background-color-primary-hover);
+  --background-color-button-primary-pressed: var(--sb-button-background-color-primary-pressed);
+  --background-color-button-primary-inverse: var(--sb-button-background-color-primary-inverse);
+  --background-color-button-primary-inverse-hover: var(--sb-button-background-color-primary-inverse-hover);
+  --background-color-button-primary-inverse-pressed: var(--sb-button-background-color-primary-inverse-pressed);
+
+  /* Component Ghost Button colors */
+  --text-color-ghost-button-critical: var(--sb-ghost-button-text-color-critical);
+  --text-color-ghost-button-critical-icon: var(--sb-ghost-button-icon-color-critical);
+  --text-color-ghost-button-critical-inverse: var(--sb-ghost-button-text-color-critical-inverse);
+  --text-color-ghost-button-critical-icon-inverse: var(--sb-ghost-button-icon-color-critical-inverse);
+  --text-color-ghost-button-primary: var(--sb-ghost-button-text-color-primary);
+  --text-color-ghost-button-primary-icon: var(--sb-ghost-button-icon-color-primary);
+  --text-color-ghost-button-primary-inverse: var(--sb-ghost-button-text-color-primary-inverse);
+  --text-color-ghost-button-primary-icon-inverse: var(--sb-ghost-button-icon-color-primary-inverse);
+  --background-color-ghost-button-critical-hover: var(--sb-ghost-button-background-color-critical-hover);
+  --background-color-ghost-button-critical-pressed: var(--sb-ghost-button-background-color-critical-pressed);
+  --background-color-ghost-button-critical-inverse-hover: var(
+    --sb-ghost-button-background-color-critical-inverse-hover
+  );
+  --background-color-ghost-button-critical-inverse-pressed: var(
+    --sb-ghost-button-background-color-critical-inverse-pressed
+  );
+  --background-color-ghost-button-primary-hover: var(--sb-ghost-button-background-color-primary-hover);
+  --background-color-ghost-button-primary-pressed: var(--sb-ghost-button-background-color-primary-pressed);
+  --background-color-ghost-button-primary-inverse-hover: var(--sb-ghost-button-background-color-primary-inverse-hover);
+  --background-color-ghost-button-primary-inverse-pressed: var(
+    --sb-ghost-button-background-color-primary-inverse-pressed
+  );
+
+  /* Component Link colors */
+  --text-color-link-primary: var(--sb-link-text-color-primary);
+
+  /* Shadows */
+  --shadow-*: initial;
+  --shadow-sm: var(--sb-shadow-sm);
+  --shadow-md: var(--sb-shadow-md);
+  --shadow-lg: var(--sb-shadow-lg);
+  --shadow-focus: var(--sb-shadow-focus);
+
+  /* Radii */
+  --radius-*: initial;
+  --radius-sm: var(--sb-radius-sm);
+  --radius-md: var(--sb-radius-md);
+  --radius-lg: var(--sb-radius-lg);
+  --radius-xl: var(--sb-radius-xl);
+
+  /* Fonts */
+  --font-*: initial;
+  --font-default: var(--sb-font-family-default);
+  --font-display: var(--sb-font-family-display);
+
+  /* Font weights */
+  --font-weight-*: initial;
+  --font-weight-normal: var(--sb-font-weight-normal);
+  --font-weight-medium: var(--sb-font-weight-medium);
+  --font-weight-semibold: var(--sb-font-weight-semibold);
+  --font-weight-bold: var(--sb-font-weight-bold);
+
+  /* Line heights */
+  --leading-*: initial;
+  --leading-12: var(--sb-line-height-12);
+  --leading-14: var(--sb-line-height-14);
+  --leading-16: var(--sb-line-height-16);
+  --leading-18: var(--sb-line-height-18);
+  --leading-20: var(--sb-line-height-20);
+  --leading-22: var(--sb-line-height-22);
+  --leading-24: var(--sb-line-height-24);
+  --leading-26: var(--sb-line-height-26);
+  --leading-28: var(--sb-line-height-28);
+  --leading-32: var(--sb-line-height-32);
+  --leading-40: var(--sb-line-height-40);
+  --leading-42: var(--sb-line-height-42);
+
+  /* Letter spacing */
+  --tracking-*: initial;
+  --tracking-normal: var(--sb-letter-spacing-normal);
+  --tracking-display: var(--sb-letter-spacing-display);
+  --tracking-headline: var(--sb-letter-spacing-headline);
+
+  /* Font sizes */
+  --text-*: initial;
+  --text-xs: var(--sb-font-size-xs);
+  --text-sm: var(--sb-font-size-sm);
+  --text-md: var(--sb-font-size-md);
+  --text-lg: var(--sb-font-size-lg);
+  --text-xl: var(--sb-font-size-xl);
+  --text-2xl: var(--sb-font-size-2xl);
+  --text-3xl: var(--sb-font-size-3xl);
+  --text-4xl: var(--sb-font-size-4xl);
+  --text-5xl: var(--sb-font-size-5xl);
+
+  /* Breakpoints */
+  --breakpoint-xs: 30rem;
+
+  /* Typography */
+  --text-body-lg: var(--sb-font-size-lg);
+  --text-body-lg--line-height: calc(1.5rem / 1.125rem); /* 24px */
+  --text-body-lg--font-weight: var(--sb-font-weight-normal);
+  --text-body-md: var(--sb-font-size-md);
+  --text-body-md--line-height: calc(1.375rem / 1rem); /* 22px */
+  --text-body-md--font-weight: var(--sb-font-weight-normal);
+  --text-body-sm: var(--sb-font-size-sm);
+  --text-body-sm--line-height: calc(1.125rem / 0.875rem); /* 18px */
+  --text-body-sm--font-weight: var(--sb-font-weight-normal);
+  --text-body-xs: var(--sb-font-size-xs);
+  --text-body-xs--line-height: calc(1rem / 0.75rem); /* 16px */
+  --text-body-xs--font-weight: var(--sb-font-weight-normal);
+  --text-display: var(--sb-font-size-2xl);
+  --text-display--line-height: calc(2rem / 1.5rem); /* 32px */
+  --text-display--font-weight: var(--sb-font-weight-bold);
+  --text-label-lg: var(--sb-font-size-lg);
+  --text-label-lg--line-height: calc(1.5rem / 1.125rem); /* 24px */
+  --text-label-lg--font-weight: var(--sb-font-weight-medium);
+  --text-label-md: var(--sb-font-size-md);
+  --text-label-md--line-height: calc(1.375rem / 1rem); /* 22px */
+  --text-label-md--font-weight: var(--sb-font-weight-medium);
+  --text-label-sm: var(--sb-font-size-sm);
+  --text-label-sm--line-height: calc(1.125rem / 0.875rem); /* 18px */
+  --text-label-sm--font-weight: var(--sb-font-weight-medium);
+  --text-label-xs: var(--sb-font-size-xs);
+  --text-label-xs--line-height: calc(1rem / 0.75rem); /* 16px */
+  --text-label-xs--font-weight: var(--sb-font-weight-medium);
+  --text-title-lg: var(--sb-font-size-lg);
+  --text-title-lg--line-height: calc(1.5rem / 1.125rem); /* 24px */
+  --text-title-lg--font-weight: var(--sb-font-weight-semibold);
+  --text-title-md: var(--sb-font-size-md);
+  --text-title-md--line-height: calc(1.375rem / 1rem); /* 22px */
+  --text-title-md--font-weight: var(--sb-font-weight-semibold);
+  --text-title-sm: var(--sb-font-size-sm);
+  --text-title-sm--line-height: calc(1.125rem / 0.875rem); /* 18px */
+  --text-title-sm--font-weight: var(--sb-font-weight-semibold);
+}

package/dist/tokens/component.css

@@ -0,0 +1,47 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, :host {
+  --sb-badge-text-color-critical: var(--sb-text-color-critical-inverse);
+  --sb-badge-background-color-critical: var(--sb-background-color-critical-vivid);
+  --sb-button-text-color-critical: var(--sb-text-color-critical-inverse);
+  --sb-button-text-color-critical-inverse: var(--sb-text-color-critical-vivid);
+  --sb-button-icon-color-critical: var(--sb-icon-color-critical);
+  --sb-button-icon-color-critical-inverse: var(--sb-icon-color-inverse);
+  --sb-button-icon-color-primary-inverse: var(--sb-icon-color-inverse);
+  --sb-button-background-color-critical: var(--sb-background-color-critical-vivid);
+  --sb-button-background-color-critical-hover: var(--sb-background-color-critical-vivid-hover);
+  --sb-button-background-color-critical-pressed: var(--sb-background-color-critical-vivid-pressed);
+  --sb-button-background-color-critical-inverse: var(--sb-background-color-critical-inverse);
+  --sb-button-background-color-critical-inverse-hover: var(--sb-background-color-critical-inverse-hover);
+  --sb-button-background-color-critical-inverse-pressed: var(--sb-background-color-critical-inverse-pressed);
+  --sb-ghost-button-text-color-critical: var(--sb-text-color-critical-vivid);
+  --sb-ghost-button-text-color-critical-inverse: var(--sb-text-color-critical-inverse);
+  --sb-ghost-button-icon-color-critical: var(--sb-icon-color-critical);
+  --sb-ghost-button-icon-color-critical-inverse: var(--sb-icon-color-inverse);
+  --sb-ghost-button-icon-color-primary-inverse: var(--sb-icon-color-inverse);
+  --sb-ghost-button-background-color-critical-hover: var(--sb-background-color-critical-inverse-hover);
+  --sb-ghost-button-background-color-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
+  --sb-ghost-button-background-color-critical-inverse-hover: var(--sb-background-color-critical-vivid-hover);
+  --sb-ghost-button-background-color-critical-inverse-pressed: var(--sb-background-color-critical-vivid-pressed);
+  --sb-badge-text-color-primary: var(--sb-text-color-primary-inverse);
+  --sb-badge-background-color-primary: var(--sb-background-color-primary-vivid);
+  --sb-button-text-color-primary: var(--sb-text-color-primary-inverse);
+  --sb-button-text-color-primary-inverse: var(--sb-text-color-primary-vivid);
+  --sb-button-icon-color-primary: var(--sb-icon-color-primary);
+  --sb-button-background-color-primary: var(--sb-background-color-primary-vivid);
+  --sb-button-background-color-primary-hover: var(--sb-background-color-primary-vivid-hover);
+  --sb-button-background-color-primary-pressed: var(--sb-background-color-primary-vivid-pressed);
+  --sb-button-background-color-primary-inverse: var(--sb-background-color-primary-inverse);
+  --sb-button-background-color-primary-inverse-hover: var(--sb-background-color-primary-inverse-hover);
+  --sb-button-background-color-primary-inverse-pressed: var(--sb-background-color-primary-inverse-pressed);
+  --sb-ghost-button-text-color-primary: var(--sb-text-color-primary-vivid);
+  --sb-ghost-button-text-color-primary-inverse: var(--sb-text-color-primary-inverse);
+  --sb-ghost-button-icon-color-primary: var(--sb-icon-color-primary);
+  --sb-ghost-button-background-color-primary-hover: var(--sb-background-color-primary-inverse-hover);
+  --sb-ghost-button-background-color-primary-pressed: var(--sb-background-color-primary-inverse-pressed);
+  --sb-ghost-button-background-color-primary-inverse-hover: var(--sb-background-color-primary-vivid-hover);
+  --sb-ghost-button-background-color-primary-inverse-pressed: var(--sb-background-color-primary-vivid-pressed);
+  --sb-link-text-color-primary: var(--sb-text-color-primary-vivid);
+}