@dmsi/wedgekit-react 0.0.2

package/src/index.css

@@ -0,0 +1,509 @@
+@import "tailwindcss" source("./");
+
+@theme static {
+  /* ── Breakpoints ────────────────────────── */
+  --breakpoint-sm: 320px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --font-open-sans: "Open Sans", sans-serif;
+  --font-sans: var(--font-open-sans);
+
+  /* ── Disable Default Colors ────────────── */
+  --color-*: initial;
+
+  --color-white: #ffffff;
+
+  --color-transparent: transparent;
+
+  --radius-px: 1px;
+
+  /* ── Brand ─────────────────────────────── */
+  --color-brand-100: var(--color-brand-100-user-selected, #fcece6);
+  --color-brand-200: var(--color-brand-200-user-selected, #f0a98c);
+  --color-brand-300: var(--color-brand-300-user-selected, #e56937);
+  --color-brand-400: var(--color-brand-400-user-selected, #df4405);
+  --color-brand-500: var(--color-brand-500-user-selected, #9e3004);
+
+  /* ── Action ────────────────────────────── */
+  --color-action-000: var(--color-action-000-user-selected, #ffffff);
+  --color-action-100: var(--color-action-100-user-selected, #e7f2f9);
+  --color-action-200: var(--color-action-200-user-selected, #d0e5f4);
+  --color-action-300: var(--color-action-300-user-selected, #459ad4);
+  --color-action-400: var(--color-action-400-user-selected, #0077c8);
+  --color-action-500: var(--color-action-500-user-selected, #00365a);
+
+  /* ── Link ────────────────────────────── */
+  --color-link-000: var(
+    --color-link-000-user-selected,
+    var(--color-action-000)
+  );
+  --color-link-100: var(
+    --color-link-100-user-selected,
+    var(--color-action-100)
+  );
+  --color-link-200: var(
+    --color-link-200-user-selected,
+    var(--color-action-200)
+  );
+  --color-link-300: var(
+    --color-link-300-user-selected,
+    var(--color-action-300)
+  );
+  --color-link-400: var(
+    --color-link-400-user-selected,
+    var(--color-action-400)
+  );
+  --color-link-500: var(
+    --color-link-500-user-selected,
+    var(--color-action-500)
+  );
+
+  /* ── Neutral ───────────────────────────── */
+  --color-neutral-000: #ffffff;
+  --color-neutral-100: #f7f7f7;
+  --color-neutral-200: #ebebeb;
+  --color-neutral-300: #c1c1c1;
+  --color-neutral-400: #6b6d6d;
+  --color-neutral-450: #3a3a3a;
+  --color-neutral-500: #1d1e1e;
+  --color-neutral-600: #000000;
+
+  /* ── Success ───────────────────────────── */
+  --color-success-100: #eefbf6;
+  --color-success-200: #d7f7e9;
+  --color-success-300: #61e1aa;
+  --color-success-400: #27d68b;
+  --color-success-500: #126240;
+
+  /* ── Warning ───────────────────────────── */
+  --color-warning-100: #fcefd4;
+  --color-warning-200: #f9dfa9;
+  --color-warning-300: #f4c053;
+  --color-warning-400: #f0a913;
+  --color-warning-500: #91670c;
+
+  /* ── Critical ──────────────────────────── */
+  --color-critical-100: #fbedea;
+  --color-critical-200: #f0b7ad;
+  --color-critical-300: #dd5e48;
+  --color-critical-400: #cc391f;
+  --color-critical-500: #892615;
+
+  /* ── Teal ──────────────────────────────── */
+  --color-teal-400: #40c1ac;
+
+  /* ── Purple ────────────────────────────── */
+  --color-purple-400: #8d267a;
+
+  /* ── Orange ────────────────────────────── */
+  --color-orange-400: #cc391f;
+
+  /* ── Chart ─────────────────────────────── */
+  --color-chart-0: var(--color-action-400);
+  --color-chart-1: var(--color-brand-400);
+  --color-chart-2: var(--color-teal-400);
+  --color-chart-3: var(--color-warning-400);
+  --color-chart-4: var(--color-neutral-400);
+  --color-chart-5: var(--color-purple-400);
+  --color-chart-6: var(--color-orange-400);
+
+  /* ── Radius ────────────────────────────── */
+  --radius-base: 4px;
+
+  /* ── Shadows ───────────────────────────── */
+  --shadow-*: initial;
+  --shadow-2:
+    0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);
+  --shadow-4:
+    0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+  --shadow-16:
+    0px 0px 16px 0px rgba(0, 0, 0, 0.12), 0px 16px 16px 0px rgba(0, 0, 0, 0.12);
+  --shadow-nav-tab: 0px -4px 4px -4px rgba(0, 0, 0, 0.32) inset;
+
+  /* ── Text ──────────────────────────────── */
+  --text-*: initial;
+  --text-display-1-desktop: 32px;
+  --text-display-1-mobile: 32px;
+  --text-display-1-desktop-compact: 32px;
+  --leading-display-1-desktop: 1.125;
+  --leading-display-1-mobile: 1.125;
+
+  --text-display-2-desktop: 28px;
+  --text-display-2-mobile: 28px;
+  --text-display-2-desktop-compact: 28px;
+  --leading-display-2-desktop: 1.143;
+  --leading-display-2-mobile: 1.143;
+
+  --text-heading-1-desktop: 24px;
+  --text-heading-1-mobile: 24px;
+  --text-heading-1-desktop-compact: 24px;
+  --leading-heading-1-desktop: 1.167;
+  --leading-heading-1-mobile: 1.167;
+
+  --text-heading-2-desktop: 20px;
+  --text-heading-2-mobile: 20px;
+  --text-heading-2-desktop-compact: 20px;
+  --leading-heading-2-desktop: 1.2;
+  --leading-heading-2-mobile: 1.2;
+
+  --text-heading-3-desktop: 16px;
+  --text-heading-3-mobile: 18px;
+  --text-heading-3-desktop-compact: 16px;
+  --leading-heading-3-desktop: 1.25;
+  --leading-heading-3-mobile: 1.25;
+
+  --text-subheader-desktop: 14px;
+  --text-subheader-mobile: 16px;
+  --text-subheader-desktop-compact: 14px;
+  --leading-subheader-desktop: 1.286;
+  --leading-subheader-mobile: 1.286;
+
+  --text-link-desktop: 14px;
+  --text-link-mobile: 16px;
+  --text-link-desktop-compact: 14px;
+  --leading-link-desktop: 1.286;
+  --leading-link-mobile: 1.286;
+
+  --text-label-desktop: 14px;
+  --text-label-mobile: 16px;
+  --text-label-desktop-compact: 14px;
+  --leading-label-desktop: 1;
+  --leading-label-mobile: 1;
+
+  --text-paragraph-desktop: 14px;
+  --text-paragraph-mobile: 16px;
+  --text-paragraph-desktop-compact: 14px;
+  --leading-paragraph-desktop: 1.286;
+  --leading-paragraph-mobile: 1.286;
+
+  --text-caption-desktop: 12px;
+  --text-caption-mobile: 16px;
+  --text-caption-desktop-compact: 12px;
+  --leading-caption-desktop: 1.333;
+  --leading-caption-mobile: 1.333;
+
+  /* ── Spacing ───────────────────────────── */
+  --spacing-desktop-container-gap: 16px;
+  --spacing-mobile-container-gap: 16px;
+  --spacing-desktop-compact-container-gap: 16px;
+
+  --spacing-desktop-container-padding: 24px;
+  --spacing-mobile-container-padding: 8px;
+  --spacing-desktop-compact-container-padding: 16px;
+
+  --spacing-desktop-layout-gap: 16px;
+  --spacing-mobile-layout-gap: 16px;
+  --spacing-desktop-compact-layout-gap: 12px;
+
+  --spacing-desktop-layout-group-gap: 8px;
+  --spacing-mobile-layout-group-gap: 8px;
+  --spacing-desktop-compact-layout-group-gap: 8px;
+
+  --spacing-desktop-layout-padding: 16px;
+  --spacing-mobile-layout-padding: 16px;
+  --spacing-desktop-compact-layout-padding: 12px;
+
+  --spacing-desktop-component-gap: 4px;
+  --spacing-mobile-component-gap: 4px;
+  --spacing-desktop-compact-component-gap: 2px;
+
+  --spacing-desktop-component-padding: 8px;
+  --spacing-mobile-component-padding: 12px;
+  --spacing-desktop-compact-component-padding: 4px;
+
+  /** Color Token Aliases */
+
+  --color-text-primary-normal: var(--color-neutral-500);
+  --color-text-primary-active: var(--color-neutral-400);
+  --color-text-primary-disabled: var(--color-neutral-300);
+  --color-text-primary-error: var(--color-critical-400);
+
+  --color-text-secondary-normal: var(--color-neutral-400);
+  --color-text-secondary-disabled: var(--color-neutral-300);
+  --color-text-secondary-error: var(--color-critical-400);
+
+  --color-text-success-normal: var(--color-success-500);
+  --color-text-success-disabled: var(--color-neutral-400);
+  --color-text-success-error: var(--color-critical-400);
+
+  --color-text-warning-normal: var(--color-warning-500);
+  --color-text-warning-disabled: var(--color-neutral-400);
+  --color-text-warning-error: var(--color-critical-400);
+
+
+  --color-text-link-normal: var(--color-link-400);
+  --color-text-link-hover: var(--color-link-500);
+  --color-text-link-active: var(--color-link-300);
+  --color-text-link-disabled: var(--color-neutral-400);
+
+  --color-border-primary-normal: var(--color-neutral-300);
+  --color-border-primary-focus: var(--color-action-400);
+  --color-border-primary-error: var(--color-critical-400);
+  --color-border-primary-normal: var(--color-neutral-300);
+
+  --color-icon-primary-normal: var(--color-neutral-400);
+  --color-icon-primary-disabled: var(--color-neutral-300);
+
+  --color-icon-success-normal: var(--color-success-400);
+  --color-icon-success-disabled: var(--color-neutral-400);
+
+  --color-icon-warning-normal: var(--color-warning-400);
+  --color-icon-warning-disabled: var(--color-neutral-400);
+
+  --color-icon-critical-normal: var(--color-critical-400);
+  --color-icon-critical-disabled: var(--color-neutral-400);
+
+  --color-background-primary-normal: var(--color-neutral-000);
+  --color-background-grouped-primary-normal: var(--color-neutral-000);
+  --color-background-secondary-normal: var(--color-neutral-300);
+  --color-background-grouped-secondary-normal: var(--color-neutral-100);
+  --color-background-success-normal: var(--color-success-400);
+  --color-background-warning-normal: var(--color-warning-400);
+  --color-background-critical-normal: var(--color-critical-400);
+
+  --color-text-action-normal: var(--color-action-400);
+  --color-text-action-hover: var(--color-action-500);
+  --color-text-action-active: var(--color-action-300);
+  --color-text-action-disabled: var(--color-neutral-400);
+
+  --color-text-action-primary-normal: var(--color-action-400);
+  --color-text-action-primary-hover: var(--color-action-500);
+  --color-text-action-primary-active: var(--color-action-300);
+  --color-text-action-primary-disabled: var(--color-neutral-400);
+
+  --color-brand-text-action-primary-normal: var(
+    --color-neutral-000
+  ); /* Created for Navigation Button as no token was added for it on Figma */
+  --color-brand-text-action-primary-hover: var(
+    --color-brand-200
+  ); /* Created for Navigation Button as no token was added for it on Figma */
+  --color-brand-text-action-primary-active: var(
+    --color-brand-200
+  ); /* Created for Navigation Button as no token was added for it on Figma */
+
+  --color-brand-text-on-action-primary-normal: var(
+    --color-neutral-000
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-brand-text-on-action-primary-hover: var(
+    --color-brand-500
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-brand-text-on-action-primary-active: var(
+    --color-brand-300
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+
+  --color-text-on-action-primary-normal: var(--color-neutral-000);
+  --color-text-on-action-primary-hover: var(--color-neutral-000);
+  --color-text-on-action-primary-active: var(--color-neutral-000);
+  --color-text-on-action-primary-disabled: var(--color-neutral-400);
+
+  --color-text-action-critical-normal: var(--color-critical-400);
+  --color-text-action-critical-hover: var(--color-critical-500);
+  --color-text-action-critical-active: var(--color-critical-300);
+  --color-text-action-critical-disabled: var(--color-neutral-400);
+
+  --color-border-action-normal: var(--color-action-400);
+  --color-border-action-hover: var(--color-action-500);
+  --color-border-action-active: var(--color-action-300);
+  --color-border-action-disabled: var(--color-neutral-200);
+
+  --color-text-critical-normal: var(--color-critical-400);
+  --color-text-critical-disabled: var(--color-neutral-400);
+  --color-text-critical-error: var(--color-critical-400);
+
+  --color-border-action-critical-normal: var(--color-critical-400);
+  --color-border-action-critical-hover: var(--color-critical-500);
+  --color-border-action-critical-active: var(--color-critical-300);
+  --color-border-action-critical-disabled: var(--color-neutral-200);
+
+  --color-background-action-normal: var(--color-action-400);
+  --color-background-action-hover: var(--color-action-500);
+  --color-background-action-active: var(--color-action-300);
+  --color-background-action-disabled: var(--color-neutral-200);
+
+  --color-background-action-critical-normal: var(--color-critical-400);
+  --color-background-action-critical-hover: var(--color-critical-500);
+  --color-background-action-critical-active: var(--color-critical-300);
+  --color-background-action-critical-disabled: var(--color-neutral-200);
+
+  --color-icon-action-primary-normal: var(--color-neutral-500);
+  --color-icon-action-primary-hover: var(--color-action-500);
+  --color-icon-action-primary-active: var(--color-action-300);
+  --color-icon-action-primary-disabled: var(--color-neutral-300);
+
+  --color-icon-action-secondary-normal: var(--color-action-400);
+  --color-icon-action-secondary-hover: var(--color-action-500);
+  --color-icon-action-secondary-active: var(--color-action-300);
+  --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
+  --color-icon-on-action-primary-normal: var(--color-neutral-000);
+  --color-icon-on-action-primary-hover: var(--color-neutral-000);
+  --color-icon-on-action-primary-active: var(--color-neutral-000);
+  --color-icon-on-action-primary-disabled: var(--color-neutral-400);
+
+  --color-icon-on-action-secondary-normal: var(--color-action-400);
+  --color-icon-on-action-secondary-hover: var(--color-action-500);
+  --color-icon-on-action-secondary-active: var(--color-action-300);
+  --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
+
+  --color-icon-action-critical-normal: var(--color-critical-400);
+  --color-icon-action-critical-hover: var(--color-critical-500);
+  --color-icon-action-critical-active: var(--color-critical-300);
+  --color-icon-action-critical-disabled: var(--color-neutral-400);
+
+  --color-icon-action-critical-secondary-normal: var(--color-critical-400);
+  --color-icon-action-critical-secondary-hover: var(--color-critical-500);
+  --color-icon-action-critical-secondary-active: var(--color-critical-300);
+  --color-icon-action-critical-secondary-disabled: var(--color-neutral-400);
+
+  --color-icon-brand-primary-normal: var(--color-brand-400);
+  --color-icon-brand-primary-hover: var(--color-brand-500);
+  --color-icon-brand-primary-active: var(--color-brand-300);
+  --color-icon-brand-primary-disabled: var(--color-neutral-300);
+
+  --color-background-action-primary-normal: var(--color-action-400);
+  --color-background-action-primary-hover: var(--color-action-500);
+  --color-background-action-primary-active: var(--color-action-300);
+  --color-background-action-primary-disabled: var(--color-neutral-200);
+
+  --color-background-action-secondary-normal: var(--color-neutral-000);
+  --color-background-action-secondary-hover: var(--color-action-100);
+  --color-background-action-secondary-active: var(--color-neutral-000);
+  --color-background-action-secondary-disabled: var(--color-neutral-200);
+
+  --color-background-brand-normal: var(--color-brand-400);
+
+  --color-background-on-action-primary-normal: var(
+    --color-neutral-000
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-primary-hover: var(
+    --color-neutral-000
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-primary-active: var(
+    --color-neutral-000
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-primary-disabled: var(
+    --color-neutral-200
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+
+  --color-background-on-action-secondary-normal: var(
+    --color-neutral-100
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-secondary-hover: var(
+    --color-brand-500
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-secondary-active: var(
+    --color-brand-400
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+  --color-background-on-action-secondary-disabled: var(
+    --color-neutral-200
+  ); /* Created for Navigation Tab as no token was added for it on Figma */
+
+  --color-background-action-critical-primary-normal: var(--color-critical-400);
+  --color-background-action-critical-primary-hover: var(--color-critical-500);
+  --color-background-action-critical-primary-active: var(--color-critical-300);
+  --color-background-action-critical-primary-disabled: var(--color-neutral-200);
+
+  --color-background-action-critical-secondary-normal: var(--color-neutral-000);
+  --color-background-action-critical-secondary-hover: var(--color-critical-100);
+  --color-background-action-critical-secondary-active: var(--color-neutral-000);
+  --color-background-action-critical-secondary-disabled: var(
+    --color-neutral-200
+  );
+  --color-background-brand-normal: var(
+    --color-brand-400
+  ); /* Created for Main Navigation */
+}
+
+/* @import "./darkmode.css"; */
+@import "./brand.css";
+
+body {
+  @apply bg-background-primary-normal;
+  @apply text-text-primary-normal;
+}
+
+@custom-variant compact {
+  &:where([data-compact]) {
+    @slot;
+  }
+}
+
+@custom-variant desktop {
+  @container root (width >= 48rem) {
+    @slot;
+  }
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+@utility scrollbar-stable {
+  scrollbar-gutter: stable;
+}
+
+@utility scrollbar-thumb-* {
+  & {
+    --dmsi-scrollbar-thumb-color: --value(--color-*);
+    @apply scrollbar;
+  }
+}
+
+@utility scrollbar-track-* {
+  & {
+    --dmsi-scrollbar-track-color: --value(--color-*);
+    @apply scrollbar;
+  }
+}
+
+@utility scrollbar {
+  & {
+    scrollbar-color: var(--dmsi-scrollbar-thumb-color, var(--color-gray-400))
+      var(--dmsi-scrollbar-track-color, var(--color-gray-100));
+  }
+}
+
+:root {
+  container-type: inline-size;
+  container-name: root;
+}
+
+@layer components {
+  .icon {
+    font-family: "Icons";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+  }
+
+  .icon-24 {
+    font-size: 24px;
+  }
+
+  .icon-16 {
+    font-size: 16px;
+  }
+
+  .icon-32 {
+    font-size: 32px;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+import "./fonts.css";
+import "./index.css";

package/src/types.ts

@@ -0,0 +1,149 @@
+import React, { ComponentPropsWithoutRef } from "react";
+
+export type IconSize = 16 | 24 | 32;
+
+export type ValidTags<T = keyof React.ElementType> = Extract<
+  React.ElementType,
+  T | React.JSXElementConstructor<unknown>
+>;
+
+export type AsProps<
+  T extends React.ElementType = React.ElementType,
+  K extends ValidTags<T> = ValidTags<T>,
+> = K extends React.ElementType
+  ? { as?: K } & ComponentPropsWithoutRef<K>
+  : never;
+
+export type Elevation = 0 | 2 | 4 | 16;
+
+export type Sizing =
+  | "layout"
+  | "layout-group"
+  | "container"
+  | "component"
+  | "none";
+export type TextAlign = "left" | "right" | "center";
+export type ItemsAlign = "start" | "center" | "end" | "start-center";
+export type JustifyAlign = "start" | "center" | "end" | "between" | "around";
+
+export type TextColorTokens =
+  | "text-primary-normal"
+  | "text-primary-disabled"
+  | "text-primary-error"
+  | "text-secondary-normal"
+  | "text-secondary-disabled"
+  | "text-secondary-error"
+  | "text-action-normal"
+  | "text-action-hover"
+  | "text-action-active"
+  | "text-action-disabled"
+  | "text-on-action-primary-normal"
+  | "text-on-action-primary-hover"
+  | "text-on-action-primary-active"
+  | "text-on-action-primary-disabled"
+  | "text-action-critical-normal"
+  | "text-action-critical-hover"
+  | "text-action-critical-active"
+  | "text-action-critical-disabled"
+  | "text-critical-normal"
+  | "text-critical-disabled"
+  | "text-critical-error"
+  | "text-success-normal"
+  | "text-warning-normal";
+
+export type BorderColorTokens =
+  | "border-primary-normal"
+  | "border-primary-focus"
+  | "border-primary-error"
+  | "border-primary-normal"
+  | "border-action-normal"
+  | "border-action-hover"
+  | "border-action-active"
+  | "border-action-disabled"
+  | "border-action-critical-normal"
+  | "border-action-critical-hover"
+  | "border-action-critical-active"
+  | "border-action-critical-disabled";
+
+export type IconColorTokens =
+  | "icon-primary-normal"
+  | "icon-primary-disabled"
+  | "icon-success-normal"
+  | "icon-success-disabled"
+  | "icon-warning-normal"
+  | "icon-warning-disabled"
+  | "icon-critical-normal"
+  | "icon-critical-disabled"
+  | "icon-action-primary-normal"
+  | "icon-action-primary-hover"
+  | "icon-action-primary-active"
+  | "icon-action-primary-disabled"
+  | "icon-on-action-primary-normal"
+  | "icon-on-action-primary-hover"
+  | "icon-on-action-primary-active"
+  | "icon-on-action-primary-disabled"
+  | "icon-on-action-secondary-normal"
+  | "icon-on-action-secondary-hover"
+  | "icon-on-action-secondary-active"
+  | "icon-on-action-secondary-disabled"
+  | "icon-action-critical-secondary-normal"
+  | "icon-action-critical-secondary-hover"
+  | "icon-action-critical-secondary-active"
+  | "icon-action-critical-secondary-disabled"
+  | "icon-brand-primary-normal"
+  | "icon-brand-primary-hover"
+  | "icon-brand-primary-active"
+  | "icon-brand-primary-disabled";
+
+export type BackgroundColorTokens =
+  | "background-primary-normal"
+  | "background-grouped-primary-normal"
+  | "background-secondary-normal"
+  | "background-grouped-secondary-normal"
+  | "background-success-normal"
+  | "background-warning-normal"
+  | "background-critical-normal"
+  | "background-action-normal"
+  | "background-action-hover"
+  | "background-action-active"
+  | "background-action-disabled"
+  | "background-action-critical-normal"
+  | "background-action-critical-hover"
+  | "background-action-critical-active"
+  | "background-action-critical-disabled"
+  | "background-action-primary-normal"
+  | "background-action-primary-hover"
+  | "background-action-primary-active"
+  | "background-action-primary-disabled"
+  | "background-action-secondary-normal"
+  | "background-action-secondary-hover"
+  | "background-action-secondary-active"
+  | "background-action-secondary-disabled"
+  | "background-action-critical-primary-normal"
+  | "background-action-critical-primary-hover"
+  | "background-action-critical-primary-active"
+  | "background-action-critical-primary-disabled"
+  | "background-action-critical-secondary-normal"
+  | "background-action-critical-secondary-hover"
+  | "background-action-critical-secondary-active"
+  | "background-action-critical-secondary-disabled";
+
+export type TextAttributes = {
+  color?: TextColorTokens;
+  align?: TextAlign;
+  tall?: boolean;
+  padded?: boolean;
+  addOverflow?: boolean;
+};
+
+export type TypographyProps = {
+  className?: string;
+  children?: React.ReactNode;
+  color?: string;
+};
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}