@idaho6/design 0.1.0 → 0.2.0

package/tokens/semantic/color.json

@@ -1,22 +1,46 @@
 {
   "color": {
     "action": {
-      "primary": { "value": "{openprops.color.blue.6}" },
-      "hover": { "value": "{openprops.color.blue.7}" },
-      "active": { "value": "{openprops.color.blue.8}" },
-      "focus-ring": { "value": "{openprops.color.blue.6}" }
+      "primary": {
+        "$value": "{openprops.color.blue.6}"
+      },
+      "hover": {
+        "$value": "{openprops.color.blue.7}"
+      },
+      "active": {
+        "$value": "{openprops.color.blue.8}"
+      },
+      "focus-ring": {
+        "$value": "{openprops.color.blue.6}"
+      }
     },
     "text": {
-      "primary": { "value": "{openprops.color.slate.9}" },
-      "secondary": { "value": "{openprops.color.slate.7}" },
-      "on-dark": { "value": "{openprops.color.white}" }
+      "primary": {
+        "$value": "{openprops.color.slate.9}"
+      },
+      "secondary": {
+        "$value": "{openprops.color.slate.7}"
+      },
+      "on-dark": {
+        "$value": "{openprops.color.white}"
+      }
     },
     "surface": {
-      "page": { "value": "{openprops.color.white}" },
-      "card": { "value": "{openprops.color.slate.1}" },
-      "border": { "value": "{openprops.color.slate.4}" },
-      "border-subtle": { "value": "{openprops.color.slate.3}" },
-      "border-strong": { "value": "{openprops.color.slate.5}" }
+      "page": {
+        "$value": "{openprops.color.white}"
+      },
+      "card": {
+        "$value": "{openprops.color.slate.1}"
+      },
+      "border": {
+        "$value": "{openprops.color.slate.4}"
+      },
+      "border-subtle": {
+        "$value": "{openprops.color.slate.3}"
+      },
+      "border-strong": {
+        "$value": "{openprops.color.slate.5}"
+      }
     }
   }
 }

package/tokens/semantic/opacity.json

@@ -1,5 +1,7 @@
 {
   "opacity": {
-    "disabled": { "value": "0.6" }
+    "disabled": {
+      "$value": "0.6"
+    }
   }
 }

package/tokens/semantic/spacing.json

@@ -1,9 +1,19 @@
 {
   "spacing": {
-    "xs": { "value": "{openprops.spacing.size.1}" },
-    "sm": { "value": "{openprops.spacing.size.2}" },
-    "md": { "value": "{openprops.spacing.size.3}" },
-    "lg": { "value": "{openprops.spacing.size.4}" },
-    "xl": { "value": "{openprops.spacing.size.5}" }
+    "xs": {
+      "$value": "{openprops.spacing.size.1}"
+    },
+    "sm": {
+      "$value": "{openprops.spacing.size.2}"
+    },
+    "md": {
+      "$value": "{openprops.spacing.size.3}"
+    },
+    "lg": {
+      "$value": "{openprops.spacing.size.4}"
+    },
+    "xl": {
+      "$value": "{openprops.spacing.size.5}"
+    }
   }
 }

package/tokens/semantic/typography.json

@@ -1,27 +1,57 @@
 {
   "typography": {
     "family": {
-      "base": { "value": "{openprops.typography.font.family.neo-grotesque}" },
-      "mono": { "value": "{openprops.typography.font.family.mono}" }
+      "base": {
+        "$value": "{openprops.typography.font.family.neo-grotesque}"
+      },
+      "mono": {
+        "$value": "{openprops.typography.font.family.mono}"
+      }
     },
     "scale": {
-      "xs": { "value": "{openprops.typography.font.size.0}" },
-      "sm": { "value": "{openprops.typography.font.size.1}" },
-      "base": { "value": "{openprops.typography.font.size.2}" },
-      "md": { "value": "{openprops.typography.font.size.3}" },
-      "lg": { "value": "{openprops.typography.font.size.4}" },
-      "2xl": { "value": "{openprops.typography.font.size.7}" },
-      "3xl": { "value": "{openprops.typography.font.size.8}" }
+      "xs": {
+        "$value": "{openprops.typography.font.size.0}"
+      },
+      "sm": {
+        "$value": "{openprops.typography.font.size.1}"
+      },
+      "base": {
+        "$value": "{openprops.typography.font.size.2}"
+      },
+      "md": {
+        "$value": "{openprops.typography.font.size.3}"
+      },
+      "lg": {
+        "$value": "{openprops.typography.font.size.4}"
+      },
+      "2xl": {
+        "$value": "{openprops.typography.font.size.7}"
+      },
+      "3xl": {
+        "$value": "{openprops.typography.font.size.8}"
+      }
     },
     "weight": {
-      "base": { "value": "{openprops.typography.font.weight.6}" },
-      "bold": { "value": "{openprops.typography.font.weight.7}" }
+      "base": {
+        "$value": "{openprops.typography.font.weight.6}"
+      },
+      "bold": {
+        "$value": "{openprops.typography.font.weight.7}"
+      }
     },
     "lineheight": {
-      "tight": { "value": "{openprops.typography.font.lineheight.1}" },
-      "snug": { "value": "{openprops.typography.font.lineheight.2}" },
-      "base": { "value": "{openprops.typography.font.lineheight.3}" },
-      "relaxed": { "value": "{openprops.typography.font.lineheight.4}" }
+      "tight": {
+        "$value": "{openprops.typography.font.lineheight.1}"
+      },
+      "snug": {
+        "$value": "{openprops.typography.font.lineheight.2}"
+      },
+      "base": {
+        "$value": "{openprops.typography.font.lineheight.3}"
+      },
+      "relaxed": {
+        "$value": "{openprops.typography.font.lineheight.4}"
+      }
     }
   }
 }

package/project.json

@@ -1,34 +0,0 @@
-{
-  "name": "@idaho6/design",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/design/src",
-  "prefix": "id6",
-  "targets": {
-    "extract-primitives": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "packages/design",
-        "command": "pnpm run extract-primitives"
-      },
-      "outputs": ["{projectRoot}/tokens/primitives"]
-    },
-    "typecheck": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "tsc --build tsconfig.lib.json --noEmit"
-      }
-    },
-    "build": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "packages/design",
-        "command": "tsc --build tsconfig.lib.json && pnpm run build:factory && pnpm run build:tokens"
-      },
-      "outputs": ["{projectRoot}/dist"],
-      "dependsOn": ["extract-primitives"]
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/spec/conformance.yaml

@@ -1,28 +0,0 @@
-version: 1.0.0
-package: '@id6/design'
-
-rules:
-  - id: conformance/layout/no-media-queries
-    description: Use clamp() for fluid layout instead of viewport breakpoints
-    rationale: Viewport breakpoints create discrete jumps and require tokens that can't be expressed as CSS custom properties in media query conditions. clamp() produces fluid scaling between min and max values with no additional token infrastructure.
-    severity: error
-
-  - id: conformance/color/no-hardcoded-values
-    description: All color values must reference semantic tokens, not raw OpenProps primitives or hardcoded hex/rgb values
-    rationale: Hardcoded color values break the token pipeline. A color change in @w4i/brand must propagate automatically to all consumers. Direct primitive or hardcoded references bypass that chain and require manual updates.
-    severity: error
-
-  - id: conformance/spacing/no-hardcoded-px
-    description: All spacing and sizing values must reference OpenProps size tokens or be expressed as clamp()
-    rationale: Hardcoded px values for spacing scatter layout decisions across files with no single source of truth. OpenProps size tokens and clamp() expressions keep spacing decisions in the token pipeline.
-    severity: error
-
-  - id: conformance/border/no-hardcoded-px
-    description: Border sizes must reference OpenProps border-size tokens
-    rationale: Hardcoded border sizes (e.g. 1px) bypass the token pipeline. OpenProps --border-size-* tokens ensure consistency and single-source control.
-    severity: warning
-
-  - id: conformance/tokens/no-primitive-reference
-    description: Component styles must reference semantic tokens, not OpenProps primitives directly
-    rationale: Components referencing primitives directly (e.g. --blue-6) couple the component to a specific value rather than an intent. Semantic tokens (e.g. --color-action-primary) decouple intent from value, enabling campaign-level theming via @w4i/brand without touching component code.
-    severity: error

package/src/buildTokens.mjs

@@ -1,8 +0,0 @@
-import { build } from './createConfig.mjs'
-
-await build({
-  source: ['tokens/primitives/**/*.json', 'tokens/semantic/**/*.json'],
-  buildPath: 'dist',
-})
-
-console.log('✔︎ @idaho6/design tokens built')

package/src/createConfig.d.mts

@@ -1,4 +0,0 @@
-export function build(options: {
-  source: string[]
-  buildPath: string
-}): Promise<void>

package/src/createConfig.mjs

@@ -1,39 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-
-export async function build({ source, buildPath }) {
-  const sd = new StyleDictionary({
-    log: {
-      warnings: 'warn',
-      verbosity: 'default',
-    },
-    source,
-    platforms: {
-      css: {
-        transformGroup: 'css',
-        buildPath: `${buildPath}/css/`,
-        files: [
-          {
-            destination: 'tokens.css',
-            format: 'css/variables',
-            options: {
-              selector: ':root',
-            },
-          },
-        ],
-      },
-      figma: {
-        transformGroup: 'js',
-        buildPath: `${buildPath}/figma/`,
-        files: [
-          {
-            destination: 'tokens.json',
-            format: 'json/nested',
-          },
-        ],
-      },
-    },
-  })
-
-  await sd.hasInitialized
-  await sd.buildAllPlatforms()
-}

package/src/extractPrimitives.mjs

@@ -1,189 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-// OpenProps provides CSS custom property definitions
-// We'll import the JS module which exports token values
-import openProps from 'open-props'
-
-// Extract color primitives
-const colorPrimitives = {
-  openprops: {
-    color: {},
-  },
-}
-
-// Map OpenProps color scales to our structure
-// OpenProps: gray, red, green, blue, teal, yellow, orange, etc.
-// We need: slate, red, green, blue, teal, amber, white, black
-const colorMapping = {
-  slate: 'gray', // Map gray from OpenProps to slate
-  blue: 'blue',
-  red: 'red',
-  green: 'green',
-  teal: 'teal',
-  amber: 'yellow', // Map yellow to amber (closest OpenProps equivalent)
-}
-
-// Add white and black as hardcoded values (standard CSS colors)
-colorPrimitives.openprops.color.white = {
-  value: '#ffffff',
-}
-
-colorPrimitives.openprops.color.black = {
-  value: '#000000',
-}
-
-// Extract colors from OpenProps
-Object.entries(colorMapping).forEach(([targetName, opName]) => {
-  colorPrimitives.openprops.color[targetName] = {}
-
-  // For numbered scales (0-12 for most OpenProps colors)
-  for (let i = 0; i <= 12; i++) {
-    const key = `--${opName}-${i}`
-    if (key in openProps) {
-      colorPrimitives.openprops.color[targetName][i] = {
-        value: openProps[key],
-      }
-    }
-  }
-})
-
-// Extract typography primitives
-const typographyPrimitives = {
-  openprops: {
-    typography: {
-      font: {
-        family: {},
-        size: {},
-        weight: {},
-        lineheight: {},
-      },
-    },
-  },
-}
-
-// Font families
-const fontFamilies = [
-  'neo-grotesque',
-  'monospace-code',
-  'mono',
-  'system-ui',
-  'serif',
-]
-fontFamilies.forEach((family) => {
-  const key = `--font-${family}`
-  if (key in openProps) {
-    typographyPrimitives.openprops.typography.font.family[family] = {
-      value: openProps[key],
-    }
-  }
-})
-
-// Font sizes (0-8)
-for (let i = 0; i <= 8; i++) {
-  const key = `--font-size-${i}`
-  if (key in openProps) {
-    typographyPrimitives.openprops.typography.font.size[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Font weights (0-9)
-for (let i = 0; i <= 9; i++) {
-  const key = `--font-weight-${i}`
-  if (key in openProps) {
-    typographyPrimitives.openprops.typography.font.weight[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Line heights (0-9)
-for (let i = 0; i <= 9; i++) {
-  const key = `--font-lineheight-${i}`
-  if (key in openProps) {
-    typographyPrimitives.openprops.typography.font.lineheight[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Extract border primitives
-const borderPrimitives = {
-  openprops: {
-    border: {
-      radius: {},
-      size: {},
-    },
-  },
-}
-
-// Border radii (0-9)
-for (let i = 0; i <= 9; i++) {
-  const key = `--radius-${i}`
-  if (key in openProps) {
-    borderPrimitives.openprops.border.radius[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Border sizes (0-9)
-for (let i = 0; i <= 9; i++) {
-  const key = `--border-size-${i}`
-  if (key in openProps) {
-    borderPrimitives.openprops.border.size[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Extract spacing primitives
-const spacingPrimitives = {
-  openprops: {
-    spacing: {
-      size: {},
-    },
-  },
-}
-
-// Spacing scale (0-13)
-for (let i = 0; i <= 13; i++) {
-  const key = `--size-${i}`
-  if (key in openProps) {
-    spacingPrimitives.openprops.spacing.size[i] = {
-      value: openProps[key],
-    }
-  }
-}
-
-// Write primitives to files
-const tokensDir = path.join(__dirname, '../tokens/primitives')
-
-fs.mkdirSync(tokensDir, { recursive: true })
-
-fs.writeFileSync(
-  path.join(tokensDir, 'color.json'),
-  JSON.stringify(colorPrimitives, null, 2)
-)
-
-fs.writeFileSync(
-  path.join(tokensDir, 'typography.json'),
-  JSON.stringify(typographyPrimitives, null, 2)
-)
-
-fs.writeFileSync(
-  path.join(tokensDir, 'border.json'),
-  JSON.stringify(borderPrimitives, null, 2)
-)
-
-fs.writeFileSync(
-  path.join(tokensDir, 'spacing.json'),
-  JSON.stringify(spacingPrimitives, null, 2)
-)
-
-console.log('✔︎ Primitives extracted from OpenProps')

package/src/index.ts

@@ -1,13 +0,0 @@
-import { readFileSync } from 'fs'
-import { join, dirname } from 'path'
-import { load } from 'js-yaml'
-import { fileURLToPath } from 'url'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const conformanceSpecPath = join(__dirname, '../spec/conformance.yaml')
-const conformanceSpecContent = readFileSync(conformanceSpecPath, 'utf-8')
-
-export const conformanceSpec = load(conformanceSpecContent)
-
-export { build } from './createConfig.mjs'

package/src/lib/design.ts

@@ -1 +0,0 @@
-export {}

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "src",
-    "outDir": "dist",
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
-    "emitDeclarationOnly": false,
-    "types": ["node"]
-  },
-  "include": ["src/**/*.ts"],
-  "references": []
-}