@becket-ui/tokens 0.1.0 → 0.1.1

package/styled-system/tokens/index.mjs

@@ -1159,10 +1159,6 @@ const tokens = {
     "value": "var(--beckui--colors-neutral-200)",
     "variable": "var(--beckui--colors-border)"
   },
-  "colors.danger": {
-    "value": "oklch(0.62 0.20 25)",
-    "variable": "var(--beckui--colors-danger)"
-  },
   "colors.warning": {
     "value": "oklch(0.78 0.14 95)",
     "variable": "var(--beckui--colors-warning)"
@@ -1840,7 +1836,7 @@ const tokens = {
     "variable": "var(--beckui--shadows-elevated)"
   },
   "shadows.outline": {
-    "value": "0 0 0 2px color-mix(in srgb, var(--beckui--colors-primary) 45%, transparent)",
+    "value": "0 0 0 2px var(--beckui--colors-background), 0 0 0 4px var(--beckui--colors-primary)",
     "variable": "var(--beckui--shadows-outline)"
   },
   "breakpoints.sm": {
@@ -1879,6 +1875,14 @@ const tokens = {
     "value": "var(--beckui--colors-surface)",
     "variable": "var(--beckui--colors-surface)"
   },
+  "colors.danger": {
+    "value": "var(--beckui--colors-danger)",
+    "variable": "var(--beckui--colors-danger)"
+  },
+  "colors.accent": {
+    "value": "var(--beckui--colors-accent)",
+    "variable": "var(--beckui--colors-accent)"
+  },
   "spacing.-1": {
     "value": "calc(var(--beckui--spacing-1) * -1)",
     "variable": "var(--beckui--spacing-1)"

package/styled-system/tokens/tokens.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `easings.${EasingToken}` | `durations.${DurationToken}` | `letterSpacings.${LetterSpacingToken}` | `blurs.${BlurToken}` | `animations.${AnimationToken}` | `colors.${ColorToken}` | `gradients.${GradientToken}` | `spacing.${SpacingToken}` | `sizes.${SizeToken}` | `radii.${RadiusToken}` | `fonts.${FontToken}` | `fontSizes.${FontSizeToken}` | `fontWeights.${FontWeightToken}` | `lineHeights.${LineHeightToken}` | `shadows.${ShadowToken}` | `breakpoints.${BreakpointToken}`
 
-export type ColorPalette = "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "brand" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral" | "black" | "white" | "border" | "danger" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface"
+export type ColorPalette = "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "brand" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral" | "black" | "white" | "border" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface" | "danger" | "accent"
 
 export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
 
@@ -17,7 +17,7 @@ export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
 
 export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
-export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "brand.becketYellow" | "brand.hiveSage" | "brand.combAmber" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "black" | "white" | "border" | "danger" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.becketYellow" | "colorPalette.hiveSage" | "colorPalette.combAmber"
+export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "brand.becketYellow" | "brand.hiveSage" | "brand.combAmber" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "black" | "white" | "border" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface" | "danger" | "accent" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.becketYellow" | "colorPalette.hiveSage" | "colorPalette.combAmber"
 
 export type GradientToken = "primary" | "primaryHover" | "secondary" | "neutral"
 

package/styled-system/types/prop-type.d.ts

@@ -205,7 +205,7 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	colorPalette: "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "brand" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral" | "black" | "white" | "border" | "danger" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface";
+	colorPalette: "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "brand" | "primary" | "secondary" | "tertiary" | "primaryHover" | "neutral" | "black" | "white" | "border" | "warning" | "success" | "lightBackground" | "lightText" | "background" | "text" | "muted" | "surface" | "danger" | "accent";
 	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
 }
 

package/theme/index.d.ts

@@ -9,11 +9,12 @@ export type BecketThemeColors = {
   text?: BecketColorValue;
   muted?: BecketColorValue;
   border?: BecketColorValue;
+  danger?: BecketColorValue;
+  accent?: BecketColorValue;
   /** @deprecated Prefer `background: { light }`. */
   lightBackground?: string;
   /** @deprecated Prefer `text: { light }`. */
   lightText?: string;
-  danger?: string;
   warning?: string;
   success?: string;
   neutral?: Partial<

package/theme/index.mjs

@@ -9,12 +9,11 @@ const COLOR_FLAT = [
   'primaryHover',
   'lightBackground',
   'lightText',
-  'danger',
   'warning',
   'success',
 ];
 
-const COLOR_THEMED = ['background', 'text', 'muted', 'border'];
+const COLOR_THEMED = ['background', 'text', 'muted', 'border', 'danger', 'accent'];
 const NEUTRAL_STEPS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
 const RADII = ['none', 'sm', 'md', 'lg', 'xl', 'full'];
 const FONT_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];

package/theme.example.css

@@ -32,8 +32,9 @@
   /* --beckui--colors-neutral-50: oklch(0.96 0.012 78); */
   /* --beckui--colors-neutral-900: oklch(0.22 0.015 60); */
 
-  /* Status — never aliases of primary */
-  /* --beckui--colors-danger: oklch(0.62 0.20 25); */
+  /* Status — never aliases of primary. danger + accent are semantic (dark vs light). */
+  /* --beckui--colors-danger: oklch(0.76 0.16 25); */
+  /* --beckui--colors-accent: oklch(0.86 0.12 125); */
   /* --beckui--colors-warning: oklch(0.78 0.14 95); */
   /* --beckui--colors-success: oklch(0.68 0.16 145); */
 
@@ -65,4 +66,6 @@ html[data-theme='light'] {
   /* --beckui--colors-background: var(--beckui--colors-neutral-50); */
   /* --beckui--colors-text: var(--beckui--colors-neutral-900); */
   /* --beckui--colors-muted: var(--beckui--colors-neutral-600); */
+  /* --beckui--colors-danger: oklch(0.48 0.20 25); */
+  /* --beckui--colors-accent: oklch(0.38 0.14 125); */
 }