@dukaandost/tokens 1.0.0

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@dukaandost/tokens",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": ["src"],
+    "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'Tokens are consumed as source'"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+import './tokens.css';
+export * from './tokens';

package/src/tokens.css

@@ -0,0 +1,247 @@
+:root {
+  /* Brand */
+  --color-brand-primary: #180C44;
+  --color-brand-accent: #8A38F5;
+  --color-brand-accent-subtle: #EBE9F3;
+  --color-brand-accent-muted: #A499C6;
+  --color-brand-hover: #3B2395;
+
+  /* Semantic */
+  --color-semantic-error: #E9336C;
+  --color-semantic-error-strong: #C10000;
+  --color-semantic-error-light: #EE6691;
+  --color-semantic-success: #099B30;
+  --color-semantic-success-dark: #04841B;
+  --color-semantic-success-deep: #065B15;
+  --color-semantic-success-muted: #82AE37;
+  --color-semantic-warning: #FCC13E;
+  --color-semantic-warning-text: #E4AC32;
+  --color-semantic-info: #1B4DFF;
+  --color-semantic-info-strong: #0065F7;
+  --color-semantic-info-dark: #02409A;
+  --color-semantic-info-muted: #127498;
+
+  /* Badge Colors */
+  --color-badge-green-bg: #E4FFEC;
+  --color-badge-green-border: #5FD87F;
+  --color-badge-green-text: #099B30;
+  --color-badge-dark-green-bg: #B3D9BA;
+  --color-badge-dark-green-border: #04841B;
+  --color-badge-dark-green-text: #065B15;
+  --color-badge-blue-bg: #E6EFFC;
+  --color-badge-blue-border: #0065F7;
+  --color-badge-blue-text: #02409A;
+  --color-badge-purple-bg: #FFE2FF;
+  --color-badge-purple-border: #DF00DF;
+  --color-badge-purple-text: #9A009A;
+  --color-badge-violet-bg: #E8C1FF;
+  --color-badge-violet-border: #B331FF;
+  --color-badge-violet-text: #921EC3;
+  --color-badge-yellow-bg: #FFF6E2;
+  --color-badge-yellow-border: #FCC13E;
+  --color-badge-yellow-text: #E4AC32;
+  --color-badge-teal-bg: #E3FDFF;
+  --color-badge-teal-border: #18CBDB;
+  --color-badge-teal-text: #0DACBB;
+  --color-badge-pink-bg: #FFE7EE;
+  --color-badge-pink-border: #EE6691;
+  --color-badge-pink-text: #E30047;
+  --color-badge-red-bg: #FFE2E2;
+  --color-badge-red-border: #FF2929;
+  --color-badge-red-text: #C10000;
+  --color-badge-orange-bg: #FDE1D4;
+  --color-badge-orange-border: #FF6924;
+  --color-badge-orange-text: #F65F1A;
+  --color-badge-grey-bg: #E3E3E3;
+  --color-badge-grey-border: #7F7F7F;
+  --color-badge-grey-text: #545454;
+  --color-badge-brown-bg: #F4E8DC;
+  --color-badge-brown-border: #B87333;
+  --color-badge-brown-text: #8B5E34;
+
+  /* Text */
+  --color-text-primary: #1A1A1A;
+  --color-text-secondary: #2E2E2E;
+  --color-text-tertiary: #545454;
+  --color-text-disabled: #7F7F7F;
+  --color-text-inverse: #FFFFFF;
+
+  /* Border */
+  --color-border-default: #D3D3D3;
+  --color-border-subtle: #E0E0E0;
+  --color-border-hover: #A9A9A9;
+
+  /* Surface */
+  --color-surface-default: #FFFFFF;
+  --color-surface-subtle: #F5F5F5;
+  --color-surface-subtle-hover: #F6F6F6;
+  --color-surface-accent: #F4F2FF;
+
+  /* Focus / Glow */
+  --color-focus-glow: #EE6691;
+  --color-focus-border: #E9336C;
+
+  /* Gradients */
+  --gradient-brand-alpha: linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%);
+  --gradient-brand-beta: linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%);
+  --gradient-brand-gamma: linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%);
+  --gradient-brand-delta: linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%);
+
+  /* Font Families (from Figma) */
+  --font-heading: 'Amsi Pro', 'Inter', system-ui, sans-serif;
+  --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
+  --font-code: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
+
+  /* Typography — Figma: H1 (Amsi Pro 40px) */
+  --text-display-size: 40px;
+  --text-display-weight: 400;
+  --text-display-line-height: 1.37;
+  --text-display-letter-spacing: 0em;
+
+  /* Figma: H2 (Amsi Pro 32px) */
+  --text-heading-xl-size: 32px;
+  --text-heading-xl-weight: 400;
+  --text-heading-xl-line-height: 1.37;
+  --text-heading-xl-letter-spacing: 0em;
+
+  /* Figma: H3 (Amsi Pro 24px) */
+  --text-heading-lg-size: 24px;
+  --text-heading-lg-weight: 400;
+  --text-heading-lg-line-height: 1.37;
+  --text-heading-lg-letter-spacing: 0em;
+
+  /* Figma: H4 (Amsi Pro 20px) */
+  --text-heading-md-size: 20px;
+  --text-heading-md-weight: 400;
+  --text-heading-md-line-height: 1.37;
+  --text-heading-md-letter-spacing: 0em;
+
+  /* Figma: H5 (Nunito Sans 18px) */
+  --text-heading-sm-size: 18px;
+  --text-heading-sm-weight: 400;
+  --text-heading-sm-line-height: 1.36;
+  --text-heading-sm-letter-spacing: 0em;
+
+  /* Figma: Base Text (Nunito Sans 16px) */
+  --text-body-lg-size: 16px;
+  --text-body-lg-weight: 400;
+  --text-body-lg-line-height: 1.36;
+  --text-body-lg-letter-spacing: 0em;
+
+  /* Figma: Mobile Base Text (Nunito Sans 14px) */
+  --text-body-md-size: 14px;
+  --text-body-md-weight: 400;
+  --text-body-md-line-height: 1.36;
+  --text-body-md-letter-spacing: 0em;
+
+  /* Figma: SubText (Nunito Sans 12px) */
+  --text-body-sm-size: 12px;
+  --text-body-sm-weight: 400;
+  --text-body-sm-line-height: 1.36;
+  --text-body-sm-letter-spacing: 0em;
+
+  /* Label (Nunito Sans 13px) */
+  --text-label-size: 13px;
+  --text-label-weight: 500;
+  --text-label-line-height: 1.4;
+  --text-label-letter-spacing: 0.03em;
+
+  /* Label Small (Nunito Sans 11px) */
+  --text-label-sm-size: 11px;
+  --text-label-sm-weight: 500;
+  --text-label-sm-line-height: 1.4;
+  --text-label-sm-letter-spacing: 0.04em;
+
+  /* Code (monospace 13px) */
+  --text-code-size: 13px;
+  --text-code-weight: 400;
+  --text-code-line-height: 1.5;
+  --text-code-letter-spacing: 0em;
+
+  /* Spacing (4px grid) */
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* Border Radius */
+  --radius-none: 0px;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.20);
+  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-button-hover: 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-button-filled-hover: 0 4px 10px var(--color-border-default);
+  --shadow-button-glass-hover: 0 4px 10px var(--color-border-default);
+  --shadow-focus-glow: 0 0 4px var(--color-focus-glow);
+  --shadow-glow-alpha: 0 0 20px rgba(190, 3, 164, 0.50);
+  --shadow-glow-beta: 0 0 20px rgba(148, 170, 253, 0.50);
+  --shadow-glow-gamma: 0 0 20px rgba(130, 174, 55, 0.50);
+  --shadow-glow-delta: 0 0 20px rgba(55, 130, 174, 0.50);
+
+  /* Z-Index */
+  --z-base: 0;
+  --z-raised: 10;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+}
+
+/* =============================================
+   Base — font application (Figma: Nunito Sans)
+   ============================================= */
+html {
+  font-family: var(--font-body);
+  font-size: var(--text-body-lg-size);
+  font-weight: 400;
+  line-height: var(--text-body-lg-line-height);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* All elements inherit font so components never fall through to browser defaults */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+/* Buttons and inputs reset to match Nunito Sans (browsers apply system-ui by default) */
+button,
+input,
+select,
+textarea,
+optgroup {
+  font-family: var(--font-body);
+  font-size: inherit;
+  line-height: inherit;
+}

package/src/tokens.ts

@@ -0,0 +1,219 @@
+// ---------------------------------------------------------------------------
+// Design Tokens – TypeScript constants
+// ---------------------------------------------------------------------------
+
+export const colors = {
+  brand: {
+    primary: '#180C44',
+    accent: '#8A38F5',
+    accentSubtle: '#EBE9F3',
+    accentMuted: '#A499C6',
+    hover: '#3B2395',
+  },
+  semantic: {
+    error: '#E9336C',
+    errorStrong: '#C10000',
+    errorLight: '#EE6691',
+    success: '#099B30',
+    successDark: '#04841B',
+    successDeep: '#065B15',
+    successMuted: '#82AE37',
+    warning: '#FCC13E',
+    warningText: '#E4AC32',
+    info: '#1B4DFF',
+    infoStrong: '#0065F7',
+    infoDark: '#02409A',
+    infoMuted: '#127498',
+  },
+  text: {
+    primary: '#1A1A1A',
+    secondary: '#2E2E2E',
+    tertiary: '#545454',
+    disabled: '#7F7F7F',
+    inverse: '#FFFFFF',
+  },
+  border: {
+    default: '#D3D3D3',
+    subtle: '#E0E0E0',
+    hover: '#A9A9A9',
+  },
+  surface: {
+    default: '#FFFFFF',
+    subtle: '#F5F5F5',
+    subtleHover: '#F6F6F6',
+    accent: '#F4F2FF',
+  },
+  focus: {
+    glow: '#EE6691',
+    border: '#E9336C',
+  },
+  badge: {
+    green: { bg: '#E4FFEC', border: '#5FD87F', text: '#099B30' },
+    darkGreen: { bg: '#B3D9BA', border: '#04841B', text: '#065B15' },
+    blue: { bg: '#E6EFFC', border: '#0065F7', text: '#02409A' },
+    purple: { bg: '#FFE2FF', border: '#DF00DF', text: '#9A009A' },
+    violet: { bg: '#E8C1FF', border: '#B331FF', text: '#921EC3' },
+    yellow: { bg: '#FFF6E2', border: '#FCC13E', text: '#E4AC32' },
+    teal: { bg: '#E3FDFF', border: '#18CBDB', text: '#0DACBB' },
+    pink: { bg: '#FFE7EE', border: '#EE6691', text: '#E30047' },
+    red: { bg: '#FFE2E2', border: '#FF2929', text: '#C10000' },
+    orange: { bg: '#FDE1D4', border: '#FF6924', text: '#F65F1A' },
+    grey: { bg: '#E3E3E3', border: '#7F7F7F', text: '#545454' },
+    brown: { bg: '#F4E8DC', border: '#B87333', text: '#8B5E34' },
+  },
+} as const;
+
+export const gradients = {
+  brandAlpha: 'linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)',
+  brandBeta: 'linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)',
+  brandGamma: 'linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)',
+  brandDelta: 'linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)',
+} as const;
+
+export const fontFamily = {
+  heading: "'Amsi Pro', 'Inter', system-ui, sans-serif",
+  body: "'Nunito Sans', 'Inter', system-ui, sans-serif",
+  code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace",
+} as const;
+
+export const typography = {
+  display: {
+    size: '40px',
+    weight: 400,
+    lineHeight: 1.37,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.heading,
+  },
+  headingXl: {
+    size: '32px',
+    weight: 400,
+    lineHeight: 1.37,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.heading,
+  },
+  headingLg: {
+    size: '24px',
+    weight: 400,
+    lineHeight: 1.37,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.heading,
+  },
+  headingMd: {
+    size: '20px',
+    weight: 400,
+    lineHeight: 1.37,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.heading,
+  },
+  headingSm: {
+    size: '18px',
+    weight: 400,
+    lineHeight: 1.36,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.body,
+  },
+  bodyLg: {
+    size: '16px',
+    weight: 400,
+    lineHeight: 1.36,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.body,
+  },
+  bodyMd: {
+    size: '14px',
+    weight: 400,
+    lineHeight: 1.36,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.body,
+  },
+  bodySm: {
+    size: '12px',
+    weight: 400,
+    lineHeight: 1.36,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.body,
+  },
+  label: {
+    size: '13px',
+    weight: 500,
+    lineHeight: 1.4,
+    letterSpacing: '0.03em',
+    fontFamily: fontFamily.body,
+  },
+  labelSm: {
+    size: '11px',
+    weight: 500,
+    lineHeight: 1.4,
+    letterSpacing: '0.04em',
+    fontFamily: fontFamily.body,
+  },
+  code: {
+    size: '13px',
+    weight: 400,
+    lineHeight: 1.5,
+    letterSpacing: '0em',
+    fontFamily: fontFamily.code,
+  },
+} as const;
+
+export const spacing = {
+  px: '1px',
+  '0.5': '2px',
+  '1': '4px',
+  '2': '8px',
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '8': '32px',
+  '10': '40px',
+  '12': '48px',
+} as const;
+
+export const radius = {
+  none: '0px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  full: '9999px',
+} as const;
+
+export const shadows = {
+  none: 'none',
+  xs: '0 1px 2px rgba(0, 0, 0, 0.06)',
+  sm: '0 2px 6px rgba(0, 0, 0, 0.08)',
+  md: '0 4px 12px rgba(0, 0, 0, 0.12)',
+  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',
+  xl: '0 16px 40px rgba(0, 0, 0, 0.20)',
+  glowAlpha: '0 0 20px rgba(190, 3, 164, 0.50)',
+  glowBeta: '0 0 20px rgba(148, 170, 253, 0.50)',
+  glowGamma: '0 0 20px rgba(130, 174, 55, 0.50)',
+  glowDelta: '0 0 20px rgba(55, 130, 174, 0.50)',
+  button: '0 1px 2px rgba(0, 0, 0, 0.2)',
+  buttonHover: '0 1px 4px rgba(0, 0, 0, 0.2)',
+  focusGlow: '0 0 4px #EE6691',
+} as const;
+
+export const zIndex = {
+  base: 0,
+  raised: 10,
+  dropdown: 100,
+  sticky: 200,
+  overlay: 300,
+  modal: 400,
+  popover: 500,
+  toast: 600,
+} as const;
+
+export const tokens = {
+  colors,
+  gradients,
+  fontFamily,
+  typography,
+  spacing,
+  radius,
+  shadows,
+  zIndex,
+} as const;