tokka 0.2.0 → 0.2.2

package/systems/corporate/tokens/semantics.json

@@ -0,0 +1,68 @@
+{
+  "tokens": [
+    {
+      "id": "surface.brand",
+      "type": "color",
+      "description": "Primary brand surface",
+      "source": "semantic",
+      "references": ["color.navy.500"],
+      "value": "220 50% 35%"
+    },
+    {
+      "id": "surface.default",
+      "type": "color",
+      "description": "Default background",
+      "source": "semantic",
+      "references": ["color.white"],
+      "modes": {
+        "light": "0 0% 100%",
+        "dark": "210 40% 10%"
+      }
+    },
+    {
+      "id": "text.default",
+      "type": "color",
+      "description": "Default text",
+      "source": "semantic",
+      "references": ["color.slate.900"],
+      "modes": {
+        "light": "210 40% 10%",
+        "dark": "210 40% 98%"
+      }
+    },
+    {
+      "id": "text.on-brand",
+      "type": "color",
+      "description": "Text on brand surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "value": "0 0% 100%"
+    },
+    {
+      "id": "border.default",
+      "type": "color",
+      "description": "Default border",
+      "source": "semantic",
+      "modes": {
+        "light": "210 30% 85%",
+        "dark": "210 30% 20%"
+      }
+    },
+    {
+      "id": "radius.default",
+      "type": "radius",
+      "description": "Sharp edges",
+      "source": "semantic",
+      "references": ["radius.none"],
+      "value": "0"
+    },
+    {
+      "id": "space.default",
+      "type": "dimension",
+      "description": "Compact spacing",
+      "source": "semantic",
+      "references": ["space.2"],
+      "value": "0.5rem"
+    }
+  ]
+}

package/systems/dark-mode/system.json

@@ -0,0 +1,17 @@
+{
+  "id": "dark-mode",
+  "name": "Dark Mode",
+  "description": "Optimized dark palette as default - rich darks with vibrant accents",
+  "tags": ["dark", "modern", "vibrant"],
+  "modes": ["dark", "light"],
+  "policies": {
+    "radius": "rounded",
+    "density": "comfortable",
+    "contrast": "high",
+    "motion": "subtle"
+  },
+  "defaults": {
+    "font": "inter",
+    "iconStyle": "line"
+  }
+}

package/systems/dark-mode/tokens/primitives.json

@@ -0,0 +1,10 @@
+{
+  "tokens": [
+    {"id": "color.slate.950", "type": "color", "description": "Rich dark", "source": "primitive", "value": "222 47% 8%"},
+    {"id": "color.slate.50", "type": "color", "description": "Light", "source": "primitive", "value": "210 40% 98%"},
+    {"id": "color.purple.500", "type": "color", "description": "Vibrant purple", "source": "primitive", "value": "270 91% 65%"},
+    {"id": "color.white", "type": "color", "description": "White", "source": "primitive", "value": "0 0% 100%"},
+    {"id": "space.4", "type": "dimension", "description": "Base spacing", "source": "primitive", "value": "1rem"},
+    {"id": "radius.md", "type": "radius", "description": "Medium radius", "source": "primitive", "value": "0.5rem"}
+  ]
+}

package/systems/dark-mode/tokens/semantics.json

@@ -0,0 +1,11 @@
+{
+  "tokens": [
+    {"id": "surface.brand", "type": "color", "description": "Brand surface", "source": "semantic", "references": ["color.purple.500"], "modes": {"dark": "270 91% 65%", "light": "270 80% 55%"}},
+    {"id": "surface.default", "type": "color", "description": "Background", "source": "semantic", "modes": {"dark": "222 47% 8%", "light": "210 40% 98%"}},
+    {"id": "text.default", "type": "color", "description": "Text", "source": "semantic", "modes": {"dark": "210 40% 98%", "light": "222 47% 8%"}},
+    {"id": "text.on-brand", "type": "color", "description": "Text on brand", "source": "semantic", "references": ["color.white"], "value": "0 0% 100%"},
+    {"id": "border.default", "type": "color", "description": "Border", "source": "semantic", "modes": {"dark": "222 30% 20%", "light": "210 30% 85%"}},
+    {"id": "radius.default", "type": "radius", "description": "Default radius", "source": "semantic", "references": ["radius.md"], "value": "0.5rem"},
+    {"id": "space.default", "type": "dimension", "description": "Default spacing", "source": "semantic", "references": ["space.4"], "value": "1rem"}
+  ]
+}

package/systems/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@tokka/systems",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Starter design systems for tokka",
+  "exports": {
+    "./*": "./*"
+  },
+  "files": [
+    "*/system.json",
+    "*/tokens/**",
+    "*/preview/**"
+  ]
+}

package/systems/soft-saas/system.json

@@ -0,0 +1,20 @@
+{
+  "id": "soft-saas",
+  "name": "Soft SaaS",
+  "description": "Low contrast, friendly, rounded, medium density - perfect for modern SaaS applications",
+  "tags": ["saas", "calm", "rounded", "friendly"],
+  "modes": ["light", "dark"],
+  "policies": {
+    "radius": "rounded",
+    "density": "comfortable",
+    "contrast": "medium",
+    "motion": "subtle"
+  },
+  "defaults": {
+    "font": "inter",
+    "iconStyle": "line"
+  },
+  "figma": {
+    "collections": ["Color", "Typography", "Space", "Radius", "Motion"]
+  }
+}

package/systems/soft-saas/tokens/primitives.json

@@ -0,0 +1,235 @@
+{
+  "tokens": [
+    {
+      "id": "color.gray.50",
+      "type": "color",
+      "description": "Lightest gray",
+      "source": "primitive",
+      "value": "0 0% 98%"
+    },
+    {
+      "id": "color.gray.100",
+      "type": "color",
+      "description": "Very light gray",
+      "source": "primitive",
+      "value": "0 0% 96%"
+    },
+    {
+      "id": "color.gray.200",
+      "type": "color",
+      "description": "Light gray",
+      "source": "primitive",
+      "value": "0 0% 90%"
+    },
+    {
+      "id": "color.gray.300",
+      "type": "color",
+      "description": "Medium-light gray",
+      "source": "primitive",
+      "value": "0 0% 80%"
+    },
+    {
+      "id": "color.gray.400",
+      "type": "color",
+      "description": "Medium gray",
+      "source": "primitive",
+      "value": "0 0% 64%"
+    },
+    {
+      "id": "color.gray.500",
+      "type": "color",
+      "description": "Base gray",
+      "source": "primitive",
+      "value": "0 0% 45%"
+    },
+    {
+      "id": "color.gray.600",
+      "type": "color",
+      "description": "Medium-dark gray",
+      "source": "primitive",
+      "value": "0 0% 32%"
+    },
+    {
+      "id": "color.gray.700",
+      "type": "color",
+      "description": "Dark gray",
+      "source": "primitive",
+      "value": "0 0% 21%"
+    },
+    {
+      "id": "color.gray.800",
+      "type": "color",
+      "description": "Very dark gray",
+      "source": "primitive",
+      "value": "0 0% 15%"
+    },
+    {
+      "id": "color.gray.900",
+      "type": "color",
+      "description": "Darkest gray",
+      "source": "primitive",
+      "value": "0 0% 10%"
+    },
+    {
+      "id": "color.blue.400",
+      "type": "color",
+      "description": "Light brand blue",
+      "source": "primitive",
+      "value": "220 90% 65%"
+    },
+    {
+      "id": "color.blue.500",
+      "type": "color",
+      "description": "Brand blue",
+      "source": "primitive",
+      "value": "220 90% 56%"
+    },
+    {
+      "id": "color.blue.600",
+      "type": "color",
+      "description": "Dark brand blue",
+      "source": "primitive",
+      "value": "220 90% 48%"
+    },
+    {
+      "id": "color.red.500",
+      "type": "color",
+      "description": "Error red",
+      "source": "primitive",
+      "value": "0 72% 51%"
+    },
+    {
+      "id": "color.red.600",
+      "type": "color",
+      "description": "Dark error red",
+      "source": "primitive",
+      "value": "0 72% 45%"
+    },
+    {
+      "id": "color.green.500",
+      "type": "color",
+      "description": "Success green",
+      "source": "primitive",
+      "value": "142 71% 45%"
+    },
+    {
+      "id": "color.green.600",
+      "type": "color",
+      "description": "Dark success green",
+      "source": "primitive",
+      "value": "142 71% 39%"
+    },
+    {
+      "id": "color.amber.500",
+      "type": "color",
+      "description": "Warning amber",
+      "source": "primitive",
+      "value": "38 92% 50%"
+    },
+    {
+      "id": "color.white",
+      "type": "color",
+      "description": "Pure white",
+      "source": "primitive",
+      "value": "0 0% 100%"
+    },
+    {
+      "id": "color.black",
+      "type": "color",
+      "description": "Pure black",
+      "source": "primitive",
+      "value": "0 0% 0%"
+    },
+    {
+      "id": "space.0",
+      "type": "dimension",
+      "description": "Zero spacing",
+      "source": "primitive",
+      "value": "0"
+    },
+    {
+      "id": "space.1",
+      "type": "dimension",
+      "description": "Extra small spacing",
+      "source": "primitive",
+      "value": "0.25rem"
+    },
+    {
+      "id": "space.2",
+      "type": "dimension",
+      "description": "Small spacing",
+      "source": "primitive",
+      "value": "0.5rem"
+    },
+    {
+      "id": "space.3",
+      "type": "dimension",
+      "description": "Medium spacing",
+      "source": "primitive",
+      "value": "0.75rem"
+    },
+    {
+      "id": "space.4",
+      "type": "dimension",
+      "description": "Base spacing",
+      "source": "primitive",
+      "value": "1rem"
+    },
+    {
+      "id": "space.6",
+      "type": "dimension",
+      "description": "Large spacing",
+      "source": "primitive",
+      "value": "1.5rem"
+    },
+    {
+      "id": "space.8",
+      "type": "dimension",
+      "description": "Extra large spacing",
+      "source": "primitive",
+      "value": "2rem"
+    },
+    {
+      "id": "radius.sm",
+      "type": "radius",
+      "description": "Small radius",
+      "source": "primitive",
+      "value": "0.25rem"
+    },
+    {
+      "id": "radius.md",
+      "type": "radius",
+      "description": "Medium radius",
+      "source": "primitive",
+      "value": "0.5rem"
+    },
+    {
+      "id": "radius.lg",
+      "type": "radius",
+      "description": "Large radius",
+      "source": "primitive",
+      "value": "0.75rem"
+    },
+    {
+      "id": "shadow.sm",
+      "type": "shadow",
+      "description": "Small shadow",
+      "source": "primitive",
+      "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+    },
+    {
+      "id": "shadow.md",
+      "type": "shadow",
+      "description": "Medium shadow",
+      "source": "primitive",
+      "value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    {
+      "id": "shadow.lg",
+      "type": "shadow",
+      "description": "Large shadow",
+      "source": "primitive",
+      "value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+    }
+  ]
+}

package/systems/soft-saas/tokens/semantics.json

@@ -0,0 +1,190 @@
+{
+  "tokens": [
+    {
+      "id": "surface.brand",
+      "type": "color",
+      "description": "Primary brand surface",
+      "source": "semantic",
+      "references": ["color.blue.500"],
+      "modes": {
+        "light": "220 90% 56%",
+        "dark": "220 85% 52%"
+      }
+    },
+    {
+      "id": "surface.default",
+      "type": "color",
+      "description": "Default background surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "modes": {
+        "light": "0 0% 100%",
+        "dark": "0 0% 10%"
+      }
+    },
+    {
+      "id": "surface.secondary",
+      "type": "color",
+      "description": "Secondary surface",
+      "source": "semantic",
+      "references": ["color.gray.100"],
+      "modes": {
+        "light": "0 0% 96%",
+        "dark": "0 0% 15%"
+      }
+    },
+    {
+      "id": "surface.muted",
+      "type": "color",
+      "description": "Muted background",
+      "source": "semantic",
+      "references": ["color.gray.100"],
+      "modes": {
+        "light": "0 0% 96%",
+        "dark": "0 0% 18%"
+      }
+    },
+    {
+      "id": "surface.accent",
+      "type": "color",
+      "description": "Accent surface",
+      "source": "semantic",
+      "references": ["color.gray.100"],
+      "modes": {
+        "light": "0 0% 96%",
+        "dark": "0 0% 22%"
+      }
+    },
+    {
+      "id": "surface.card",
+      "type": "color",
+      "description": "Card surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "modes": {
+        "light": "0 0% 100%",
+        "dark": "0 0% 12%"
+      }
+    },
+    {
+      "id": "surface.popover",
+      "type": "color",
+      "description": "Popover surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "modes": {
+        "light": "0 0% 100%",
+        "dark": "0 0% 14%"
+      }
+    },
+    {
+      "id": "surface.destructive",
+      "type": "color",
+      "description": "Destructive action surface",
+      "source": "semantic",
+      "references": ["color.red.500"],
+      "modes": {
+        "light": "0 72% 51%",
+        "dark": "0 62% 45%"
+      }
+    },
+    {
+      "id": "text.default",
+      "type": "color",
+      "description": "Default text color",
+      "source": "semantic",
+      "references": ["color.gray.900"],
+      "modes": {
+        "light": "0 0% 10%",
+        "dark": "0 0% 98%"
+      }
+    },
+    {
+      "id": "text.muted",
+      "type": "color",
+      "description": "Muted text color",
+      "source": "semantic",
+      "references": ["color.gray.500"],
+      "modes": {
+        "light": "0 0% 45%",
+        "dark": "0 0% 64%"
+      }
+    },
+    {
+      "id": "text.on-brand",
+      "type": "color",
+      "description": "Text on brand surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "value": "0 0% 100%"
+    },
+    {
+      "id": "text.on-destructive",
+      "type": "color",
+      "description": "Text on destructive surface",
+      "source": "semantic",
+      "references": ["color.white"],
+      "value": "0 0% 100%"
+    },
+    {
+      "id": "border.default",
+      "type": "color",
+      "description": "Default border color",
+      "source": "semantic",
+      "references": ["color.gray.200"],
+      "modes": {
+        "light": "0 0% 90%",
+        "dark": "0 0% 20%"
+      }
+    },
+    {
+      "id": "border.input",
+      "type": "color",
+      "description": "Input border color",
+      "source": "semantic",
+      "references": ["color.gray.300"],
+      "modes": {
+        "light": "0 0% 80%",
+        "dark": "0 0% 25%"
+      }
+    },
+    {
+      "id": "focus.ring",
+      "type": "color",
+      "description": "Focus ring color",
+      "source": "semantic",
+      "references": ["color.blue.500"],
+      "modes": {
+        "light": "220 90% 56%",
+        "dark": "220 85% 52%"
+      }
+    },
+    {
+      "id": "icon.default",
+      "type": "color",
+      "description": "Default icon color",
+      "source": "semantic",
+      "references": ["color.gray.600"],
+      "modes": {
+        "light": "0 0% 32%",
+        "dark": "0 0% 80%"
+      }
+    },
+    {
+      "id": "radius.default",
+      "type": "radius",
+      "description": "Default border radius",
+      "source": "semantic",
+      "references": ["radius.md"],
+      "value": "0.5rem"
+    },
+    {
+      "id": "space.default",
+      "type": "dimension",
+      "description": "Default spacing",
+      "source": "semantic",
+      "references": ["space.4"],
+      "value": "1rem"
+    }
+  ]
+}