@vellira-ui/tokens 2.44.4 → 2.45.0

package/dist/css/tokens.css

@@ -1295,6 +1295,31 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --radio-size-sm-control-size: 14px;
+  --radio-size-sm-indicator-size: 6px;
+  --radio-size-sm-label-font-size: 14px;
+  --radio-size-sm-label-line-height: 20px;
+  --radio-size-sm-description-font-size: 12px;
+  --radio-size-sm-description-line-height: 16px;
+  --radio-size-md-control-size: 16px;
+  --radio-size-md-indicator-size: 8px;
+  --radio-size-md-label-font-size: 16px;
+  --radio-size-md-label-line-height: 24px;
+  --radio-size-md-description-font-size: 14px;
+  --radio-size-md-description-line-height: 20px;
+  --radio-size-lg-control-size: 20px;
+  --radio-size-lg-indicator-size: 10px;
+  --radio-size-lg-label-font-size: 20px;
+  --radio-size-lg-label-line-height: 28px;
+  --radio-size-lg-description-font-size: 16px;
+  --radio-size-lg-description-line-height: 24px;
+  --radio-motion-control-duration: 150ms;
+  --radio-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --radio-motion-indicator-duration: 180ms;
+  --radio-motion-selected-duration: 260ms;
+  --radio-motion-pressed-scale: 0.96px;
+  --radio-motion-active-scale: 0.92px;
+  --radio-motion-pressed-opacity: 0.8px;
   --radio-default-bg: #FFFFFF;
   --radio-default-fg: #3D3754;
   --radio-default-border: #BBB2D2;
@@ -3504,6 +3529,31 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --radio-size-sm-control-size: 14px;
+  --radio-size-sm-indicator-size: 6px;
+  --radio-size-sm-label-font-size: 14px;
+  --radio-size-sm-label-line-height: 20px;
+  --radio-size-sm-description-font-size: 12px;
+  --radio-size-sm-description-line-height: 16px;
+  --radio-size-md-control-size: 16px;
+  --radio-size-md-indicator-size: 8px;
+  --radio-size-md-label-font-size: 16px;
+  --radio-size-md-label-line-height: 24px;
+  --radio-size-md-description-font-size: 14px;
+  --radio-size-md-description-line-height: 20px;
+  --radio-size-lg-control-size: 20px;
+  --radio-size-lg-indicator-size: 10px;
+  --radio-size-lg-label-font-size: 20px;
+  --radio-size-lg-label-line-height: 28px;
+  --radio-size-lg-description-font-size: 16px;
+  --radio-size-lg-description-line-height: 24px;
+  --radio-motion-control-duration: 150ms;
+  --radio-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --radio-motion-indicator-duration: 180ms;
+  --radio-motion-selected-duration: 260ms;
+  --radio-motion-pressed-scale: 0.96px;
+  --radio-motion-active-scale: 0.92px;
+  --radio-motion-pressed-opacity: 0.8px;
   --radio-default-bg: #2F2A42;
   --radio-default-fg: #F4F1FB;
   --radio-default-border: #4F4867;
@@ -5724,6 +5774,31 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --radio-size-sm-control-size: 14px;
+  --radio-size-sm-indicator-size: 6px;
+  --radio-size-sm-label-font-size: 14px;
+  --radio-size-sm-label-line-height: 20px;
+  --radio-size-sm-description-font-size: 12px;
+  --radio-size-sm-description-line-height: 16px;
+  --radio-size-md-control-size: 16px;
+  --radio-size-md-indicator-size: 8px;
+  --radio-size-md-label-font-size: 16px;
+  --radio-size-md-label-line-height: 24px;
+  --radio-size-md-description-font-size: 14px;
+  --radio-size-md-description-line-height: 20px;
+  --radio-size-lg-control-size: 20px;
+  --radio-size-lg-indicator-size: 10px;
+  --radio-size-lg-label-font-size: 20px;
+  --radio-size-lg-label-line-height: 28px;
+  --radio-size-lg-description-font-size: 16px;
+  --radio-size-lg-description-line-height: 24px;
+  --radio-motion-control-duration: 150ms;
+  --radio-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --radio-motion-indicator-duration: 180ms;
+  --radio-motion-selected-duration: 260ms;
+  --radio-motion-pressed-scale: 0.96px;
+  --radio-motion-active-scale: 0.92px;
+  --radio-motion-pressed-opacity: 0.8px;
   --radio-default-bg: #000000;
   --radio-default-fg: #FFFFFF;
   --radio-default-border: #9CA3AF;

package/dist/dark/components/radio.d.ts

@@ -1,4 +1,39 @@
 export declare const radio: {
+    readonly size: {
+        readonly sm: {
+            readonly controlSize: 14;
+            readonly indicatorSize: 6;
+            readonly labelFontSize: 14;
+            readonly labelLineHeight: 20;
+            readonly descriptionFontSize: 12;
+            readonly descriptionLineHeight: 16;
+        };
+        readonly md: {
+            readonly controlSize: 16;
+            readonly indicatorSize: 8;
+            readonly labelFontSize: 16;
+            readonly labelLineHeight: 24;
+            readonly descriptionFontSize: 14;
+            readonly descriptionLineHeight: 20;
+        };
+        readonly lg: {
+            readonly controlSize: 20;
+            readonly indicatorSize: 10;
+            readonly labelFontSize: 20;
+            readonly labelLineHeight: 28;
+            readonly descriptionFontSize: 16;
+            readonly descriptionLineHeight: 24;
+        };
+    };
+    readonly motion: {
+        readonly controlDuration: "150ms";
+        readonly easing: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly indicatorDuration: "180ms";
+        readonly selectedDuration: "260ms";
+        readonly pressedScale: 0.96;
+        readonly activeScale: 0.92;
+        readonly pressedOpacity: 0.8;
+    };
     readonly default: {
         readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";

package/dist/dark/components/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"AAsHA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCR,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"AA0HA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCR,CAAC"}

package/dist/dark/components/radio.js

@@ -1,4 +1,4 @@
-import { createRadioPalette } from '../../factories/createRadioPalette.js';
+import { createRadioPalette, radioMotionTokens, radioSizeTokens, } from '../../factories/createRadioPalette.js';
 import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
@@ -111,6 +111,8 @@ const danger = createRadioPalette({
     },
 });
 export const radio = {
+    size: radioSizeTokens,
+    motion: radioMotionTokens,
     default: control.default,
     hover: control.hover,
     pressed: control.active,

package/dist/factories/createRadioPalette.d.ts

@@ -16,4 +16,39 @@ export declare const createRadioPalette: ({ ring, default: defaultState, hover,
     readonly hover: RadioState;
     readonly pressed: RadioState;
 };
+export declare const radioSizeTokens: {
+    readonly sm: {
+        readonly controlSize: 14;
+        readonly indicatorSize: 6;
+        readonly labelFontSize: 14;
+        readonly labelLineHeight: 20;
+        readonly descriptionFontSize: 12;
+        readonly descriptionLineHeight: 16;
+    };
+    readonly md: {
+        readonly controlSize: 16;
+        readonly indicatorSize: 8;
+        readonly labelFontSize: 16;
+        readonly labelLineHeight: 24;
+        readonly descriptionFontSize: 14;
+        readonly descriptionLineHeight: 20;
+    };
+    readonly lg: {
+        readonly controlSize: 20;
+        readonly indicatorSize: 10;
+        readonly labelFontSize: 20;
+        readonly labelLineHeight: 28;
+        readonly descriptionFontSize: 16;
+        readonly descriptionLineHeight: 24;
+    };
+};
+export declare const radioMotionTokens: {
+    readonly controlDuration: "150ms";
+    readonly easing: "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly indicatorDuration: "180ms";
+    readonly selectedDuration: "260ms";
+    readonly pressedScale: 0.96;
+    readonly activeScale: 0.92;
+    readonly pressedOpacity: 0.8;
+};
 //# sourceMappingURL=createRadioPalette.d.ts.map

package/dist/factories/createRadioPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createRadioPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createRadioPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kDAKhC,kBAAkB;;;;;CAMR,CAAC"}
+{"version":3,"file":"createRadioPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createRadioPalette.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kDAKhC,kBAAkB;;;;;CAMR,CAAC;AAEd,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;;;;CAQpB,CAAC"}

package/dist/factories/createRadioPalette.js

@@ -1,6 +1,42 @@
+import { typography } from '../tokens/typography.js';
 export const createRadioPalette = ({ ring, default: defaultState, hover, pressed, }) => ({
     ring,
     default: defaultState,
     hover,
     pressed,
 });
+export const radioSizeTokens = {
+    sm: {
+        controlSize: 14,
+        indicatorSize: 6,
+        labelFontSize: typography.size.sm,
+        labelLineHeight: typography.lineHeight.sm,
+        descriptionFontSize: typography.size.xs,
+        descriptionLineHeight: typography.lineHeight.xs,
+    },
+    md: {
+        controlSize: 16,
+        indicatorSize: 8,
+        labelFontSize: typography.size.md,
+        labelLineHeight: typography.lineHeight.md,
+        descriptionFontSize: typography.size.sm,
+        descriptionLineHeight: typography.lineHeight.sm,
+    },
+    lg: {
+        controlSize: 20,
+        indicatorSize: 10,
+        labelFontSize: typography.size.lg,
+        labelLineHeight: typography.lineHeight.lg,
+        descriptionFontSize: typography.size.md,
+        descriptionLineHeight: typography.lineHeight.md,
+    },
+};
+export const radioMotionTokens = {
+    controlDuration: '150ms',
+    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    indicatorDuration: '180ms',
+    selectedDuration: '260ms',
+    pressedScale: 0.96,
+    activeScale: 0.92,
+    pressedOpacity: 0.8,
+};