@gob-ds/gob-ds 1.0.0

package/src/tokens/stories/borders.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+const radiusScale = [
+  { token: '--radius-none', value: '0',       px: '0px',     label: 'None',  usage: 'Tablas, layouts' },
+  { token: '--radius-sm',   value: '0.125rem', px: '2px',    label: 'SM',    usage: 'Badges, tags pequeños' },
+  { token: '--radius-md',   value: '0.375rem', px: '6px',    label: 'MD',    usage: 'Inputs, botones' },
+  { token: '--radius-lg',   value: '0.5rem',   px: '8px',    label: 'LG',    usage: 'Cards, panels' },
+  { token: '--radius-xl',   value: '0.75rem',  px: '12px',   label: 'XL',    usage: 'Modals, drawers' },
+  { token: '--radius-2xl',  value: '1rem',     px: '16px',   label: '2XL',   usage: 'Contenedores grandes' },
+  { token: '--radius-full', value: '9999px',   px: '9999px', label: 'Full',  usage: 'Pills, avatares, toggles' },
+];
+
+const borderWidths = [
+  { token: '--border-width-thin',   value: '1px', label: 'Thin',   usage: 'Bordes por defecto, dividers' },
+  { token: '--border-width-medium', value: '2px', label: 'Medium', usage: 'Focus rings, selected states' },
+  { token: '--border-width-thick',  value: '4px', label: 'Thick',  usage: 'Acentos, indicadores activos' },
+];
+
+const borderColors = [
+  { token: '--color-border',         value: '#E5E7EB', label: 'Default',  textDark: true },
+  { token: '--color-border-focused', value: '#3B82F6', label: 'Focused' },
+  { token: '--color-danger',         value: '#EF4444', label: 'Danger' },
+  { token: '--color-success',        value: '#22C55E', label: 'Success' },
+];
+
+@Component({
+  standalone: true,
+  selector: 'story-borders',
+  template: `
+    <div style="padding: 32px; font-family: sans-serif; min-height: 100vh;">
+      <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #111827;">⬜ Border Tokens</h1>
+      <p style="color: #6B7280; margin: 0 0 48px;">
+        Radios, grosores y colores de borde del sistema.
+      </p>
+
+      <!-- Border Radius -->
+      <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 24px;">
+        Border Radius
+      </h2>
+      <div style="display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; align-items: flex-end;">
+        @for (item of radiusScale; track item.token) {
+          <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
+            <div
+              [style.border-radius]="item.value"
+              style="width: 80px; height: 80px; background: #3B82F6; opacity: 0.15; border: 2px solid #3B82F6;">
+            </div>
+            <div style="text-align: center;">
+              <div style="font-size: 12px; font-weight: 600; color: #374151;">{{ item.label }}</div>
+              <div style="font-size: 11px; color: #9CA3AF;">{{ item.px }}</div>
+              <div style="font-size: 10px; color: #D1D5DB; margin-top: 2px; max-width: 90px;">{{ item.usage }}</div>
+            </div>
+          </div>
+        }
+      </div>
+
+      <!-- Border Widths -->
+      <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 24px;">
+        Border Width
+      </h2>
+      <div style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px;">
+        @for (item of borderWidths; track item.token) {
+          <div style="display: flex; align-items: center; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid #F3F4F6;">
+            <div style="width: 200px; flex-shrink: 0;">
+              <div style="font-size: 12px; font-weight: 500; color: #374151;">{{ item.token }}</div>
+              <div style="font-size: 11px; color: #9CA3AF; margin-top: 2px;">{{ item.value }} · {{ item.usage }}</div>
+            </div>
+            <div
+              style="flex: 1; max-width: 320px; height: 40px; border-radius: 8px; background: #F9FAFB;"
+              [style.border]="item.value + ' solid #3B82F6'">
+            </div>
+          </div>
+        }
+      </div>
+
+      <!-- Border Colors -->
+      <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 24px;">
+        Border Colors
+      </h2>
+      <div style="display: flex; flex-wrap: wrap; gap: 16px;">
+        @for (item of borderColors; track item.token) {
+          <div style="display: flex; flex-direction: column; gap: 10px; width: 160px;">
+            <div
+              style="height: 64px; border-radius: 8px; background: #F9FAFB; border: 2px solid;"
+              [style.border-color]="item.value">
+            </div>
+            <div>
+              <div style="font-size: 12px; font-weight: 600; color: #374151;">{{ item.label }}</div>
+              <div style="font-size: 11px; color: #9CA3AF;">{{ item.token }}</div>
+              <div
+                style="display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-top: 4px; font-weight: 500;"
+                [style.background]="item.value"
+                [style.color]="item.textDark ? '#111827' : '#ffffff'">
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+class BordersDocComponent {
+  radiusScale = radiusScale;
+  borderWidths = borderWidths;
+  borderColors = borderColors;
+}
+
+const meta: Meta<BordersDocComponent> = {
+  title: 'Tokens/Borders',
+  component: BordersDocComponent,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<BordersDocComponent>;
+
+export const Estilos: Story = {};

package/src/tokens/stories/colors.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+const colorGroups = [
+  {
+    name: 'Primarios',
+    tokens: [
+      { name: '--color-blue-50',  value: '#EFF6FF', textDark: true },
+      { name: '--color-blue-100', value: '#DBEAFE', textDark: true },
+      { name: '--color-blue-500', value: '#3B82F6' },
+      { name: '--color-blue-600', value: '#2563EB' },
+      { name: '--color-blue-700', value: '#1D4ED8' },
+    ],
+  },
+  {
+    name: 'Grises',
+    tokens: [
+      { name: '--color-gray-50',  value: '#F9FAFB', textDark: true },
+      { name: '--color-gray-100', value: '#F3F4F6', textDark: true },
+      { name: '--color-gray-200', value: '#E5E7EB', textDark: true },
+      { name: '--color-gray-400', value: '#9CA3AF', textDark: true },
+      { name: '--color-gray-600', value: '#4B5563' },
+      { name: '--color-gray-800', value: '#1F2937' },
+      { name: '--color-gray-900', value: '#111827' },
+    ],
+  },
+  {
+    name: 'Semánticos',
+    tokens: [
+      { name: '--color-danger',  value: '#EF4444' },
+      { name: '--color-success', value: '#22C55E' },
+      { name: '--color-warning', value: '#FACC15', textDark: true },
+    ],
+  },
+];
+
+@Component({
+  standalone: true,
+  selector: 'story-colors',
+  template: `
+    <div style="padding: 32px; font-family: sans-serif;">
+      <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px;">🎨 Color Tokens</h1>
+      <p style="color: #6B7280; margin: 0 0 40px;">
+        Usá siempre los tokens CSS en lugar de valores directos. Ejemplo: <code style="background:#F3F4F6; padding: 2px 6px; border-radius: 4px;">color: var(--color-primary)</code>
+      </p>
+
+      @for (group of colorGroups; track group.name) {
+        <div style="margin-bottom: 40px;">
+          <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 16px;">
+            {{ group.name }}
+          </h2>
+          <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+            @for (token of group.tokens; track token.name) {
+              <div style="display: flex; flex-direction: column; width: 140px;">
+                <div
+                  [style.background]="token.value"
+                  [style.color]="token.textDark ? '#111827' : '#ffffff'"
+                  style="height: 80px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.07); display: flex; align-items: flex-end; padding: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);">
+                  <span style="font-size: 11px; font-weight: 500; opacity: 0.8;">{{ token.value }}</span>
+                </div>
+                <span style="font-size: 12px; color: #374151; margin-top: 8px; word-break: break-all;">{{ token.name }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+class ColorsDocComponent {
+  colorGroups = colorGroups;
+}
+
+const meta: Meta<ColorsDocComponent> = {
+  title: 'Tokens/Colors',
+  component: ColorsDocComponent,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Paleta de colores del sistema de diseño.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ColorsDocComponent>;
+
+export const Paleta: Story = {};

package/src/tokens/stories/shadows.stories.ts

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+const shadowScale = [
+  {
+    token: '--shadow-xs',
+    value: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    label: 'XS',
+    usage: 'Tooltips, badges',
+  },
+  {
+    token: '--shadow-sm',
+    value: '0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10)',
+    label: 'SM',
+    usage: 'Botones, inputs',
+  },
+  {
+    token: '--shadow-md',
+    value: '0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)',
+    label: 'MD',
+    usage: 'Cards, dropdowns',
+  },
+  {
+    token: '--shadow-lg',
+    value: '0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)',
+    label: 'LG',
+    usage: 'Modals, popovers',
+  },
+  {
+    token: '--shadow-xl',
+    value: '0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)',
+    label: 'XL',
+    usage: 'Drawers, sidebars',
+  },
+  {
+    token: '--shadow-inner',
+    value: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    label: 'Inner',
+    usage: 'Inputs activos, wells',
+  },
+  {
+    token: '--shadow-none',
+    value: '0 0 #0000',
+    label: 'None',
+    usage: 'Reset explícito',
+  },
+];
+
+@Component({
+  standalone: true,
+  selector: 'story-shadows',
+  template: `
+    <div style="padding: 32px; font-family: sans-serif; background: #F9FAFB; min-height: 100vh;">
+      <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #111827;">🌑 Shadow Tokens</h1>
+      <p style="color: #6B7280; margin: 0 0 40px;">
+        Elevación y profundidad. Usá sombras más grandes para elementos que flotan sobre el contenido.
+      </p>
+
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px;">
+        @for (item of shadowScale; track item.token) {
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <div
+              [style.box-shadow]="item.value"
+              style="background: #ffffff; border-radius: 12px; height: 100px; display: flex; align-items: center; justify-content: center;">
+              <span style="font-size: 18px; font-weight: 700; color: #D1D5DB;">{{ item.label }}</span>
+            </div>
+            <div>
+              <div style="font-size: 12px; font-weight: 600; color: #374151;">{{ item.token }}</div>
+              <div style="font-size: 11px; color: #9CA3AF; margin-top: 2px;">{{ item.usage }}</div>
+              <code style="font-size: 10px; color: #6B7280; margin-top: 6px; display: block; word-break: break-all; line-height: 1.5;">
+                {{ item.value }}
+              </code>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+class ShadowsDocComponent {
+  shadowScale = shadowScale;
+}
+
+const meta: Meta<ShadowsDocComponent> = {
+  title: 'Tokens/Shadows',
+  component: ShadowsDocComponent,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<ShadowsDocComponent>;
+
+export const Elevacion: Story = {};

package/src/tokens/stories/spacing.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+const spacingScale = [
+  { token: '--space-1',  value: '0.25rem', px: 4 },
+  { token: '--space-2',  value: '0.5rem',  px: 8 },
+  { token: '--space-3',  value: '0.75rem', px: 12 },
+  { token: '--space-4',  value: '1rem',    px: 16 },
+  { token: '--space-5',  value: '1.25rem', px: 20 },
+  { token: '--space-6',  value: '1.5rem',  px: 24 },
+  { token: '--space-8',  value: '2rem',    px: 32 },
+  { token: '--space-10', value: '2.5rem',  px: 40 },
+  { token: '--space-12', value: '3rem',    px: 48 },
+  { token: '--space-16', value: '4rem',    px: 64 },
+];
+
+@Component({
+  standalone: true,
+  selector: 'story-spacing',
+  template: `
+    <div style="padding: 32px; font-family: sans-serif;">
+      <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px;">📐 Spacing Tokens</h1>
+      <p style="color: #6B7280; margin: 0 0 40px;">Sistema de espaciado basado en múltiplos de 4px.</p>
+
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        @for (item of spacingScale; track item.token) {
+          <div style="display: flex; align-items: center; gap: 20px;">
+            <div style="width: 180px; flex-shrink: 0;">
+              <div style="font-size: 12px; font-weight: 500; color: #374151;">{{ item.token }}</div>
+              <div style="font-size: 11px; color: #9CA3AF;">{{ item.value }} · {{ item.px }}px</div>
+            </div>
+            <div
+              [style.width.px]="item.px"
+              style="height: 24px; background: #3B82F6; border-radius: 4px; flex-shrink: 0;">
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+class SpacingDocComponent {
+  spacingScale = spacingScale;
+}
+
+const meta: Meta<SpacingDocComponent> = {
+  title: 'Tokens/Spacing',
+  component: SpacingDocComponent,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<SpacingDocComponent>;
+
+export const Escala: Story = {};

package/src/tokens/stories/typography.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+
+const typeScale = [
+  { token: '--font-size-xs',  size: '0.75rem',  px: '12px', label: 'XS - Caption' },
+  { token: '--font-size-sm',  size: '0.875rem', px: '14px', label: 'SM - Body small' },
+  { token: '--font-size-md',  size: '1rem',     px: '16px', label: 'MD - Body (base)' },
+  { token: '--font-size-lg',  size: '1.125rem', px: '18px', label: 'LG - Body large' },
+  { token: '--font-size-xl',  size: '1.25rem',  px: '20px', label: 'XL - Subtitle' },
+  { token: '--font-size-2xl', size: '1.5rem',   px: '24px', label: '2XL - Heading S' },
+  { token: '--font-size-3xl', size: '1.875rem', px: '30px', label: '3XL - Heading M' },
+  { token: '--font-size-4xl', size: '2.25rem',  px: '36px', label: '4XL - Heading L' },
+];
+
+const weights = [
+  { token: '--font-weight-regular',  value: '400', label: 'Regular' },
+  { token: '--font-weight-medium',   value: '500', label: 'Medium' },
+  { token: '--font-weight-semibold', value: '600', label: 'Semibold' },
+  { token: '--font-weight-bold',     value: '700', label: 'Bold' },
+];
+
+@Component({
+  standalone: true,
+  selector: 'story-typography',
+  template: `
+    <div style="padding: 32px; font-family: sans-serif; max-width: 800px;">
+      <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px;">✍️ Typography Tokens</h1>
+      <p style="color: #6B7280; margin: 0 0 40px;">Escala tipográfica y pesos del sistema.</p>
+
+      <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 20px;">Escala de tamaños</h2>
+      <div style="display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px;">
+        @for (item of typeScale; track item.token) {
+          <div style="display: flex; align-items: baseline; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6;">
+            <div style="width: 220px; flex-shrink: 0;">
+              <div style="font-size: 11px; color: #9CA3AF;">{{ item.token }}</div>
+              <div style="font-size: 11px; color: #D1D5DB;">{{ item.size }} · {{ item.px }}</div>
+            </div>
+            <div [style.font-size]="item.size" style="color: #111827; line-height: 1.2;">
+              {{ item.label }}
+            </div>
+          </div>
+        }
+      </div>
+
+      <h2 style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 20px;">Font Weights</h2>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        @for (w of weights; track w.token) {
+          <div style="display: flex; align-items: center; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid #F3F4F6;">
+            <div style="width: 220px; flex-shrink: 0;">
+              <div style="font-size: 11px; color: #9CA3AF;">{{ w.token }}</div>
+              <div style="font-size: 11px; color: #D1D5DB;">{{ w.value }}</div>
+            </div>
+            <div [style.font-weight]="w.value" style="font-size: 20px; color: #111827;">
+              {{ w.label }} — The quick brown fox
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+class TypographyDocComponent {
+  typeScale = typeScale;
+  weights = weights;
+}
+
+const meta: Meta<TypographyDocComponent> = {
+  title: 'Tokens/Typography',
+  component: TypographyDocComponent,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<TypographyDocComponent>;
+
+export const Escala: Story = {};

package/src/tokens/styles/_borders.scss

@@ -0,0 +1,16 @@
+:root {
+  // Radius
+  --radius-none: 0;
+  --radius-xs:   0.0625rem; // 1px
+  --radius-sm:   0.125rem;  // 2px
+  --radius-md:   0.375rem;  // 6px
+  --radius-lg:   0.5rem;    // 8px
+  --radius-xl:   0.75rem;   // 12px
+  --radius-2xl:  1rem;      // 16px
+  --radius-full: 9999px;
+
+  // Border widths
+  --border-width-thin:   1px;
+  --border-width-medium: 2px;
+  --border-width-thick:  4px;
+}

package/src/tokens/styles/_colors.scss

@@ -0,0 +1,76 @@
+:root {
+  // ─── Brand (derivado de #002F54) ───────────────────────────
+  --color-brand-50:   #E6EEF5;
+  --color-brand-100:  #CCDDE9;
+  --color-brand-200:  #99BBD4;
+  --color-brand-300:  #6699BE;
+  --color-brand-400:  #3377A9;
+  --color-brand-500:  #005593;
+  --color-brand-600:  #003F6E;
+  --color-brand-700:  #002F54;
+  --color-brand-800:  #001F38;
+  --color-brand-900:  #000F1C;
+  --color-brand-950:  #00070D;
+
+  --color-white: #FFFFFF;
+  --search-bg: #F3F4F6;
+
+  // ─── Neutral scale ─────────────────────────────
+  --color-neutral-50:  #F6F7F8;
+  --color-neutral-200: #E3E9F5;
+  --color-neutral-300: #C3CAD7;
+  --color-neutral-500: #A4ACBA;
+  --color-neutral-600: #878E9D;
+  --color-neutral-700: #6B7280;
+  --color-neutral-800: #505763;
+  --color-neutral-900: #373C46;
+
+  // ─── Status semantic colors  ──────────────────
+  // Live → Green
+  --color-status-success-bg:      #ECFEF6;
+  --color-status-success-text:    #004E3B;
+  --color-status-success-border:  #ADDFCB;
+
+  // Inactive → Yellow/Orange
+  --color-status-warning-bg:   #FEFCE8;
+  --color-status-warning-text: #733E0A;
+  --color-status-warning-border:  #F1D9A0;
+
+  // Neutral → Gray
+  --color-status-neutral-bg:   #F9FAFB;
+  --color-status-neutral-text: #101828;
+  --color-status-neutral-border:  #CFD1D7;
+  
+  // Default → Blue
+  --color-status-default-bg:   #EFF6FF;
+  --color-status-default-text: #1C398E;
+  --color-status-default-border:  #B7D3FF;
+  
+  // Error → Red
+  --color-status-error-bg:   #FEF3F3;
+  --color-status-error-text: #82181A;
+  --color-status-error-border:  #FCC8C8;
+  --color-status-error:  #a21315;
+
+  // ─── Semánticos generales ──────────────────────────────────
+  --color-primary:        var(--color-brand-700);
+  --color-primary-hover:  var(--color-brand-800);
+  --color-primary-subtle: var(--color-brand-50);
+
+    // Text
+  --color-text-primary:   var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-700);
+  --color-text-tertiary:  var(--color-neutral-600);
+  --color-text-disabled:  var(--color-neutral-500);
+  --color-text-inverse:   var(--color-white);
+
+  // Backgrounds / surfaces
+  --color-bg-default:     var(--color-white);
+  --color-bg-subtle:      var(--color-neutral-50);
+  --color-bg-muted:       var(--color-neutral-200);
+
+  // Borders / dividers
+  --color-border-subtle:  var(--color-neutral-200);
+  --color-border:         var(--color-neutral-300);
+  --color-border-strong:  var(--color-neutral-500);
+}

package/src/tokens/styles/_shadows.scss

@@ -0,0 +1,9 @@
+:root {
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+}

package/src/tokens/styles/_spacing.scss

@@ -0,0 +1,17 @@
+:root {
+  --space-0:   0;
+  --space-0-5: 0.125rem;  // 2px
+  --space-1:   0.25rem;   // 4px
+  --space-1-5: 0.375rem;  // 6px
+  --space-2:   0.5rem;    // 8px
+  --space-3:   0.75rem;   // 12px
+  --space-4:   1rem;      // 16px
+  --space-5:   1.25rem;   // 20px
+  --space-6:   1.5rem;    // 24px
+  --space-8:   2rem;      // 32px
+  --space-10:  2.5rem;    // 40px
+  --space-12:  3rem;      // 48px
+  --space-16:  4rem;      // 64px
+  --space-20:  5rem;      // 80px
+  --space-24:  6rem;      // 96px
+}

package/src/tokens/styles/_typography.scss

@@ -0,0 +1,34 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
+
+:root {
+  --font-family-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Font sizes (base = 14px) */
+  --font-size-xs: 0.6875rem; /* 11px */
+  --font-size-sm: 0.75rem;   /* 12px */
+  --font-size-md: 0.875rem;  /* 14px (BASE) */
+  --font-size-lg: 1rem;      /* 16px */
+  --font-size-xl: 1.125rem;  /* 18px */
+  --font-size-2xl: 1.25rem;  /* 20px */
+  --font-size-3xl: 1.5rem;   /* 24px */
+  --font-size-4xl: 1.875rem; /* 30px */
+  --font-size-5xl: 2.25rem;  /* 36px */
+
+  /* Font weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line heights */
+  --line-height-tight: 1.15;
+  --line-height-normal: 1.35;
+  --line-height-loose: 1.6;
+
+  /* Letter spacing */
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+}

package/src/tokens/styles/tokens.scss

@@ -0,0 +1,5 @@
+@forward 'colors';
+@forward 'typography';
+@forward 'spacing';
+@forward 'shadows';
+@forward 'borders';

package/src/tokens/tokens.ts

@@ -0,0 +1,42 @@
+export const colorTokens = {
+  primitive: {
+    'blue-50':  '#EFF6FF',
+    'blue-100': '#DBEAFE',
+    'blue-500': '#3B82F6',
+    'blue-600': '#2563EB',
+    'blue-700': '#1D4ED8',
+    'gray-50':  '#F9FAFB',
+    'gray-100': '#F3F4F6',
+    'gray-200': '#E5E7EB',
+    'gray-400': '#9CA3AF',
+    'gray-600': '#4B5563',
+    'gray-800': '#1F2937',
+    'gray-900': '#111827',
+    'red-500':    '#EF4444',
+    'green-500':  '#22C55E',
+    'yellow-400': '#FACC15',
+  },
+  semantic: {
+    'primary':        'var(--color-primary)',
+    'danger':         'var(--color-danger)',
+    'success':        'var(--color-success)',
+    'text-primary':   'var(--color-text-primary)',
+    'text-secondary': 'var(--color-text-secondary)',
+    'bg-default':     'var(--color-bg-default)',
+    'border':         'var(--color-border)',
+  }
+};
+
+export const spacingTokens = {
+  '0': '0',
+  '1': '0.25rem',
+  '2': '0.5rem',
+  '3': '0.75rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '8': '2rem',
+  '10': '2.5rem',
+  '12': '3rem',
+  '16': '4rem',
+};

package/tsconfig.app.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}