@becket-ui/tokens 0.1.0 → 0.1.2

package/styled-system/styles.css

@@ -508,9 +508,8 @@
     --beckui--colors-black: oklch(20% 0 0);
     --beckui--colors-white: oklch(99% 0 0);
     --beckui--colors-border: var(--beckui--colors-neutral-200);
-    --beckui--colors-danger: oklch(0.62 0.20 25);
-    --beckui--colors-warning: oklch(0.78 0.14 95);
-    --beckui--colors-success: oklch(0.68 0.16 145);
+    --beckui--colors-warning: oklch(0.72 0.16 42);
+    --beckui--colors-success: oklch(0.68 0.14 165);
     --beckui--colors-light-background: var(--beckui--colors-neutral-50);
     --beckui--colors-light-text: var(--beckui--colors-neutral-900);
     --beckui--gradients-primary: linear-gradient(to right, var(--beckui--colors-primary), var(--beckui--colors-tertiary));
@@ -678,7 +677,7 @@
     --beckui--shadows-md: 0 3px 6px 0 oklch(0% 0 0 / 0.12);
     --beckui--shadows-lg: 0 8px 16px 0 oklch(0% 0 0 / 0.16);
     --beckui--shadows-elevated: 0 12px 32px oklch(0% 0 0 / 0.55), 0 0 0 1px oklch(100% 0 0 / 0.08);
-    --beckui--shadows-outline: 0 0 0 2px color-mix(in srgb, var(--beckui--colors-primary) 45%, transparent);
+    --beckui--shadows-outline: 0 0 0 2px var(--beckui--colors-background), 0 0 0 4px var(--beckui--colors-primary);
     --beckui--breakpoints-sm: 30rem;
     --beckui--breakpoints-md: 48rem;
     --beckui--breakpoints-lg: 62rem;
@@ -688,13 +687,17 @@
     --beckui--colors-text: var(--beckui--colors-neutral-50);
     --beckui--colors-muted: var(--beckui--colors-neutral-300);
     --beckui--colors-surface: var(--beckui--colors-neutral-800);
+    --beckui--colors-danger: oklch(0.76 0.16 25);
+    --beckui--colors-accent: oklch(0.86 0.12 125);
 }
 
   [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-surface: var(--beckui--colors-white)
+    --beckui--colors-surface: var(--beckui--colors-white);
+    --beckui--colors-danger: oklch(0.48 0.20 25);
+    --beckui--colors-accent: oklch(0.38 0.14 125)
 }
 
   @keyframes ping {
@@ -1007,8 +1010,8 @@
   .beckui--button--visual_outline {
     border-width: 2px;
     border-style: solid;
-    border-color: var(--beckui--colors-secondary);
-    color: var(--beckui--colors-secondary);
+    border-color: var(--beckui--colors-accent);
+    color: var(--beckui--colors-accent);
     background-color: var(--beckui--colors-transparent);
 }
 
@@ -1043,7 +1046,7 @@
 
   .beckui--button--visual_primary {
     background-color: var(--beckui--colors-primary);
-    color: var(--beckui--colors-neutral-50);
+    color: var(--beckui--colors-neutral-900);
 }
 
   .beckui--button--visual_primary:is(:hover, [data-hover]) {
@@ -1051,12 +1054,13 @@
 }
 
   .beckui--button--visual_neutral {
-    background-color: var(--beckui--colors-neutral-600);
-    color: var(--beckui--colors-text);
+    background-color: var(--beckui--colors-neutral-800);
+    color: var(--beckui--colors-neutral-50);
 }
 
   [data-theme='light'] .beckui--button--visual_neutral {
     background-color: var(--beckui--colors-neutral-200);
+    color: var(--beckui--colors-neutral-900);
 }
 
   [data-theme='light'] .beckui--button--visual_neutral:is(:hover, [data-hover]) {
@@ -1064,11 +1068,11 @@
 }
 
   .beckui--button--visual_neutral:is(:hover, [data-hover]) {
-    background-color: var(--beckui--colors-neutral-500);
+    background-color: var(--beckui--colors-neutral-700);
 }
 
   .beckui--button--visual_secondary {
-    color: var(--beckui--colors-neutral-50);
+    color: var(--beckui--colors-neutral-900);
 }
 
   .beckui--button--visual_secondary,.beckui--button--visual_secondary:is(:hover, [data-hover]) {
@@ -1403,9 +1407,12 @@
 }
 
     .beckui--checkbox__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + * {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.6 11.2 12.5 4.8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+    .beckui--checkbox__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + *,[data-theme='light'] .beckui--checkbox__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + * {
       border-color: var(--beckui--colors-primary);
       background-color: var(--beckui--colors-primary);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.6 11.2 12.5 4.8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
     .beckui--checkbox__control:is(:focus-visible, [data-focus-visible]) + * {
@@ -1499,12 +1506,15 @@
 }
 
     .beckui--radio__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + * {
+      background-image: radial-gradient(circle, var(--beckui--colors-white) 32%, transparent 34%);
+}
+
+    .beckui--radio__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + *,[data-theme='light'] .beckui--radio__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) + * {
       border-color: var(--beckui--colors-primary);
       background-color: var(--beckui--colors-primary);
-      background-image: radial-gradient(circle, var(--beckui--colors-white) 32%, transparent 34%);
 }
 
-    .beckui--radio__control:is(:invalid, [data-invalid], [aria-invalid=true]) + * {
+    .beckui--radio__control:is(:invalid, [data-invalid], [aria-invalid=true]) + *,[data-theme='light'] .beckui--radio__control:is(:invalid, [data-invalid], [aria-invalid=true]) + * {
       border-color: var(--beckui--colors-danger);
 }
 
@@ -2309,20 +2319,12 @@
     padding: var(--beckui--spacing-md);
 }
 
-  .beckui--bg_neutral\.500 {
-    background: var(--beckui--colors-neutral-500);
-}
-
   .beckui--p_2 {
     padding: var(--beckui--spacing-2);
 }
 
-  .beckui--bg_neutral\.600 {
-    background: var(--beckui--colors-neutral-600);
-}
-
-  .beckui--bg_neutral\.700 {
-    background: var(--beckui--colors-neutral-700);
+  .beckui--bg_neutral\.800 {
+    background: var(--beckui--colors-neutral-800);
 }
 
   .beckui--bd-w_0px {
@@ -2450,8 +2452,8 @@
     background-size: 100% 100%;
 }
 
-  .beckui--c_neutral\.50 {
-    color: var(--beckui--colors-neutral-50);
+  .beckui--c_neutral\.900 {
+    color: var(--beckui--colors-neutral-900);
 }
 
   .beckui--bg-i_\{gradients\.secondary\} {
@@ -2462,10 +2464,6 @@
     background-image: var(--beckui--gradients-neutral);
 }
 
-  .beckui--c_text {
-    color: var(--beckui--colors-text);
-}
-
   .beckui--bg-i_linear-gradient\(\{colors\.background\}\,_\{colors\.background\}\)\,_\{gradients\.primary\} {
     background-image: linear-gradient(var(--beckui--colors-background), var(--beckui--colors-background)), var(--beckui--gradients-primary);
 }
@@ -2475,8 +2473,8 @@
     -webkit-background-clip: padding-box, border-box;
 }
 
-  .beckui--c_secondary {
-    color: var(--beckui--colors-secondary);
+  .beckui--c_accent {
+    color: var(--beckui--colors-accent);
 }
 
   .beckui--content_Short_glossary_hint\. {
@@ -2499,16 +2497,16 @@
     background-image: var(--mav-label-gradient, var(--beckui--gradients-primary));
 }
 
-  .beckui--c_var\(--mav-label-color\,_\{colors\.text\}\) {
-    color: var(--mav-label-color, var(--beckui--colors-text));
+  .beckui--c_var\(--mav-label-color\,_\{colors\.neutral\.900\}\) {
+    color: var(--mav-label-color, var(--beckui--colors-neutral-900));
 }
 
   .beckui--bg-i_linear-gradient\(\{colors\.background\}\,_\{colors\.background\}\)\,_var\(--mav-label-gradient\,_\{gradients\.primary\}\) {
     background-image: linear-gradient(var(--beckui--colors-background), var(--beckui--colors-background)), var(--mav-label-gradient, var(--beckui--gradients-primary));
 }
 
-  .beckui--c_var\(--mav-label-color\,_\{colors\.secondary\}\) {
-    color: var(--mav-label-color, var(--beckui--colors-secondary));
+  .beckui--c_var\(--mav-label-color\,_\{colors\.accent\}\) {
+    color: var(--mav-label-color, var(--beckui--colors-accent));
 }
 
   .beckui--tt_uppercase {
@@ -2523,6 +2521,14 @@
     align-items: start;
 }
 
+  .beckui--fs_sm {
+    font-size: var(--beckui--font-sizes-sm);
+}
+
+  .beckui--c_muted {
+    color: var(--beckui--colors-muted);
+}
+
   .beckui--fs_xs {
     font-size: var(--beckui--font-sizes-xs);
 }
@@ -2616,10 +2622,6 @@
     transform: translateX(1.5rem);
 }
 
-  .beckui--fs_sm {
-    font-size: var(--beckui--font-sizes-sm);
-}
-
   .beckui--fs_md {
     font-size: var(--beckui--font-sizes-md);
 }
@@ -2640,6 +2642,10 @@
     content: Hint;
 }
 
+  .beckui--c_neutral\.50 {
+    color: var(--beckui--colors-neutral-50);
+}
+
   .beckui--jc_start {
     justify-content: start;
 }
@@ -2730,34 +2736,14 @@
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
-  .beckui--min-w_13 {
-    min-width: var(--beckui--sizes-13);
-}
-
-  .beckui--h_8 {
-    height: var(--beckui--sizes-8);
-}
-
-  .beckui--h_13 {
-    height: var(--beckui--sizes-13);
-}
-
-  .beckui--h_21 {
-    height: var(--beckui--sizes-21);
+  .beckui--max-w_34 {
+    max-width: var(--beckui--sizes-34);
 }
 
   .beckui--h_34 {
     height: var(--beckui--sizes-34);
 }
 
-  .beckui--w_21 {
-    width: var(--beckui--sizes-21);
-}
-
-  .beckui--max-w_34 {
-    max-width: var(--beckui--sizes-34);
-}
-
   .beckui--w_8 {
     width: var(--beckui--sizes-8);
 }
@@ -2778,8 +2764,24 @@
     max-width: var(--beckui--sizes-55);
 }
 
-  [data-theme='light'] .light\:beckui--bg_var\(--mav-label-bg\,_\{colors\.neutral\.100\}\) {
-    background: var(--mav-label-bg, var(--beckui--colors-neutral-100));
+  .beckui--min-w_13 {
+    min-width: var(--beckui--sizes-13);
+}
+
+  .beckui--h_8 {
+    height: var(--beckui--sizes-8);
+}
+
+  .beckui--h_13 {
+    height: var(--beckui--sizes-13);
+}
+
+  .beckui--h_21 {
+    height: var(--beckui--sizes-21);
+}
+
+  .beckui--w_21 {
+    width: var(--beckui--sizes-21);
 }
 
   .\[\&_\>_\*\]\:beckui--min-w_0 > * {

package/styled-system/tokens/index.mjs

@@ -1159,16 +1159,12 @@ 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)",
+    "value": "oklch(0.72 0.16 42)",
     "variable": "var(--beckui--colors-warning)"
   },
   "colors.success": {
-    "value": "oklch(0.68 0.16 145)",
+    "value": "oklch(0.68 0.14 165)",
     "variable": "var(--beckui--colors-success)"
   },
   "colors.lightBackground": {
@@ -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,10 +32,11 @@
   /* --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); */
-  /* --beckui--colors-warning: oklch(0.78 0.14 95); */
-  /* --beckui--colors-success: oklch(0.68 0.16 145); */
+  /* 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.72 0.16 42); */
+  /* --beckui--colors-success: oklch(0.68 0.14 165); */
 
   /* Type + layout spacing (Stack gap). Do not use these to densify buttons. */
   /* --beckui--fonts-sans: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; */
@@ -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); */
 }