@ds-mo/tokens 0.1.0

package/dist/typography.css

@@ -0,0 +1,161 @@
+/* AUTO-GENERATED + HAND-AUTHORED. See scripts/generate-typography-tokens.mjs */
+/* Generated section: from src/json/typography/typography.tokens.json         */
+
+:root {
+  /* Font weights */
+  --typography-weight-regular: 400;
+  --typography-weight-medium: 500;
+  --typography-weight-semibold: 600;
+  --typography-weight-bold: 700;
+
+  /* Font sizes */
+  --typography-fontsize-xs: 9px;
+  --typography-fontsize-sm: 12px;
+  --typography-fontsize-md: 14px;
+  --typography-fontsize-lg: 18px;
+  --typography-fontsize-xl: 24px;
+  --typography-fontsize-2xl: 32px;
+  --typography-fontsize-3xl: 44px;
+
+  /* Line heights */
+  --typography-lineheight-xs: 12px;
+  --typography-lineheight-sm: 16px;
+  --typography-lineheight-md: 20px;
+  --typography-lineheight-lg: 24px;
+  --typography-lineheight-xl: 32px;
+  --typography-lineheight-2xl: 48px;
+  --typography-lineheight-3xl: 64px;
+
+  /* Letter spacing */
+  --typography-letterspacing-none: 0px;
+  --typography-letterspacing-positive: 0.3px;
+  --typography-letterspacing-negative-half: -0.15px;
+  --typography-letterspacing-negative: -0.3px;
+  --typography-letterspacing-negative-double: -0.6px;
+
+  /* Paragraph spacing */
+  --typography-paragraphspacing-none: 0px;
+  --typography-paragraphspacing-sm: 4px;
+  --typography-paragraphspacing-md: 8px;
+  --typography-paragraphspacing-lg: 12px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     HAND-AUTHORED — Font family.
+     Not exported as a Figma variable in this collection. Override here to
+     swap the entire typeface without touching individual text style classes.
+     ───────────────────────────────────────────────────────────────────────── */
+  --typography-font-family: 'Inter', sans-serif;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   HAND-AUTHORED — Text style classes.
+   These compose multiple typography tokens into reusable CSS classes.
+   They cannot be expressed as Figma variables (they are text styles, not variables).
+   All property values reference CSS custom properties — no hard-coded values.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+.text-display-medium {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-3xl);
+  line-height: var(--typography-lineheight-3xl);
+  font-weight: var(--typography-weight-bold);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+.text-display-small {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-2xl);
+  line-height: var(--typography-lineheight-2xl);
+  font-weight: var(--typography-weight-bold);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+.text-title-large {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-xl);
+  line-height: var(--typography-lineheight-xl);
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+.text-title-medium {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+.text-title-small {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+.text-body-large {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+.text-body-large-emphasis {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+.text-body-medium {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+.text-body-medium-emphasis {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+.text-body-small {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-none);
+}
+
+.text-body-small-emphasis {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+.text-caption {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-xs);
+  line-height: var(--typography-lineheight-xs);
+  font-weight: var(--typography-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--typography-letterspacing-positive);
+}
+
+.text-caption-emphasis {
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-xs);
+  line-height: var(--typography-lineheight-xs);
+  font-weight: var(--typography-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--typography-letterspacing-positive);
+}

package/dist/utilities.css

@@ -0,0 +1,187 @@
+/**
+ * Utility CSS Classes
+ * Reusable utility classes for common patterns across components
+ */
+
+/* ============================================
+   INTERACTION PATTERNS
+   Common hover/pressed overlay patterns for buttons
+   ============================================ */
+
+/**
+ * Button interaction base
+ * Apply to any interactive element that needs hover/pressed states
+ * Usage: class="buttonInteraction" on the button element
+ */
+.buttonInteraction {
+  position: relative;
+  overflow: hidden;
+}
+
+.buttonInteraction::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-background-shade);
+  opacity: 0;
+  transition: opacity var(--effect-motion-short-2);
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: 1;
+}
+
+.buttonInteraction:hover::before {
+  opacity: 0.08;
+}
+
+.buttonInteraction:active::before {
+  opacity: 0.16;
+}
+
+.buttonInteraction:disabled::before {
+  opacity: 0;
+}
+
+/* ============================================
+   BUTTON PRESS ANIMATION
+   Scale-down effect on press
+   ============================================ */
+
+/**
+ * Button press scale effect
+ * Already exists in globals.css but documented here for reference
+ * Usage: class="buttonPress" on the button element
+ */
+
+/* ============================================
+   FOCUS STATES
+   Consistent focus ring styles
+   ============================================ */
+
+.focusRing {
+  outline: none;
+}
+
+.focusRing:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-foreground-medium-brand);
+  outline-offset: var(--dimension-offset-025);
+}
+
+/* ============================================
+   OVERLAY BACKGROUNDS
+   Consistent overlay backgrounds for hover/pressed states
+   ============================================ */
+
+/**
+ * Hover overlay - use for subtle hover feedback
+ * Add as a pseudo-element or separate div
+ */
+.hoverOverlay {
+  background-color: var(--color-background-shade);
+  opacity: var(--opacity-interaction-hover, 0.08);
+}
+
+/**
+ * Pressed overlay - use for active/pressed feedback
+ */
+.pressedOverlay {
+  background-color: var(--color-background-shade);
+  opacity: var(--opacity-interaction-pressed, 0.16);
+}
+
+/* ============================================
+   SELECTION STATES
+   ============================================ */
+
+.selected {
+  background-color: var(--color-background-secondary);
+}
+
+.selectedBold {
+  background-color: var(--color-background-translucent);
+}
+
+/* ============================================
+   TEXT UTILITIES
+   ============================================ */
+
+.textTruncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.textClamp2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.textClamp3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ============================================
+   LAYOUT UTILITIES
+   ============================================ */
+
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flexBetween {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flexStart {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flexEnd {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* ============================================
+   SCROLLBAR HIDING
+   ============================================ */
+
+.hideScrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.hideScrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+/* ============================================
+   TRANSITION UTILITIES
+   ============================================ */
+
+.transitionColors {
+  transition: color var(--effect-motion-short-2),
+              background-color var(--effect-motion-short-2),
+              border-color var(--effect-motion-short-2),
+              fill var(--effect-motion-short-2),
+              stroke var(--effect-motion-short-2);
+}
+
+.transitionAll {
+  transition: all var(--effect-motion-medium-1);
+}
+
+.transitionTransform {
+  transition: transform var(--effect-motion-short-2);
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@ds-mo/tokens",
+  "version": "0.1.0",
+  "description": "TokoMo design tokens — colors, dimensions, typography, and effects as CSS custom properties, JSON, and TypeScript constants",
+  "keywords": [
+    "design-tokens",
+    "css-variables",
+    "css-custom-properties",
+    "design-system",
+    "figma",
+    "tokens",
+    "colors",
+    "typography",
+    "spacing",
+    "theming",
+    "dark-mode"
+  ],
+  "homepage": "https://github.com/zainadeel/TokoMo#readme",
+  "bugs": {
+    "url": "https://github.com/zainadeel/TokoMo/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zainadeel/TokoMo.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.css",
+  "exports": {
+    ".": "./dist/index.css",
+    "./css": "./dist/index.css",
+    "./colors": "./dist/colors.css",
+    "./dimensions": "./dist/dimensions.css",
+    "./typography": "./dist/typography.css",
+    "./effects": "./dist/effects.css",
+    "./reset": "./dist/reset.css",
+    "./globals": "./dist/globals.css",
+    "./utilities": "./dist/utilities.css",
+    "./themes/light": "./dist/themes/light.css",
+    "./themes/dark": "./dist/themes/dark.css",
+    "./json": "./dist/tokens.json",
+    "./json/colors": "./dist/json/colors.json",
+    "./json/dimensions": "./dist/json/dimensions.json",
+    "./json/typography": "./dist/json/typography.json",
+    "./json/effects": "./dist/json/effects.json",
+    "./ts": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "build:colors": "node scripts/generate-color-tokens.mjs",
+    "build:json": "node scripts/generate-json-tokens.mjs",
+    "build:ts": "node scripts/generate-ts-constants.mjs",
+    "clean": "rm -rf dist",
+    "dev": "node scripts/build.mjs --watch"
+  },
+  "engines": {
+    "node": ">=25.9.0"
+  },
+  "devDependencies": {
+    "chokidar": "^5.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}