@staffbase/design 18.3.0

package/dist/tokens/primitive.css

@@ -0,0 +1,191 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, :host {
+  --sb-color-black: oklch(0 0 0);
+  --sb-color-white: oklch(1 0 0);
+  --sb-color-blue-25: oklch(0.9835 0.0079 253.85);
+  --sb-color-blue-50: oklch(0.9479 0.0251 255.56);
+  --sb-color-blue-100: oklch(0.9098 0.044 256.79);
+  --sb-color-blue-200: oklch(0.8551 0.0723 256.23);
+  --sb-color-blue-300: oklch(0.7469 0.1317 256.33);
+  --sb-color-blue-400: oklch(0.6974 0.1605 256.52);
+  --sb-color-blue-500: oklch(0.6388 0.1952 257.61);
+  --sb-color-blue-600: oklch(0.5749 0.233917 259.9541);
+  --sb-color-blue-700: oklch(0.5228 0.2335 263.4);
+  --sb-color-blue-800: oklch(0.4373 0.2596 266.91);
+  --sb-color-blue-900: oklch(0.3294 0.1877 267.67);
+  --sb-color-blue-950: oklch(0.2106 0.1065 270.12);
+  --sb-color-cyan-25: oklch(0.9796 0.029 194.07);
+  --sb-color-cyan-50: oklch(0.9356 0.0988 194.02);
+  --sb-color-cyan-100: oklch(0.893 0.153236 192.1884);
+  --sb-color-cyan-200: oklch(0.8385 0.143968 191.9788);
+  --sb-color-cyan-300: oklch(0.7303 0.125154 192.7753);
+  --sb-color-cyan-400: oklch(0.6813 0.117 191.88);
+  --sb-color-cyan-500: oklch(0.6202 0.106397 192.3262);
+  --sb-color-cyan-600: oklch(0.5542 0.09516 191.9599);
+  --sb-color-cyan-700: oklch(0.4991 0.085555 192.6306);
+  --sb-color-cyan-800: oklch(0.4033 0.069 193.37);
+  --sb-color-cyan-900: oklch(0.3045 0.05218 192.7854);
+  --sb-color-cyan-950: oklch(0.2123 0.0365 191.66);
+  --sb-color-green-25: oklch(0.9792 0.0311 157.21);
+  --sb-color-green-50: oklch(0.942 0.0573 155.96);
+  --sb-color-green-100: oklch(0.8926 0.1486 152.95);
+  --sb-color-green-200: oklch(0.836 0.1622 152.29);
+  --sb-color-green-300: oklch(0.7248 0.220256 146.1938);
+  --sb-color-green-400: oklch(0.6729 0.2043 146.22);
+  --sb-color-green-500: oklch(0.6144 0.1858 146.36);
+  --sb-color-green-600: oklch(0.5487 0.1645 146.68);
+  --sb-color-green-700: oklch(0.4928 0.1473 146.79);
+  --sb-color-green-800: oklch(0.4012 0.1181 147.35);
+  --sb-color-green-900: oklch(0.3008 0.0854 148.73);
+  --sb-color-green-950: oklch(0.2095 0.0558 151.44);
+  --sb-color-grey-25: oklch(0.9821 0 0);
+  --sb-color-grey-50: oklch(0.9461 0 0);
+  --sb-color-grey-100: oklch(0.9097 0 0);
+  --sb-color-grey-200: oklch(0.8545 0 0);
+  --sb-color-grey-300: oklch(0.7444 0 0);
+  --sb-color-grey-400: oklch(0.696 0 0);
+  --sb-color-grey-500: oklch(0.6334 0 0);
+  --sb-color-grey-600: oklch(0.5658 0 0);
+  --sb-color-grey-700: oklch(0.5103 0 0);
+  --sb-color-grey-800: oklch(0.4128 0 0);
+  --sb-color-grey-900: oklch(0.3092 0 0);
+  --sb-color-grey-950: oklch(0.2055 0.0039 286.05);
+  --sb-color-grey-1000: oklch(0.2134 0 0);
+  --sb-color-pink-25: oklch(0.9849 0.0106 316.49);
+  --sb-color-pink-50: oklch(0.9512 0.0354 317.31);
+  --sb-color-pink-100: oklch(0.9171 0.0601 316.47);
+  --sb-color-pink-200: oklch(0.8653 0.0983 316.8);
+  --sb-color-pink-300: oklch(0.7671 0.1775 316.31);
+  --sb-color-pink-400: oklch(0.7206 0.2154 316.31);
+  --sb-color-pink-500: oklch(0.6614 0.264 315.38);
+  --sb-color-pink-600: oklch(0.6049 0.2981 312.63);
+  --sb-color-pink-700: oklch(0.5468 0.272 312.33);
+  --sb-color-pink-800: oklch(0.4423 0.2191 312.82);
+  --sb-color-pink-900: oklch(0.3327 0.1647 312.87);
+  --sb-color-pink-950: oklch(0.2304 0.1117 314.21);
+  --sb-color-purple-25: oklch(0.9826 0.0095 299.24);
+  --sb-color-purple-50: oklch(0.9487 0.0289 301);
+  --sb-color-purple-100: oklch(0.914 0.048556 299.7826);
+  --sb-color-purple-200: oklch(0.8621 0.0786 298.64);
+  --sb-color-purple-300: oklch(0.7588 0.1417 297.33);
+  --sb-color-purple-400: oklch(0.694 0.182 295.83);
+  --sb-color-purple-500: oklch(0.6544 0.2067 294.64);
+  --sb-color-purple-600: oklch(0.5925 0.2434 291.61);
+  --sb-color-purple-700: oklch(0.5421 0.2711 287.73);
+  --sb-color-purple-800: oklch(0.4457 0.2594 281.92);
+  --sb-color-purple-900: oklch(0.3379 0.2039 280.34);
+  --sb-color-purple-950: oklch(0.2338 0.1388 282.66);
+  --sb-color-red-25: oklch(0.9848 0.0076 7.28);
+  --sb-color-red-50: oklch(0.9503 0.0254 8.6);
+  --sb-color-red-100: oklch(0.9161 0.0438 10.99);
+  --sb-color-red-200: oklch(0.8646 0.0741 11.43);
+  --sb-color-red-300: oklch(0.763 0.1432 13.55);
+  --sb-color-red-400: oklch(0.7165 0.1792 15.81);
+  --sb-color-red-500: oklch(0.6699 0.2186 19.03);
+  --sb-color-red-600: oklch(0.5933 0.2416 26.78);
+  --sb-color-red-700: oklch(0.5357 0.21808 26.6206);
+  --sb-color-red-800: oklch(0.434 0.1764 26);
+  --sb-color-red-900: oklch(0.326 0.132 24.66);
+  --sb-color-red-950: oklch(0.2274 0.0916 21.7);
+  --sb-color-sbBlue-25: oklch(0.9835 0.0079 253.85);
+  --sb-color-sbBlue-50: oklch(0.9479 0.0251 255.56);
+  --sb-color-sbBlue-100: oklch(0.9098 0.044 256.79);
+  --sb-color-sbBlue-200: oklch(0.8551 0.0723 256.23);
+  --sb-color-sbBlue-300: oklch(0.7469 0.1317 256.33);
+  --sb-color-sbBlue-400: oklch(0.6974 0.1605 256.52);
+  --sb-color-sbBlue-500: oklch(0.6388 0.1952 257.61);
+  --sb-color-sbBlue-600: oklch(0.5749 0.233917 259.9541);
+  --sb-color-sbBlue-700: oklch(0.5188 0.208265 259.698);
+  --sb-color-sbBlue-800: oklch(0.418 0.16526 259.4015);
+  --sb-color-sbBlue-900: oklch(0.3163 0.1179 258.16);
+  --sb-color-sbBlue-950: oklch(0.218 0.0736 255.69);
+  --sb-color-teal-25: oklch(0.9793 0.0285 177.76);
+  --sb-color-teal-50: oklch(0.9353 0.0949 175.03);
+  --sb-color-teal-100: oklch(0.8882 0.1806 166.67);
+  --sb-color-teal-200: oklch(0.833 0.174691 165.1921);
+  --sb-color-teal-300: oklch(0.7269 0.1523 165.25);
+  --sb-color-teal-400: oklch(0.6768 0.1414 165.46);
+  --sb-color-teal-500: oklch(0.6171 0.1283 165.85);
+  --sb-color-teal-600: oklch(0.5498 0.114 166.06);
+  --sb-color-teal-700: oklch(0.4958 0.1022 166.5);
+  --sb-color-teal-800: oklch(0.4022 0.0821 167.28);
+  --sb-color-teal-900: oklch(0.3028 0.0607 168.79);
+  --sb-color-teal-950: oklch(0.2094 0.0406 172.09);
+  --sb-color-yellow-25: oklch(0.9822 0.0232 90.75);
+  --sb-color-yellow-50: oklch(0.9474 0.073 92.1);
+  --sb-color-yellow-100: oklch(0.9107 0.121 91.45);
+  --sb-color-yellow-200: oklch(0.8581 0.1692 87.59);
+  --sb-color-yellow-300: oklch(0.7499 0.1538 84.33);
+  --sb-color-yellow-400: oklch(0.6985 0.143259 84.5035);
+  --sb-color-yellow-500: oklch(0.6356 0.1303 84.76);
+  --sb-color-yellow-600: oklch(0.5666 0.116 85.54);
+  --sb-color-yellow-700: oklch(0.5113 0.104661 85.9672);
+  --sb-color-yellow-800: oklch(0.4124 0.084377 86.4434);
+  --sb-color-yellow-900: oklch(0.3109 0.063551 87.7101);
+  --sb-color-yellow-950: oklch(0.2169 0.0444 92.78);
+  --sb-color-orange-25: oklch(0.9829 0.010953 63.3642);
+  --sb-color-orange-50: oklch(0.9489 0.0341 64.57);
+  --sb-color-orange-100: oklch(0.9127 0.0575 64.45);
+  --sb-color-orange-200: oklch(0.8605 0.0953 63.44);
+  --sb-color-orange-300: oklch(0.7593 0.1656 57.76);
+  --sb-color-orange-400: oklch(0.7117 0.1837 51.43);
+  --sb-color-orange-500: oklch(0.6494 0.1666 51.83);
+  --sb-color-orange-600: oklch(0.578 0.1476 52.18);
+  --sb-color-orange-700: oklch(0.52 0.1309 53.13);
+  --sb-color-orange-800: oklch(0.4198 0.1042 54.28);
+  --sb-color-orange-900: oklch(0.3142 0.068165 69.7611);
+  --sb-color-orange-950: oklch(0.2164 0.0458 74.45);
+  --sb-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --sb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --sb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --sb-shadow-focus: 0px 0px 0px 2px var(--sb-color-white), 0px 0px 0px 4px var(--sb-color-primary-600);
+  --sb-radius-sm: 0.25rem;
+  --sb-radius-md: 0.375rem;
+  --sb-radius-lg: 0.5rem;
+  --sb-radius-xl: 1rem;
+  --sb-font-family-default: 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --sb-font-family-display: 'Epilogue', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --sb-font-weight-normal: 400;
+  --sb-font-weight-medium: 500;
+  --sb-font-weight-semibold: 600;
+  --sb-font-weight-bold: 700;
+  --sb-font-size-xs: 0.75rem;
+  --sb-font-size-sm: 0.875rem;
+  --sb-font-size-md: 1rem;
+  --sb-font-size-lg: 1.125rem;
+  --sb-font-size-xl: 1.25rem;
+  --sb-font-size-2xl: 1.5rem;
+  --sb-font-size-3xl: 1.75rem;
+  --sb-font-size-4xl: 2rem;
+  --sb-font-size-5xl: 2.25rem;
+  --sb-line-height-12: 0.75rem;
+  --sb-line-height-14: 0.875rem;
+  --sb-line-height-16: 1rem;
+  --sb-line-height-18: 1.125rem;
+  --sb-line-height-20: 1.25rem;
+  --sb-line-height-22: 1.375rem;
+  --sb-line-height-24: 1.5rem;
+  --sb-line-height-26: 1.625rem;
+  --sb-line-height-28: 1.75rem;
+  --sb-line-height-32: 2rem;
+  --sb-line-height-40: 2.5rem;
+  --sb-line-height-42: 2.625rem;
+  --sb-letter-spacing-normal: 0em;
+  --sb-letter-spacing-display: -0.04em;
+  --sb-letter-spacing-headline: -0.02em;
+  --sb-color-primary-25: var(--sb-color-blue-25);
+  --sb-color-primary-50: var(--sb-color-blue-50);
+  --sb-color-primary-100: var(--sb-color-blue-100);
+  --sb-color-primary-200: var(--sb-color-blue-200);
+  --sb-color-primary-300: var(--sb-color-blue-300);
+  --sb-color-primary-400: var(--sb-color-blue-400);
+  --sb-color-primary-500: var(--sb-color-blue-500);
+  --sb-color-primary-600: var(--sb-color-blue-600);
+  --sb-color-primary-700: var(--sb-color-blue-700);
+  --sb-color-primary-800: var(--sb-color-blue-800);
+  --sb-color-primary-900: var(--sb-color-blue-900);
+  --sb-color-primary-950: var(--sb-color-blue-950);
+}

package/dist/tokens/semantic.css

@@ -0,0 +1,274 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, :host {
+  --sb-chart-color-neutral-50: var(--sb-color-grey-50);
+  --sb-chart-color-neutral-100: var(--sb-color-grey-100);
+  --sb-chart-color-neutral-200: var(--sb-color-grey-200);
+  --sb-chart-color-neutral-300: var(--sb-color-grey-300);
+  --sb-chart-color-neutral-400: var(--sb-color-grey-400);
+  --sb-chart-color-neutral-500: var(--sb-color-grey-500);
+  --sb-chart-color-neutral-600: var(--sb-color-grey-600);
+  --sb-chart-color-neutral-700: var(--sb-color-grey-700);
+  --sb-chart-color-neutral-800: var(--sb-color-grey-800);
+  --sb-chart-color-neutral-900: var(--sb-color-grey-900);
+  --sb-chart-color-negative-100: var(--sb-color-red-100);
+  --sb-chart-color-negative-200: var(--sb-color-red-200);
+  --sb-chart-color-negative-300: var(--sb-color-red-300);
+  --sb-chart-color-negative-400: var(--sb-color-red-400);
+  --sb-chart-color-negative-500: var(--sb-color-red-500);
+  --sb-chart-color-negative-600: var(--sb-color-red-600);
+  --sb-chart-color-negative-700: var(--sb-color-red-700);
+  --sb-chart-color-negative-800: var(--sb-color-red-800);
+  --sb-chart-color-positive-100: var(--sb-color-green-100);
+  --sb-chart-color-positive-200: var(--sb-color-green-200);
+  --sb-chart-color-positive-300: var(--sb-color-green-300);
+  --sb-chart-color-positive-400: var(--sb-color-green-400);
+  --sb-chart-color-positive-500: var(--sb-color-green-500);
+  --sb-chart-color-positive-600: var(--sb-color-green-600);
+  --sb-chart-color-positive-700: var(--sb-color-green-700);
+  --sb-chart-color-positive-800: var(--sb-color-green-800);
+  --sb-text-color-neutral-strong: var(--sb-color-grey-950);
+  --sb-text-color-neutral-medium: var(--sb-color-grey-700);
+  --sb-text-color-neutral-placeholder: var(--sb-color-grey-400);
+  --sb-text-color-neutral-inverse: var(--sb-color-white);
+  --sb-text-color-critical-strong: var(--sb-color-red-900);
+  --sb-text-color-critical-vivid: var(--sb-color-red-700);
+  --sb-text-color-critical-weak: var(--sb-color-red-200);
+  --sb-text-color-critical-inverse: var(--sb-color-red-50);
+  --sb-text-color-success-strong: var(--sb-color-green-900);
+  --sb-text-color-success-vivid: var(--sb-color-green-700);
+  --sb-text-color-success-weak: var(--sb-color-green-200);
+  --sb-text-color-success-inverse: var(--sb-color-green-50);
+  --sb-text-color-warning-strong: var(--sb-color-orange-900);
+  --sb-text-color-warning-vivid: var(--sb-color-orange-700);
+  --sb-text-color-warning-weak: var(--sb-color-orange-200);
+  --sb-text-color-warning-inverse: var(--sb-color-orange-50);
+  --sb-text-color-purple-strong: var(--sb-color-purple-900);
+  --sb-text-color-purple-vivid: var(--sb-color-purple-700);
+  --sb-text-color-purple-weak: var(--sb-color-purple-200);
+  --sb-text-color-purple-inverse: var(--sb-color-purple-50);
+  --sb-text-color-pink-strong: var(--sb-color-pink-900);
+  --sb-text-color-pink-vivid: var(--sb-color-pink-700);
+  --sb-text-color-pink-weak: var(--sb-color-pink-200);
+  --sb-text-color-pink-inverse: var(--sb-color-pink-50);
+  --sb-text-color-cyan-strong: var(--sb-color-cyan-900);
+  --sb-text-color-cyan-vivid: var(--sb-color-cyan-700);
+  --sb-text-color-cyan-weak: var(--sb-color-cyan-200);
+  --sb-text-color-cyan-inverse: var(--sb-color-cyan-50);
+  --sb-text-color-teal-strong: var(--sb-color-teal-900);
+  --sb-text-color-teal-vivid: var(--sb-color-teal-700);
+  --sb-text-color-teal-weak: var(--sb-color-teal-200);
+  --sb-text-color-teal-inverse: var(--sb-color-teal-50);
+  --sb-text-color-yellow-strong: var(--sb-color-yellow-900);
+  --sb-text-color-yellow-vivid: var(--sb-color-yellow-700);
+  --sb-text-color-yellow-weak: var(--sb-color-yellow-200);
+  --sb-text-color-yellow-inverse: var(--sb-color-yellow-50);
+  --sb-icon-color-neutral-weak: var(--sb-color-grey-300);
+  --sb-icon-color-neutral-medium: var(--sb-color-grey-600);
+  --sb-icon-color-neutral-strong: var(--sb-color-grey-900);
+  --sb-icon-color-inverse: var(--sb-color-white);
+  --sb-icon-color-critical: var(--sb-color-red-700);
+  --sb-icon-color-success: var(--sb-color-green-700);
+  --sb-icon-color-warning: var(--sb-color-orange-700);
+  --sb-icon-color-purple: var(--sb-color-purple-700);
+  --sb-icon-color-pink: var(--sb-color-pink-700);
+  --sb-icon-color-cyan: var(--sb-color-cyan-700);
+  --sb-icon-color-teal: var(--sb-color-teal-700);
+  --sb-icon-color-yellow: var(--sb-color-yellow-700);
+  --sb-border-color-neutral-strong: var(--sb-color-grey-900);
+  --sb-border-color-neutral-medium: var(--sb-color-grey-600);
+  --sb-border-color-neutral-weak: var(--sb-color-grey-100);
+  --sb-border-color-critical: var(--sb-color-red-600);
+  --sb-border-color-success: var(--sb-color-green-600);
+  --sb-border-color-warning: var(--sb-color-orange-600);
+  --sb-border-color-purple: var(--sb-color-purple-600);
+  --sb-border-color-pink: var(--sb-color-pink-600);
+  --sb-border-color-cyan: var(--sb-color-cyan-600);
+  --sb-border-color-teal: var(--sb-color-teal-600);
+  --sb-border-color-inverse: var(--sb-color-white);
+  --sb-background-color-neutral-dark: var(--sb-color-grey-1000);
+  --sb-background-color-neutral-dark-hover: var(--sb-color-grey-900);
+  --sb-background-color-neutral-dark-pressed: var(--sb-color-grey-800);
+  --sb-background-color-neutral-strong: var(--sb-color-grey-800);
+  --sb-background-color-neutral-strong-hover: var(--sb-color-grey-900);
+  --sb-background-color-neutral-strong-pressed: var(--sb-color-grey-1000);
+  --sb-background-color-neutral-medium: var(--sb-color-grey-100);
+  --sb-background-color-neutral-medium-hover: var(--sb-color-grey-200);
+  --sb-background-color-neutral-medium-pressed: var(--sb-color-grey-300);
+  --sb-background-color-neutral-base: var(--sb-color-grey-25);
+  --sb-background-color-neutral-base-hover: var(--sb-color-grey-50);
+  --sb-background-color-neutral-base-pressed: var(--sb-color-grey-100);
+  --sb-background-color-neutral-surface: var(--sb-color-white);
+  --sb-background-color-neutral-surface-hover: var(--sb-color-grey-50);
+  --sb-background-color-neutral-surface-pressed: var(--sb-color-grey-100);
+  --sb-background-color-critical-dark: var(--sb-color-red-950);
+  --sb-background-color-critical-dark-hover: var(--sb-color-red-900);
+  --sb-background-color-critical-dark-pressed: var(--sb-color-red-800);
+  --sb-background-color-critical-strong: var(--sb-color-red-900);
+  --sb-background-color-critical-strong-hover: var(--sb-color-red-800);
+  --sb-background-color-critical-strong-pressed: var(--sb-color-red-700);
+  --sb-background-color-critical-vivid: var(--sb-color-red-800);
+  --sb-background-color-critical-vivid-hover: var(--sb-color-red-900);
+  --sb-background-color-critical-vivid-pressed: var(--sb-color-red-950);
+  --sb-background-color-critical-medium: var(--sb-color-red-200);
+  --sb-background-color-critical-medium-hover: var(--sb-color-red-300);
+  --sb-background-color-critical-medium-pressed: var(--sb-color-red-400);
+  --sb-background-color-critical-weak: var(--sb-color-red-50);
+  --sb-background-color-critical-weak-hover: var(--sb-color-red-100);
+  --sb-background-color-critical-weak-pressed: var(--sb-color-red-200);
+  --sb-background-color-critical-inverse: var(--sb-color-red-25);
+  --sb-background-color-critical-inverse-hover: var(--sb-color-red-50);
+  --sb-background-color-critical-inverse-pressed: var(--sb-color-red-100);
+  --sb-background-color-success-dark: var(--sb-color-green-950);
+  --sb-background-color-success-dark-hover: var(--sb-color-green-900);
+  --sb-background-color-success-dark-pressed: var(--sb-color-green-800);
+  --sb-background-color-success-strong: var(--sb-color-green-900);
+  --sb-background-color-success-strong-hover: var(--sb-color-green-800);
+  --sb-background-color-success-strong-pressed: var(--sb-color-green-700);
+  --sb-background-color-success-vivid: var(--sb-color-green-800);
+  --sb-background-color-success-vivid-hover: var(--sb-color-green-900);
+  --sb-background-color-success-vivid-pressed: var(--sb-color-green-950);
+  --sb-background-color-success-medium: var(--sb-color-green-200);
+  --sb-background-color-success-medium-hover: var(--sb-color-green-300);
+  --sb-background-color-success-medium-pressed: var(--sb-color-green-400);
+  --sb-background-color-success-weak: var(--sb-color-green-50);
+  --sb-background-color-success-weak-hover: var(--sb-color-green-100);
+  --sb-background-color-success-weak-pressed: var(--sb-color-green-200);
+  --sb-background-color-success-inverse: var(--sb-color-green-25);
+  --sb-background-color-success-inverse-hover: var(--sb-color-green-50);
+  --sb-background-color-success-inverse-pressed: var(--sb-color-green-100);
+  --sb-background-color-warning-dark: var(--sb-color-orange-950);
+  --sb-background-color-warning-dark-hover: var(--sb-color-orange-900);
+  --sb-background-color-warning-dark-pressed: var(--sb-color-orange-800);
+  --sb-background-color-warning-strong: var(--sb-color-orange-900);
+  --sb-background-color-warning-strong-hover: var(--sb-color-orange-800);
+  --sb-background-color-warning-strong-pressed: var(--sb-color-orange-700);
+  --sb-background-color-warning-vivid: var(--sb-color-orange-800);
+  --sb-background-color-warning-vivid-hover: var(--sb-color-orange-900);
+  --sb-background-color-warning-vivid-pressed: var(--sb-color-orange-950);
+  --sb-background-color-warning-medium: var(--sb-color-orange-200);
+  --sb-background-color-warning-medium-hover: var(--sb-color-orange-300);
+  --sb-background-color-warning-medium-pressed: var(--sb-color-orange-400);
+  --sb-background-color-warning-weak: var(--sb-color-orange-50);
+  --sb-background-color-warning-weak-hover: var(--sb-color-orange-100);
+  --sb-background-color-warning-weak-pressed: var(--sb-color-orange-200);
+  --sb-background-color-warning-inverse: var(--sb-color-orange-25);
+  --sb-background-color-warning-inverse-hover: var(--sb-color-orange-50);
+  --sb-background-color-warning-inverse-pressed: var(--sb-color-orange-100);
+  --sb-background-color-purple-dark: var(--sb-color-purple-950);
+  --sb-background-color-purple-dark-hover: var(--sb-color-purple-900);
+  --sb-background-color-purple-dark-pressed: var(--sb-color-purple-800);
+  --sb-background-color-purple-strong: var(--sb-color-purple-900);
+  --sb-background-color-purple-strong-hover: var(--sb-color-purple-800);
+  --sb-background-color-purple-strong-pressed: var(--sb-color-purple-700);
+  --sb-background-color-purple-vivid: var(--sb-color-purple-800);
+  --sb-background-color-purple-vivid-hover: var(--sb-color-purple-900);
+  --sb-background-color-purple-vivid-pressed: var(--sb-color-purple-950);
+  --sb-background-color-purple-medium: var(--sb-color-purple-200);
+  --sb-background-color-purple-medium-hover: var(--sb-color-purple-300);
+  --sb-background-color-purple-medium-pressed: var(--sb-color-purple-400);
+  --sb-background-color-purple-weak: var(--sb-color-purple-50);
+  --sb-background-color-purple-weak-hover: var(--sb-color-purple-100);
+  --sb-background-color-purple-weak-pressed: var(--sb-color-purple-200);
+  --sb-background-color-purple-inverse: var(--sb-color-purple-25);
+  --sb-background-color-purple-inverse-hover: var(--sb-color-purple-50);
+  --sb-background-color-purple-inverse-pressed: var(--sb-color-purple-100);
+  --sb-background-color-pink-dark: var(--sb-color-pink-950);
+  --sb-background-color-pink-dark-hover: var(--sb-color-pink-900);
+  --sb-background-color-pink-dark-pressed: var(--sb-color-pink-800);
+  --sb-background-color-pink-strong: var(--sb-color-pink-900);
+  --sb-background-color-pink-strong-hover: var(--sb-color-pink-800);
+  --sb-background-color-pink-strong-pressed: var(--sb-color-pink-700);
+  --sb-background-color-pink-vivid: var(--sb-color-pink-800);
+  --sb-background-color-pink-vivid-hover: var(--sb-color-pink-900);
+  --sb-background-color-pink-vivid-pressed: var(--sb-color-pink-950);
+  --sb-background-color-pink-medium: var(--sb-color-pink-200);
+  --sb-background-color-pink-medium-hover: var(--sb-color-pink-300);
+  --sb-background-color-pink-medium-pressed: var(--sb-color-pink-400);
+  --sb-background-color-pink-weak: var(--sb-color-pink-50);
+  --sb-background-color-pink-weak-hover: var(--sb-color-pink-100);
+  --sb-background-color-pink-weak-pressed: var(--sb-color-pink-200);
+  --sb-background-color-pink-inverse: var(--sb-color-pink-25);
+  --sb-background-color-pink-inverse-hover: var(--sb-color-pink-50);
+  --sb-background-color-pink-inverse-pressed: var(--sb-color-pink-100);
+  --sb-background-color-yellow-dark: var(--sb-color-yellow-950);
+  --sb-background-color-yellow-dark-hover: var(--sb-color-yellow-900);
+  --sb-background-color-yellow-dark-pressed: var(--sb-color-yellow-800);
+  --sb-background-color-yellow-strong: var(--sb-color-yellow-900);
+  --sb-background-color-yellow-strong-hover: var(--sb-color-yellow-800);
+  --sb-background-color-yellow-strong-pressed: var(--sb-color-yellow-700);
+  --sb-background-color-yellow-vivid: var(--sb-color-yellow-800);
+  --sb-background-color-yellow-vivid-hover: var(--sb-color-yellow-900);
+  --sb-background-color-yellow-vivid-pressed: var(--sb-color-yellow-950);
+  --sb-background-color-yellow-medium: var(--sb-color-yellow-200);
+  --sb-background-color-yellow-medium-hover: var(--sb-color-yellow-300);
+  --sb-background-color-yellow-medium-pressed: var(--sb-color-yellow-400);
+  --sb-background-color-yellow-weak: var(--sb-color-yellow-50);
+  --sb-background-color-yellow-weak-hover: var(--sb-color-yellow-100);
+  --sb-background-color-yellow-weak-pressed: var(--sb-color-yellow-200);
+  --sb-background-color-yellow-inverse: var(--sb-color-yellow-25);
+  --sb-background-color-yellow-inverse-hover: var(--sb-color-yellow-50);
+  --sb-background-color-yellow-inverse-pressed: var(--sb-color-yellow-100);
+  --sb-background-color-cyan-dark: var(--sb-color-cyan-950);
+  --sb-background-color-cyan-dark-hover: var(--sb-color-cyan-900);
+  --sb-background-color-cyan-dark-pressed: var(--sb-color-cyan-800);
+  --sb-background-color-cyan-strong: var(--sb-color-cyan-900);
+  --sb-background-color-cyan-strong-hover: var(--sb-color-cyan-800);
+  --sb-background-color-cyan-strong-pressed: var(--sb-color-cyan-700);
+  --sb-background-color-cyan-vivid: var(--sb-color-cyan-800);
+  --sb-background-color-cyan-vivid-hover: var(--sb-color-cyan-900);
+  --sb-background-color-cyan-vivid-pressed: var(--sb-color-cyan-950);
+  --sb-background-color-cyan-medium: var(--sb-color-cyan-200);
+  --sb-background-color-cyan-medium-hover: var(--sb-color-cyan-300);
+  --sb-background-color-cyan-medium-pressed: var(--sb-color-cyan-400);
+  --sb-background-color-cyan-weak: var(--sb-color-cyan-50);
+  --sb-background-color-cyan-weak-hover: var(--sb-color-cyan-100);
+  --sb-background-color-cyan-weak-pressed: var(--sb-color-cyan-200);
+  --sb-background-color-cyan-inverse: var(--sb-color-cyan-25);
+  --sb-background-color-cyan-inverse-hover: var(--sb-color-cyan-50);
+  --sb-background-color-cyan-inverse-pressed: var(--sb-color-cyan-100);
+  --sb-background-color-teal-dark: var(--sb-color-teal-950);
+  --sb-background-color-teal-dark-hover: var(--sb-color-teal-900);
+  --sb-background-color-teal-dark-pressed: var(--sb-color-teal-800);
+  --sb-background-color-teal-strong: var(--sb-color-teal-900);
+  --sb-background-color-teal-strong-hover: var(--sb-color-teal-800);
+  --sb-background-color-teal-strong-pressed: var(--sb-color-teal-700);
+  --sb-background-color-teal-vivid: var(--sb-color-teal-800);
+  --sb-background-color-teal-vivid-hover: var(--sb-color-teal-900);
+  --sb-background-color-teal-vivid-pressed: var(--sb-color-teal-950);
+  --sb-background-color-teal-medium: var(--sb-color-teal-200);
+  --sb-background-color-teal-medium-hover: var(--sb-color-teal-300);
+  --sb-background-color-teal-medium-pressed: var(--sb-color-teal-400);
+  --sb-background-color-teal-weak: var(--sb-color-teal-50);
+  --sb-background-color-teal-weak-hover: var(--sb-color-teal-100);
+  --sb-background-color-teal-weak-pressed: var(--sb-color-teal-200);
+  --sb-background-color-teal-inverse: var(--sb-color-teal-25);
+  --sb-background-color-teal-inverse-hover: var(--sb-color-teal-50);
+  --sb-background-color-teal-inverse-pressed: var(--sb-color-teal-100);
+  --sb-text-color-primary-strong: var(--sb-color-primary-900);
+  --sb-text-color-primary-vivid: var(--sb-color-primary-700);
+  --sb-text-color-primary-weak: var(--sb-color-primary-200);
+  --sb-text-color-primary-inverse: var(--sb-color-primary-50);
+  --sb-icon-color-primary: var(--sb-color-primary-700);
+  --sb-border-color-primary: var(--sb-color-primary-600);
+  --sb-background-color-primary-dark: var(--sb-color-primary-950);
+  --sb-background-color-primary-dark-hover: var(--sb-color-primary-900);
+  --sb-background-color-primary-dark-pressed: var(--sb-color-primary-800);
+  --sb-background-color-primary-strong: var(--sb-color-primary-900);
+  --sb-background-color-primary-strong-hover: var(--sb-color-primary-800);
+  --sb-background-color-primary-strong-pressed: var(--sb-color-primary-700);
+  --sb-background-color-primary-vivid: var(--sb-color-primary-800);
+  --sb-background-color-primary-vivid-hover: var(--sb-color-primary-900);
+  --sb-background-color-primary-vivid-pressed: var(--sb-color-primary-950);
+  --sb-background-color-primary-medium: var(--sb-color-primary-200);
+  --sb-background-color-primary-medium-hover: var(--sb-color-primary-300);
+  --sb-background-color-primary-medium-pressed: var(--sb-color-primary-400);
+  --sb-background-color-primary-weak: var(--sb-color-primary-50);
+  --sb-background-color-primary-weak-hover: var(--sb-color-primary-100);
+  --sb-background-color-primary-weak-pressed: var(--sb-color-primary-200);
+  --sb-background-color-primary-inverse: var(--sb-color-primary-25);
+  --sb-background-color-primary-inverse-hover: var(--sb-color-primary-50);
+  --sb-background-color-primary-inverse-pressed: var(--sb-color-primary-100);
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@staffbase/design",
+  "version": "18.3.0",
+  "description": "Staffbase Design System: Components, patterns, icons and tokens",
+  "license": "Apache-2.0",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm generate:tokens && vite build --config vite.build.config.ts",
+    "fix": "eslint --fix .",
+    "generate:icons": "node scripts/iconGenerator.js",
+    "generate:tokens": "tsx tokens/sd.config.ts",
+    "lint": "eslint --cache .",
+    "publish:check": "publint",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "type:check": "tsc -p tsconfig.json"
+  },
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js"
+    },
+    "./components.css": "./dist/components.css",
+    "./theme.css": "./dist/theme.css",
+    "./tokens/primitive.css": "./dist/tokens/primitive.css",
+    "./tokens/semantic.css": "./dist/tokens/semantic.css",
+    "./tokens/component.css": "./dist/tokens/component.css",
+    "./fonts/epilogue.css": "./dist/fonts/epilogue.css",
+    "./fonts/inter.css": "./dist/fonts/inter.css",
+    "./fonts/files/*.woff2": "./dist/fonts/files/*.woff2"
+  },
+  "files": [
+    "dist/**",
+    "AGENTS.md",
+    "docs/package_instructions.md"
+  ],
+  "dependencies": {
+    "@base-ui/react": "1.5.0",
+    "@floating-ui/react": "^0.27.19",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "clsx": "^2.1.1",
+    "es-toolkit": "^1.47.0",
+    "motion": "^12.40.0",
+    "react-dropzone": "^15.0.0",
+    "tinycolor2": "^1.6.0"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.7",
+    "@repo/eslint-config": "workspace:*",
+    "@tailwindcss/vite": "^4.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@types/tinycolor2": "^1.4.6",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.1",
+    "handlebars": "^4.7.9",
+    "happy-dom": "^20.9.0",
+    "lightningcss": "^1.32.0",
+    "publint": "^0.3.21",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "style-dictionary": "^5.4.2",
+    "tailwindcss": "^4.3.0",
+    "tsx": "^4.22.4",
+    "typescript": "^5.9.3",
+    "unplugin-dts": "^1.0.1",
+    "vite": "^8.0.10",
+    "vite-plugin-static-copy": "^4.1.0",
+    "vitest": "^4.1.7"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false
+}