@vinaverse/tokens 0.1.0-alpha.2 → 0.1.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinaverse/tokens",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.21",
   "description": "Vinaverse design tokens and copy shared by every UI kit: colors for light and dark, type, spacing, radii, motion, a contrast check; and the words the kits say, with the rules on them.",
   "license": "Apache-2.0",
   "author": "Vinaverse, Inc.",
@@ -19,6 +19,10 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "react-native": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
       "import": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
@@ -29,6 +33,10 @@
       }
     },
     "./copy": {
+      "react-native": {
+        "types": "./dist/copy/index.d.cts",
+        "default": "./dist/copy/index.cjs"
+      },
       "import": {
         "types": "./dist/copy/index.d.ts",
         "default": "./dist/copy/index.js"
@@ -64,13 +72,13 @@
       "name": "@vinaverse/tokens (ESM, everything)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "2 kB"
+      "limit": "2.6 kB"
     },
     {
       "name": "@vinaverse/tokens/copy (ESM, everything)",
       "path": "dist/copy/index.js",
       "import": "*",
-      "limit": "4 kB"
+      "limit": "4.5 kB"
     }
   ],
   "scripts": {

package/src/tokens.json

@@ -26,6 +26,10 @@
         "$type": "color",
         "$value": "#545B67"
       },
+      "textSecondary": {
+        "$type": "color",
+        "$value": "#454B55"
+      },
       "primary": {
         "$type": "color",
         "$value": "#2B57CF"
@@ -85,6 +89,14 @@
       "focus": {
         "$type": "color",
         "$value": "#2B57CF"
+      },
+      "primarySubtle": {
+        "$type": "color",
+        "$value": "#F5F6F8"
+      },
+      "rating": {
+        "$type": "color",
+        "$value": "#7A4F00"
       }
     },
     "dark": {
@@ -112,6 +124,10 @@
         "$type": "color",
         "$value": "#A6ADBA"
       },
+      "textSecondary": {
+        "$type": "color",
+        "$value": "#BEC4CF"
+      },
       "primary": {
         "$type": "color",
         "$value": "#8DB0FF"
@@ -171,6 +187,14 @@
       "focus": {
         "$type": "color",
         "$value": "#8DB0FF"
+      },
+      "primarySubtle": {
+        "$type": "color",
+        "$value": "#181B21"
+      },
+      "rating": {
+        "$type": "color",
+        "$value": "#E6B85C"
       }
     }
   },
@@ -261,9 +285,13 @@
     }
   },
   "motion": {
+    "instant": {
+      "$type": "duration",
+      "$value": 80
+    },
     "fast": {
       "$type": "duration",
-      "$value": 120
+      "$value": 140
     },
     "normal": {
       "$type": "duration",
@@ -273,6 +301,26 @@
       "$type": "duration",
       "$value": 600,
       "$description": "how long a connecting banner waits before it shows, so a quick connection never flashes one"
+    },
+    "base": {
+      "$type": "duration",
+      "$value": 220
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": 320
+    },
+    "stagger": {
+      "$type": "duration",
+      "$value": 30
+    },
+    "rise": {
+      "$type": "dimension",
+      "$value": 8
+    },
+    "pressScale": {
+      "$type": "number",
+      "$value": 0.97
     }
   },
   "size": {
@@ -290,6 +338,333 @@
       "$description": "the AI disclosure is never drawn smaller"
     }
   },
+  "chat": {
+    "$description": "The chat shell (spec 00), kit defaults a tenant overrides (ThemeOverrides.chat): elevation draws in light only.",
+    "gutter": {
+      "$type": "dimension",
+      "$value": 16
+    },
+    "gap": {
+      "sameAuthor": {
+        "$type": "dimension",
+        "$value": 4
+      },
+      "authorChange": {
+        "$type": "dimension",
+        "$value": 12
+      },
+      "block": {
+        "$type": "dimension",
+        "$value": 8
+      }
+    },
+    "bubble": {
+      "padX": {
+        "$type": "dimension",
+        "$value": 14
+      },
+      "padY": {
+        "$type": "dimension",
+        "$value": 10
+      },
+      "maxWidth": {
+        "$type": "number",
+        "$value": 0.82
+      }
+    },
+    "card": {
+      "pad": {
+        "$type": "dimension",
+        "$value": 14
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": 8
+      },
+      "carouselGap": {
+        "$type": "dimension",
+        "$value": 10
+      },
+      "carouselWidth": {
+        "$type": "dimension",
+        "$value": 214
+      }
+    },
+    "chip": {
+      "height": {
+        "$type": "dimension",
+        "$value": 38
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": 8
+      }
+    },
+    "header": {
+      "height": {
+        "$type": "dimension",
+        "$value": 56
+      }
+    },
+    "composer": {
+      "minHeight": {
+        "$type": "dimension",
+        "$value": 48
+      }
+    },
+    "input": {
+      "gap": {
+        "$type": "dimension",
+        "$value": 12
+      }
+    },
+    "radius": {
+      "bubble": {
+        "$type": "dimension",
+        "$value": 20
+      },
+      "bubbleTail": {
+        "$type": "dimension",
+        "$value": 6
+      },
+      "card": {
+        "$type": "dimension",
+        "$value": 16
+      },
+      "cardMedia": {
+        "$type": "dimension",
+        "$value": 12
+      },
+      "chip": {
+        "$type": "dimension",
+        "$value": 999
+      },
+      "slot": {
+        "$type": "dimension",
+        "$value": 12
+      },
+      "field": {
+        "$type": "dimension",
+        "$value": 12
+      },
+      "composer": {
+        "$type": "dimension",
+        "$value": 24
+      },
+      "sheet": {
+        "$type": "dimension",
+        "$value": 28
+      }
+    },
+    "elevation": {
+      "card": {
+        "$type": "shadow",
+        "$value": {
+          "offsetY": 1,
+          "blur": 3,
+          "opacity": 0.08
+        }
+      },
+      "raised": {
+        "$type": "shadow",
+        "$value": {
+          "offsetY": 4,
+          "blur": 12,
+          "opacity": 0.08
+        }
+      },
+      "overlay": {
+        "$type": "shadow",
+        "$value": {
+          "offsetY": 12,
+          "blur": 28,
+          "opacity": 0.12
+        }
+      },
+      "sheet": {
+        "$type": "shadow",
+        "$value": {
+          "offsetY": -4,
+          "blur": 16,
+          "opacity": 0.08
+        }
+      }
+    },
+    "type": {
+      "bubble": {
+        "size": {
+          "$type": "dimension",
+          "$value": 16
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 22
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 400
+        }
+      },
+      "meta": {
+        "size": {
+          "$type": "dimension",
+          "$value": 12
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 16
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 400
+        }
+      },
+      "cardTitle": {
+        "size": {
+          "$type": "dimension",
+          "$value": 15
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 20
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 600
+        }
+      },
+      "cardBody": {
+        "size": {
+          "$type": "dimension",
+          "$value": 13
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 18
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 400
+        }
+      },
+      "cardPrice": {
+        "size": {
+          "$type": "dimension",
+          "$value": 15
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 20
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 600
+        }
+      },
+      "chip": {
+        "size": {
+          "$type": "dimension",
+          "$value": 14
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 20
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 500
+        }
+      },
+      "working": {
+        "size": {
+          "$type": "dimension",
+          "$value": 14
+        },
+        "line": {
+          "$type": "dimension",
+          "$value": 19
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": 400
+        }
+      }
+    },
+    "thinking": {
+      "dotSize": {
+        "$type": "dimension",
+        "$value": 6
+      },
+      "dotGap": {
+        "$type": "dimension",
+        "$value": 4
+      },
+      "rise": {
+        "$type": "dimension",
+        "$value": 3
+      },
+      "cycle": {
+        "$type": "duration",
+        "$value": 900
+      },
+      "delay": {
+        "$type": "duration",
+        "$value": 300
+      },
+      "dotDelay": {
+        "$type": "duration",
+        "$value": 150
+      }
+    },
+    "working": {
+      "minStep": {
+        "$type": "duration",
+        "$value": 600
+      },
+      "iconSize": {
+        "$type": "dimension",
+        "$value": 14
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$value": 14
+      },
+      "lineHeight": {
+        "$type": "dimension",
+        "$value": 19
+      }
+    },
+    "caret": {
+      "width": {
+        "$type": "dimension",
+        "$value": 2
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": 18
+      },
+      "cycle": {
+        "$type": "duration",
+        "$value": 1000
+      }
+    },
+    "stream": {
+      "flush": {
+        "$type": "duration",
+        "$value": 50
+      }
+    },
+    "skeleton": {
+      "pulse": {
+        "$type": "duration",
+        "$value": 1200
+      },
+      "minOpacity": {
+        "$type": "number",
+        "$value": 0.55
+      }
+    }
+  },
   "contrast": {
     "$description": "The text and control pairs a theme must keep legible, in every mode: WCAG 2 ratio of fg on bg at least min (4.5 for text, 3 for controls and borders). divider is decorative and has none.",
     "pairs": [
@@ -313,6 +688,21 @@
         "bg": "color.surface",
         "min": 4.5
       },
+      {
+        "fg": "color.textSecondary",
+        "bg": "color.background",
+        "min": 4.5
+      },
+      {
+        "fg": "color.textSecondary",
+        "bg": "color.surface",
+        "min": 4.5
+      },
+      {
+        "fg": "color.textSecondary",
+        "bg": "color.agentBubble",
+        "min": 4.5
+      },
       {
         "fg": "color.agentText",
         "bg": "color.agentBubble",
@@ -358,6 +748,11 @@
         "bg": "color.background",
         "min": 4.5
       },
+      {
+        "fg": "color.warning",
+        "bg": "color.surface",
+        "min": 4.5
+      },
       {
         "fg": "color.success",
         "bg": "color.background",
@@ -372,7 +767,27 @@
         "fg": "color.focus",
         "bg": "color.background",
         "min": 3
+      },
+      {
+        "fg": "color.primary",
+        "bg": "color.primarySubtle",
+        "min": 4.5
       }
     ]
+  },
+  "ease": {
+    "$description": "cubic-bezier control points: standard for what moves and stays, out for what enters, in for what leaves",
+    "standard": {
+      "$type": "cubicBezier",
+      "$value": [0.2, 0, 0, 1]
+    },
+    "out": {
+      "$type": "cubicBezier",
+      "$value": [0.16, 1, 0.3, 1]
+    },
+    "in": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 1, 1]
+    }
   }
 }