@visio-io/design-system 1.7.0 → 1.8.1

package/src/styles/tokens/css-variables.scss

@@ -1,190 +1,190 @@
-:root {
-  --Secondary-Secondary-Container: #E5FF4B;
-  --Secondary-On-Secondary-Container: #101111;
-  
-  --Surface-Surface-Container-Dark: #2F3131;
-  --Surface-On-Surface-Dark: #FAF9F9;
-  
-  --Surface-Surface-Container-Light: #EDEDED;
-  --Surface-On-Surface-Light: #101111;
-
-  --Surface-Surface-Container-High-Dark: #3B3B3C;
-  --Surface-Surface-Container-High-Light: #E9E8E8;
-
-  --Surface-Surface-Container-Lowest-Dark: #070808;
-  --Surface-Surface-Container-Lowest-Light: #F5F5F5;
-
-  --Surface-Surface-Container-Low-Dark: #1A1C1C;
-  --Surface-Surface-Container-Low-Light: #F1F1F1;
-
-  --Corner-Large: 16px;
-
-  --Surface-On-Surface-Variant-Dark: #ABABAB;
-  --Surface-On-Surface-Variant-Light: #3B3B3C;
-  
-  --Others-Outline-Variant-Dark: #777;
-  --Others-Outline-Variant-Light: #ABABAB;
-  
-  --Others-Outline-Dark: #525253;
-  --Others-Outline-Light: #C7C6C6;
-  
-  --Static-Label-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Label-Large-Size: 14px;
-  --Static-Label-Large-Line-Height: 20px;
-  --Static-Label-Large-Tracking: 0.1px;
-
-  --Static-Label-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Label-Medium-Size: 12px;
-  --Static-Label-Medium-Line-Height: 16px;
-  --Static-Label-Medium-Tracking: 0.5px;
-
-  --Static-Body-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Body-Small-Size: 12px;
-  --Static-Body-Small-Line-Height: 16px;
-  --Static-Body-Small-Tracking: 0.4px;
-
-  --Static-Body-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Body-Large-Size: 16px;
-  --Static-Body-Large-Weight: 400;
-  --Static-Body-Large-Line-Height: 24px;
-  --Static-Body-Large-Tracking: 0.5px;
-  
-  --Static-Body-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Body-Medium-Size: 16px;
-  --Static-Body-Medium-Weight: 400;
-  --Static-Body-Medium-Line-Height: 20px;
-  --Static-Body-Medium-Tracking: 0.25px;
-  
-  --Static-Headline-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
-  --Static-Headline-Small-Size: 24px;
-  --Static-Headline-Small-Weight: 400;
-  --Static-Headline-Small-Line-Height: 32px;
-  --Static-Headline-Small-Tracking: 0;
-  
-  --Primary-Primary-Dark: #DEDDDD;
-  --Primary-Primary-Light: #101111;
-  --Primary-On-Primary-Dark: #101111;
-  --Primary-On-Primary-Light: #FDFCFC;
-  
-  --Grays-Gray: #8E8E93;
-  
-  --Spacing-Gap-Segments: 2px;
-  --Spacing-Gap-Internal: 4px;
-  --Spacing-Padding-Horizontal: 12px;
-  --Spacing-Padding-Vertical: 6px;
-  
-  --Radius-Selected: 24px;
-  --Radius-Unselected: 4px;
-  --Radius-Full: 100px;
-  
-  --Icon-Size: 20px;
-  --Segment-Min-Width: 48px;
-
-  --Motion-Transition-Fast: 150ms;
-  --Motion-Click-Fast: 200ms;
-
-  --Component-SearchBar-Height: 56px;
-  --Component-SearchBar-Max-Width: 720px;
-  --Component-SearchBar-Radius: 28px;
-  --Component-SearchBar-Padding: 8px;
-  --Component-SearchBar-Gap: 4px;
-  --Component-SearchBar-Action-Size: 40px;
-  --Component-SearchBar-Icon-Size: 24px;
-
-  --Component-FilterButton-Height: 56px;
-  --Component-FilterButton-Padding-Vertical: 16px;
-  --Component-FilterButton-Padding-Horizontal: 24px;
-  --Component-FilterButton-Radius: 50px;
-  --Component-FilterButton-Border-Color-Light: #E1BEE7;
-  --Component-FilterButton-Border-Color-Dark: #CE93D8;
-  --Component-FilterButton-Border-Color-Hover-Light: #CE93D8;
-  --Component-FilterButton-Border-Color-Hover-Dark: #BA68C8;
-  --Component-FilterButton-Background-Light: #FFFFFF;
-  --Component-FilterButton-Background-Dark: #1E1E1E;
-  --Component-FilterButton-Background-Hover-Light: #FFFFFF;
-  --Component-FilterButton-Background-Hover-Dark: #2C2C2E;
-  --Component-FilterButton-Text-Color-Light: #49454F;
-  --Component-FilterButton-Text-Color-Dark: rgba(255, 255, 255, 0.87);
-  --Component-FilterButton-Shadow-Normal-Light: 0px 1px 3px rgba(0, 0, 0, 0.1);
-  --Component-FilterButton-Shadow-Normal-Dark: 0px 1px 3px rgba(0, 0, 0, 0.3);
-  --Component-FilterButton-Shadow-Hover-Light: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  --Component-FilterButton-Shadow-Hover-Dark: 0px 2px 4px rgba(0, 0, 0, 0.4);
-  --Component-FilterButton-Shadow-Active-Light: 0px 1px 2px rgba(0, 0, 0, 0.1);
-  --Component-FilterButton-Shadow-Active-Dark: 0px 1px 2px rgba(0, 0, 0, 0.3);
-
-  --Component-FilterModal-Radius: 28px;
-  --Component-FilterModal-Padding: 24px;
-  --Component-FilterModal-Padding-Bottom: 20px;
-  --Component-FilterModal-Shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
-  --Component-FilterModal-Header-Gap: 16px;
-  --Component-FilterModal-Content-Gap: 24px;
-  --Component-FilterModal-Content-Margin-Top: 16px;
-  --Component-FilterModal-Content-Margin-Bottom: 32px;
-  --Component-FilterModal-Footer-Gap: 8px;
-  --Component-FilterModal-Button-Height: 48px;
-  --Component-FilterModal-Button-Padding: 10px 16px;
-  --Component-FilterModal-Expandable-Icon-Size: 40px;
-
-  // VideoTimeline
-  --Component-VideoTimeline-Background-Light: #FFFFFF;
-  --Component-VideoTimeline-Background-Dark: #1E1E1E;
-  --Component-VideoTimeline-Border-Color-Light: rgba(0, 0, 0, 0.16);
-  --Component-VideoTimeline-Border-Color-Dark: rgba(255, 255, 255, 0.16);
-  --Component-VideoTimeline-Shadow-Light: 0px 4px 5.3px 0px rgba(0, 0, 0, 0.16);
-  --Component-VideoTimeline-Shadow-Dark: none;
-  --Component-VideoTimeline-Outline-Text-Light: #79747e;
-  --Component-VideoTimeline-Outline-Text-Dark: rgba(255, 255, 255, 0.7);
-  --Component-VideoTimeline-Tick-Color-Light: rgba(0, 0, 0, 0.45);
-  --Component-VideoTimeline-Tick-Color-Dark: rgba(255, 255, 255, 0.5);
-  --Component-VideoTimeline-Label-Color-Light: #2c2c2c;
-  --Component-VideoTimeline-Label-Color-Dark: rgba(255, 255, 255, 0.85);
-  --Component-VideoTimeline-Segment-Color-Light: #4DB6AC;
-  --Component-VideoTimeline-Segment-Color-Dark: #4DB6AC;
-  --Component-VideoTimeline-Segment-Hover-Light: #26A69A;
-  --Component-VideoTimeline-Segment-Hover-Dark: #26A69A;
-  --Component-VideoTimeline-Event-Bg-Light: #FFFFFF;
-  --Component-VideoTimeline-Event-Bg-Dark: #2F3131;
-  --Component-VideoTimeline-Event-Border-Light: rgba(0, 0, 0, 0.2);
-  --Component-VideoTimeline-Event-Border-Dark: rgba(255, 255, 255, 0.2);
-  --Component-VideoTimeline-Selection-Color-Light: rgba(25, 118, 210, 0.12);
-  --Component-VideoTimeline-Selection-Color-Dark: rgba(144, 202, 249, 0.12);
-  --Component-VideoTimeline-Playhead-Color-Light: #1a1c1e;
-  --Component-VideoTimeline-Playhead-Color-Dark: #e2e2e6;
-  --Component-VideoTimeline-IconButton-Border-Light: rgba(0, 0, 0, 0.22);
-  --Component-VideoTimeline-IconButton-Border-Dark: rgba(255, 255, 255, 0.22);
-  --Component-VideoTimeline-Track-Border-Light: rgba(0, 0, 0, 0.1);
-  --Component-VideoTimeline-Track-Border-Dark: rgba(255, 255, 255, 0.1);
-  --Component-VideoTimeline-Radius: 12px;
-  --Component-VideoTimeline-Header-Button-Height: 32px;
-  --Component-VideoTimeline-Header-Button-Radius: 999px;
-
-  // VideoPlayer
-  --Component-VideoPlayer-Background-Light: #f0f0f0;
-  --Component-VideoPlayer-Background-Dark: #1E1E1E;
-  --Component-VideoPlayer-Border-Light: rgba(0, 0, 0, 0.12);
-  --Component-VideoPlayer-Border-Dark: transparent;
-  --Component-VideoPlayer-Radius: 12px;
-  --Component-VideoPlayer-Control-Bg-Light: rgba(0, 0, 0, 0.08);
-  --Component-VideoPlayer-Control-Bg-Dark: rgba(255, 255, 255, 0.15);
-  --Component-VideoPlayer-Control-Hover-Light: rgba(0, 0, 0, 0.15);
-  --Component-VideoPlayer-Control-Hover-Dark: rgba(255, 255, 255, 0.25);
-  --Component-VideoPlayer-Control-Color-Light: #1a1c1e;
-  --Component-VideoPlayer-Control-Color-Dark: #ffffff;
-  --Component-VideoPlayer-Badge-Active-Bg-Light: rgba(0, 0, 0, 0.85);
-  --Component-VideoPlayer-Badge-Active-Bg-Dark: rgba(255, 255, 255, 0.9);
-  --Component-VideoPlayer-Badge-Active-Color-Light: #ffffff;
-  --Component-VideoPlayer-Badge-Active-Color-Dark: #000000;
-  --Component-VideoPlayer-Badge-Inactive-Bg-Light: rgba(0, 0, 0, 0.08);
-  --Component-VideoPlayer-Badge-Inactive-Bg-Dark: rgba(255, 255, 255, 0.15);
-  --Component-VideoPlayer-Badge-Inactive-Color-Light: rgba(0, 0, 0, 0.6);
-  --Component-VideoPlayer-Badge-Inactive-Color-Dark: rgba(255, 255, 255, 0.7);
-  --Component-VideoPlayer-Slider-Color-Light: #1a1c1e;
-  --Component-VideoPlayer-Slider-Color-Dark: #ffffff;
-  --Component-VideoPlayer-Slider-Rail-Light: rgba(0, 0, 0, 0.2);
-  --Component-VideoPlayer-Slider-Rail-Dark: rgba(255, 255, 255, 0.3);
-  --Component-VideoPlayer-Timestamp-Color-Light: #1a1c1e;
-  --Component-VideoPlayer-Timestamp-Color-Dark: #ffffff;
-  --Component-VideoPlayer-Recording-Bg: #c62828;
-  --Component-VideoPlayer-Recording-Color: #ffffff;
-}
-
+:root {
+  --Secondary-Secondary-Container: #E5FF4B;
+  --Secondary-On-Secondary-Container: #101111;
+  
+  --Surface-Surface-Container-Dark: #2F3131;
+  --Surface-On-Surface-Dark: #FAF9F9;
+  
+  --Surface-Surface-Container-Light: #EDEDED;
+  --Surface-On-Surface-Light: #101111;
+
+  --Surface-Surface-Container-High-Dark: #3B3B3C;
+  --Surface-Surface-Container-High-Light: #E9E8E8;
+
+  --Surface-Surface-Container-Lowest-Dark: #070808;
+  --Surface-Surface-Container-Lowest-Light: #F5F5F5;
+
+  --Surface-Surface-Container-Low-Dark: #1A1C1C;
+  --Surface-Surface-Container-Low-Light: #F1F1F1;
+
+  --Corner-Large: 16px;
+
+  --Surface-On-Surface-Variant-Dark: #ABABAB;
+  --Surface-On-Surface-Variant-Light: #3B3B3C;
+  
+  --Others-Outline-Variant-Dark: #777;
+  --Others-Outline-Variant-Light: #ABABAB;
+  
+  --Others-Outline-Dark: #525253;
+  --Others-Outline-Light: #C7C6C6;
+  
+  --Static-Label-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Label-Large-Size: 14px;
+  --Static-Label-Large-Line-Height: 20px;
+  --Static-Label-Large-Tracking: 0.1px;
+
+  --Static-Label-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Label-Medium-Size: 12px;
+  --Static-Label-Medium-Line-Height: 16px;
+  --Static-Label-Medium-Tracking: 0.5px;
+
+  --Static-Body-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Body-Small-Size: 12px;
+  --Static-Body-Small-Line-Height: 16px;
+  --Static-Body-Small-Tracking: 0.4px;
+
+  --Static-Body-Large-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Body-Large-Size: 16px;
+  --Static-Body-Large-Weight: 400;
+  --Static-Body-Large-Line-Height: 24px;
+  --Static-Body-Large-Tracking: 0.5px;
+  
+  --Static-Body-Medium-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Body-Medium-Size: 16px;
+  --Static-Body-Medium-Weight: 400;
+  --Static-Body-Medium-Line-Height: 20px;
+  --Static-Body-Medium-Tracking: 0.25px;
+  
+  --Static-Headline-Small-Font: "Suisse Intl", "Inter", "Helvetica", "Arial", sans-serif;
+  --Static-Headline-Small-Size: 24px;
+  --Static-Headline-Small-Weight: 400;
+  --Static-Headline-Small-Line-Height: 32px;
+  --Static-Headline-Small-Tracking: 0;
+  
+  --Primary-Primary-Dark: #DEDDDD;
+  --Primary-Primary-Light: #101111;
+  --Primary-On-Primary-Dark: #101111;
+  --Primary-On-Primary-Light: #FDFCFC;
+  
+  --Grays-Gray: #8E8E93;
+  
+  --Spacing-Gap-Segments: 2px;
+  --Spacing-Gap-Internal: 4px;
+  --Spacing-Padding-Horizontal: 12px;
+  --Spacing-Padding-Vertical: 6px;
+  
+  --Radius-Selected: 24px;
+  --Radius-Unselected: 4px;
+  --Radius-Full: 100px;
+  
+  --Icon-Size: 20px;
+  --Segment-Min-Width: 48px;
+
+  --Motion-Transition-Fast: 150ms;
+  --Motion-Click-Fast: 200ms;
+
+  --Component-SearchBar-Height: 56px;
+  --Component-SearchBar-Max-Width: 720px;
+  --Component-SearchBar-Radius: 28px;
+  --Component-SearchBar-Padding: 8px;
+  --Component-SearchBar-Gap: 4px;
+  --Component-SearchBar-Action-Size: 40px;
+  --Component-SearchBar-Icon-Size: 24px;
+
+  --Component-FilterButton-Height: 56px;
+  --Component-FilterButton-Padding-Vertical: 16px;
+  --Component-FilterButton-Padding-Horizontal: 24px;
+  --Component-FilterButton-Radius: 50px;
+  --Component-FilterButton-Border-Color-Light: #E1BEE7;
+  --Component-FilterButton-Border-Color-Dark: #CE93D8;
+  --Component-FilterButton-Border-Color-Hover-Light: #CE93D8;
+  --Component-FilterButton-Border-Color-Hover-Dark: #BA68C8;
+  --Component-FilterButton-Background-Light: #FFFFFF;
+  --Component-FilterButton-Background-Dark: #1E1E1E;
+  --Component-FilterButton-Background-Hover-Light: #FFFFFF;
+  --Component-FilterButton-Background-Hover-Dark: #2C2C2E;
+  --Component-FilterButton-Text-Color-Light: #49454F;
+  --Component-FilterButton-Text-Color-Dark: rgba(255, 255, 255, 0.87);
+  --Component-FilterButton-Shadow-Normal-Light: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  --Component-FilterButton-Shadow-Normal-Dark: 0px 1px 3px rgba(0, 0, 0, 0.3);
+  --Component-FilterButton-Shadow-Hover-Light: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  --Component-FilterButton-Shadow-Hover-Dark: 0px 2px 4px rgba(0, 0, 0, 0.4);
+  --Component-FilterButton-Shadow-Active-Light: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  --Component-FilterButton-Shadow-Active-Dark: 0px 1px 2px rgba(0, 0, 0, 0.3);
+
+  --Component-FilterModal-Radius: 28px;
+  --Component-FilterModal-Padding: 24px;
+  --Component-FilterModal-Padding-Bottom: 20px;
+  --Component-FilterModal-Shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
+  --Component-FilterModal-Header-Gap: 16px;
+  --Component-FilterModal-Content-Gap: 24px;
+  --Component-FilterModal-Content-Margin-Top: 16px;
+  --Component-FilterModal-Content-Margin-Bottom: 32px;
+  --Component-FilterModal-Footer-Gap: 8px;
+  --Component-FilterModal-Button-Height: 48px;
+  --Component-FilterModal-Button-Padding: 10px 16px;
+  --Component-FilterModal-Expandable-Icon-Size: 40px;
+
+  // VideoTimeline
+  --Component-VideoTimeline-Background-Light: #FFFFFF;
+  --Component-VideoTimeline-Background-Dark: #1E1E1E;
+  --Component-VideoTimeline-Border-Color-Light: rgba(0, 0, 0, 0.16);
+  --Component-VideoTimeline-Border-Color-Dark: rgba(255, 255, 255, 0.16);
+  --Component-VideoTimeline-Shadow-Light: 0px 4px 5.3px 0px rgba(0, 0, 0, 0.16);
+  --Component-VideoTimeline-Shadow-Dark: none;
+  --Component-VideoTimeline-Outline-Text-Light: #79747e;
+  --Component-VideoTimeline-Outline-Text-Dark: rgba(255, 255, 255, 0.7);
+  --Component-VideoTimeline-Tick-Color-Light: rgba(0, 0, 0, 0.45);
+  --Component-VideoTimeline-Tick-Color-Dark: rgba(255, 255, 255, 0.5);
+  --Component-VideoTimeline-Label-Color-Light: #2c2c2c;
+  --Component-VideoTimeline-Label-Color-Dark: rgba(255, 255, 255, 0.85);
+  --Component-VideoTimeline-Segment-Color-Light: #4DB6AC;
+  --Component-VideoTimeline-Segment-Color-Dark: #4DB6AC;
+  --Component-VideoTimeline-Segment-Hover-Light: #26A69A;
+  --Component-VideoTimeline-Segment-Hover-Dark: #26A69A;
+  --Component-VideoTimeline-Event-Bg-Light: #FFFFFF;
+  --Component-VideoTimeline-Event-Bg-Dark: #2F3131;
+  --Component-VideoTimeline-Event-Border-Light: rgba(0, 0, 0, 0.2);
+  --Component-VideoTimeline-Event-Border-Dark: rgba(255, 255, 255, 0.2);
+  --Component-VideoTimeline-Selection-Color-Light: rgba(25, 118, 210, 0.12);
+  --Component-VideoTimeline-Selection-Color-Dark: rgba(144, 202, 249, 0.12);
+  --Component-VideoTimeline-Playhead-Color-Light: #1a1c1e;
+  --Component-VideoTimeline-Playhead-Color-Dark: #e2e2e6;
+  --Component-VideoTimeline-IconButton-Border-Light: rgba(0, 0, 0, 0.22);
+  --Component-VideoTimeline-IconButton-Border-Dark: rgba(255, 255, 255, 0.22);
+  --Component-VideoTimeline-Track-Border-Light: rgba(0, 0, 0, 0.1);
+  --Component-VideoTimeline-Track-Border-Dark: rgba(255, 255, 255, 0.1);
+  --Component-VideoTimeline-Radius: 12px;
+  --Component-VideoTimeline-Header-Button-Height: 32px;
+  --Component-VideoTimeline-Header-Button-Radius: 999px;
+
+  // VideoPlayer
+  --Component-VideoPlayer-Background-Light: #f0f0f0;
+  --Component-VideoPlayer-Background-Dark: #1E1E1E;
+  --Component-VideoPlayer-Border-Light: rgba(0, 0, 0, 0.12);
+  --Component-VideoPlayer-Border-Dark: transparent;
+  --Component-VideoPlayer-Radius: 12px;
+  --Component-VideoPlayer-Control-Bg-Light: rgba(0, 0, 0, 0.08);
+  --Component-VideoPlayer-Control-Bg-Dark: rgba(255, 255, 255, 0.15);
+  --Component-VideoPlayer-Control-Hover-Light: rgba(0, 0, 0, 0.15);
+  --Component-VideoPlayer-Control-Hover-Dark: rgba(255, 255, 255, 0.25);
+  --Component-VideoPlayer-Control-Color-Light: #1a1c1e;
+  --Component-VideoPlayer-Control-Color-Dark: #ffffff;
+  --Component-VideoPlayer-Badge-Active-Bg-Light: rgba(0, 0, 0, 0.85);
+  --Component-VideoPlayer-Badge-Active-Bg-Dark: rgba(255, 255, 255, 0.9);
+  --Component-VideoPlayer-Badge-Active-Color-Light: #ffffff;
+  --Component-VideoPlayer-Badge-Active-Color-Dark: #000000;
+  --Component-VideoPlayer-Badge-Inactive-Bg-Light: rgba(0, 0, 0, 0.08);
+  --Component-VideoPlayer-Badge-Inactive-Bg-Dark: rgba(255, 255, 255, 0.15);
+  --Component-VideoPlayer-Badge-Inactive-Color-Light: rgba(0, 0, 0, 0.6);
+  --Component-VideoPlayer-Badge-Inactive-Color-Dark: rgba(255, 255, 255, 0.7);
+  --Component-VideoPlayer-Slider-Color-Light: #1a1c1e;
+  --Component-VideoPlayer-Slider-Color-Dark: #ffffff;
+  --Component-VideoPlayer-Slider-Rail-Light: rgba(0, 0, 0, 0.2);
+  --Component-VideoPlayer-Slider-Rail-Dark: rgba(255, 255, 255, 0.3);
+  --Component-VideoPlayer-Timestamp-Color-Light: #1a1c1e;
+  --Component-VideoPlayer-Timestamp-Color-Dark: #ffffff;
+  --Component-VideoPlayer-Recording-Bg: #c62828;
+  --Component-VideoPlayer-Recording-Color: #ffffff;
+}
+

package/src/styles/tokens/index.ts

@@ -1,4 +1,4 @@
-export { lightColors, darkColors } from "./colors";
-export { typographyTokens } from "./typography";
-export { spacingTokens } from "./spacing";
-export { radiiTokens } from "./radii";
+export { lightColors, darkColors } from "./colors";
+export { typographyTokens } from "./typography";
+export { spacingTokens } from "./spacing";
+export { radiiTokens } from "./radii";

package/src/styles/tokens/radii.ts

@@ -1,7 +1,7 @@
-export const radiiTokens = {
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  pill: 999,
-} as const;
+export const radiiTokens = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  pill: 999,
+} as const;

package/src/styles/tokens/spacing.ts

@@ -1,10 +1,10 @@
-export const spacingTokens = {
-  xxs: 2,
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-  xxl: 32,
-  xxxl: 64,
-} as const;
+export const spacingTokens = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+  xxxl: 64,
+} as const;

package/src/styles/tokens/typography.ts

@@ -1,22 +1,22 @@
-export const typographyTokens = {
-  fontFamily: '"Inter", "Helvetica", "Arial", sans-serif',
-  fontSize: {
-    xs: 12,
-    sm: 14,
-    md: 16,
-    lg: 18,
-    xl: 20,
-    xxl: 24,
-  },
-  fontWeight: {
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-  },
-  lineHeight: {
-    tight: 1.2,
-    normal: 1.5,
-    relaxed: 1.7,
-  },
-} as const;
+export const typographyTokens = {
+  fontFamily: '"Inter", "Helvetica", "Arial", sans-serif',
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    xxl: 24,
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.7,
+  },
+} as const;