@3dsource/source-ui-native 1.0.18 → 1.0.20

package/styles/variables/layout/_sm.scss

@@ -0,0 +1,85 @@
+/* layout - sm */
+:root {
+  @media (min-width: 640px) {
+    --src-layout-padding-const-xs: var(--src-space-1);
+    --src-layout-padding-const-sm: var(--src-space-2);
+    --src-layout-padding-const-md: var(--src-space-3);
+    --src-layout-padding-const-lg: var(--src-space-4);
+    --src-layout-padding-const-xl: var(--src-space-6);
+    --src-layout-padding-const-2xl: var(--src-space-8);
+    --src-layout-padding-var-xs: var(--src-space-1);
+    --src-layout-padding-table-sm: var(--src-space-1-5);
+    --src-layout-padding-var-sm: var(--src-space-2);
+    --src-layout-padding-var-md: var(--src-space-3);
+    --src-layout-padding-var-lg: var(--src-space-4);
+    --src-layout-padding-var-xl: var(--src-space-6);
+    --src-layout-padding-var-2xl: var(--src-space-8);
+    --src-layout-gap-const-none: 0px;
+    --src-layout-gap-const-xs: var(--src-space-1);
+    --src-layout-gap-const-sm: var(--src-space-2);
+    --src-layout-gap-const-md: var(--src-space-3);
+    --src-layout-gap-const-lg: var(--src-space-4);
+    --src-layout-gap-const-xl: var(--src-space-6);
+    --src-layout-gap-const-2xl: var(--src-space-8);
+    --src-layout-gap-var-none: 0px;
+    --src-layout-gap-var-sm: var(--src-space-1);
+    --src-layout-gap-var-md: var(--src-space-2);
+    --src-layout-gap-var-lg: var(--src-space-3);
+    --src-layout-gap-var-xl: var(--src-space-6);
+    --src-layout-height-const-sm: var(--src-space-7);
+    --src-layout-height-const-md: var(--src-space-8);
+    --src-layout-height-const-lg: var(--src-space-9);
+    --src-layout-height-const-h-xl: var(--src-space-10);
+    --src-layout-height-const-h-2xl: var(--src-space-16);
+    --src-layout-height-var-xs: var(--src-space-6);
+    --src-layout-height-var-sm: var(--src-space-8);
+    --src-layout-height-var-base: var(--src-space-16);
+    --src-layout-height-var-md: var(--src-space-14);
+    --src-layout-height-var-lg: var(--src-space-20);
+    --src-layout-height-var-xl: var(--src-space-32);
+    --src-layout-radius-var-rounded-kid: var(--src-space-1);
+    --src-layout-radius-var-rounded-parent: var(--src-space-2);
+    --src-layout-radius-rounded-none: 0px;
+    --src-layout-border-border: 1px;
+    --src-layout-table-height: var(--src-space-11);
+    --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
+    --src-layout-radius-const-rounded: var(--src-space-2);
+    --src-layout-radius-const-rounded-md: var(--src-space-3);
+    --src-layout-radius-const-rounded-lg: var(--src-space-4);
+    --src-layout-radius-const-rounded-xl: var(--src-space-6);
+    --src-layout-radius-const-rounded-2xl: var(--src-space-8);
+    --src-layout-radius-rounded-ui-full: 9999px;
+    --src-shadow-basic: var(--src-space-1);
+    --src-graphs-label: var(--src-space-2);
+    --src-graphs-label-var: var(--src-space-2);
+    --src-graphs-height-label-var: var(--src-space-5);
+    --src-graphs-height-label-const: var(--src-space-5);
+    --src-graphs-height-s: var(--src-space-7);
+    --screen-width: 640px;
+    --card-width: 216px;
+    --src-typography-var-p-sm-lineHeight: var(--src-font-line-xs);
+    --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
+    --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
+    --src-typography-var-p-md-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-md-lineHeight: var(--src-font-line-sm);
+    --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
+    --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-sm-lineHeight: var(--src-font-line-base);
+    --src-typography-var-h-md-fontSize: var(--src-font-size-md);
+    --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-md-lineHeight: var(--src-font-line-md);
+    --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
+    --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-lg-lineHeight: var(--src-font-line-lg);
+    --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
+    --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-xl-lineHeight: var(--src-font-line-3xl);
+    --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
+    --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-lg-lineHeight: var(--src-font-line-md);
+    // --price: String value;
+    // --price-data: String value;
+    --src-layout-table-height-2: var(--src-space-11);
+  }
+}

package/styles/variables/layout/_xl.scss

@@ -0,0 +1,85 @@
+/* layout - xl */
+:root {
+  @media (min-width: 1280px) {
+    --src-layout-padding-const-xs: var(--src-space-1);
+    --src-layout-padding-const-sm: var(--src-space-2);
+    --src-layout-padding-const-md: var(--src-space-3);
+    --src-layout-padding-const-lg: var(--src-space-4);
+    --src-layout-padding-const-xl: var(--src-space-6);
+    --src-layout-padding-const-2xl: var(--src-space-8);
+    --src-layout-padding-var-xs: var(--src-space-4);
+    --src-layout-padding-table-sm: var(--src-space-4);
+    --src-layout-padding-var-sm: var(--src-space-5);
+    --src-layout-padding-var-md: var(--src-space-6);
+    --src-layout-padding-var-lg: var(--src-space-8);
+    --src-layout-padding-var-xl: var(--src-space-12);
+    --src-layout-padding-var-2xl: var(--src-space-14);
+    --src-layout-gap-const-none: 0px;
+    --src-layout-gap-const-xs: var(--src-space-1);
+    --src-layout-gap-const-sm: var(--src-space-2);
+    --src-layout-gap-const-md: var(--src-space-3);
+    --src-layout-gap-const-lg: var(--src-space-4);
+    --src-layout-gap-const-xl: var(--src-space-6);
+    --src-layout-gap-const-2xl: var(--src-space-8);
+    --src-layout-gap-var-none: 0px;
+    --src-layout-gap-var-sm: var(--src-space-4);
+    --src-layout-gap-var-md: var(--src-space-5);
+    --src-layout-gap-var-lg: var(--src-space-6);
+    --src-layout-gap-var-xl: var(--src-space-20);
+    --src-layout-height-const-sm: var(--src-space-7);
+    --src-layout-height-const-md: var(--src-space-8);
+    --src-layout-height-const-lg: var(--src-space-9);
+    --src-layout-height-const-h-xl: var(--src-space-10);
+    --src-layout-height-const-h-2xl: var(--src-space-16);
+    --src-layout-height-var-xs: var(--src-space-12);
+    --src-layout-height-var-sm: var(--src-space-14);
+    --src-layout-height-var-base: var(--src-space-32);
+    --src-layout-height-var-md: var(--src-space-44);
+    --src-layout-height-var-lg: var(--src-space-32);
+    --src-layout-height-var-xl: var(--src-space-56);
+    --src-layout-radius-var-rounded-kid: var(--src-space-5);
+    --src-layout-radius-var-rounded-parent: var(--src-space-8);
+    --src-layout-radius-rounded-none: 0px;
+    --src-layout-border-border: 2px;
+    --src-layout-table-height: var(--src-space-24);
+    --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
+    --src-layout-radius-const-rounded: var(--src-space-2);
+    --src-layout-radius-const-rounded-md: var(--src-space-3);
+    --src-layout-radius-const-rounded-lg: var(--src-space-4);
+    --src-layout-radius-const-rounded-xl: var(--src-space-6);
+    --src-layout-radius-const-rounded-2xl: var(--src-space-8);
+    --src-layout-radius-rounded-ui-full: 9999px;
+    --src-shadow-basic: var(--src-space-3);
+    --src-graphs-label: var(--src-space-2);
+    --src-graphs-label-var: var(--src-space-3-5);
+    --src-graphs-height-label-var: var(--src-space-10);
+    --src-graphs-height-label-const: var(--src-spaces-20);
+    --src-graphs-height-s: var(--src-space-10);
+    --screen-width: 1280px;
+    --card-width: 480px;
+    --src-typography-var-p-sm-lineHeight: var(--src-font-line-xl);
+    --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
+    --src-typography-var-p-sm-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
+    --src-typography-var-p-md-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-p-md-lineHeight: var(--src-font-line-xl);
+    --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
+    --src-typography-var-h-sm-weight: var(--src-font-weight-bold);
+    --src-typography-var-h-sm-lineHeight: var(--src-font-line-2xl);
+    --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
+    --src-typography-var-h-md-weight: var(--src-font-weight-bold);
+    --src-typography-var-h-md-lineHeight: var(--src-font-line-3xl);
+    --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
+    --src-typography-var-h-lg-weight: var(--src-font-weight-bold);
+    --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
+    --src-typography-var-h-xl-fontSize: 64px;
+    --src-typography-var-h-xl-weight: var(--src-font-weight-bold);
+    --src-typography-var-h-xl-lineHeight: 64px;
+    --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
+    --src-typography-var-p-lg-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-p-lg-lineHeight: var(--src-font-line-3xl);
+    // --price: String value;
+    // --price-data: String value;
+    --src-layout-table-height-2: var(--src-space-24);
+  }
+}

package/styles/variables/primitives/primitives.scss

@@ -0,0 +1,147 @@
+/* primitives - Mode 1 */
+:root {
+  --src-space-0: 0px;
+  --src-space-px: 1px;
+  --src-space-0-5: 2px;
+  --src-space-1: 4px;
+  --src-space-1-5: 6px;
+  --src-space-2: 8px;
+  --src-space-2-5: 10px;
+  --src-space-3: 12px;
+  --src-space-3-5: 14px;
+  --src-space-4: 16px;
+  --src-space-5: 20px;
+  --src-space-6: 24px;
+  --src-space-7: 28px;
+  --src-space-8: 32px;
+  --src-space-9: 36px;
+  --src-space-10: 40px;
+  --src-space-11: 44px;
+  --src-space-12: 48px;
+  --src-space-14: 56px;
+  --src-space-16: 64px;
+  --src-space-20: 80px;
+  --src-space-24: 96px;
+  --src-space-28: 112px;
+  --src-space-32: 128px;
+  --src-space-36: 144px;
+  --src-space-40: 160px;
+  --src-space-44: 176px;
+  --src-space-48: 192px;
+  --src-space-52: 208px;
+  --src-space-56: 224px;
+  --src-space-60: 240px;
+  --src-space-64: 256px;
+  --src-space-72: 288px;
+  --src-space-80: 320px;
+  --src-space-96: 384px;
+  --src-color-neutral-50: rgba(250, 250, 250, 1);
+  --src-color-accent-50: rgba(241, 246, 255, 1);
+  --src-color-accent-100: rgba(214, 233, 255, 1);
+  --src-color-accent-200: rgba(173, 212, 255, 1);
+  --src-color-accent-300: rgba(125, 187, 255, 1);
+  --src-color-accent-400: rgba(78, 164, 255, 1);
+  --src-color-accent-500: rgba(1, 123, 255, 1);
+  --src-color-accent-600: rgba(1, 111, 230, 1);
+  --src-color-accent-700: rgba(1, 98, 204, 1);
+  --src-color-accent-800: rgba(1, 76, 163, 1);
+  --src-color-accent-900: rgba(0, 58, 122, 1);
+  --src-color-accent-950: rgba(0, 36, 77, 1);
+  --src-color-neutral-100: rgba(245, 245, 245, 1);
+  --src-color-neutral-200: rgba(229, 229, 229, 1);
+  --src-color-neutral-300: rgba(212, 212, 212, 1);
+  --src-color-neutral-400: rgba(163, 163, 163, 1);
+  --src-color-neutral-500: rgba(115, 115, 115, 1);
+  --src-color-neutral-600: rgba(82, 82, 82, 1);
+  --src-color-neutral-700: rgba(64, 64, 64, 1);
+  --src-color-neutral-800: rgba(38, 38, 38, 1);
+  --src-color-neutral-900: rgba(23, 23, 23, 1);
+  --src-color-neutral-950: rgba(10, 10, 10, 1);
+  --src-color-grey-50: rgba(249, 250, 251, 1);
+  --src-color-grey-100: rgba(243, 244, 246, 1);
+  --src-color-grey-200: rgba(229, 231, 235, 1);
+  --src-color-grey-300: rgba(209, 213, 219, 1);
+  --src-color-grey-400: rgba(156, 163, 175, 1);
+  --src-color-grey-500: rgba(107, 114, 128, 1);
+  --src-color-grey-600: rgba(75, 85, 99, 1);
+  --src-color-grey-700: rgba(55, 65, 81, 1);
+  --src-color-grey-800: rgba(31, 41, 55, 1);
+  --src-color-grey-900: rgba(17, 24, 39, 1);
+  --src-color-grey-950: rgba(3, 7, 18, 1);
+  --src-color-green-50: rgba(240, 253, 244, 1);
+  --src-color-green-100: rgba(220, 252, 231, 1);
+  --src-color-green-200: rgba(187, 247, 208, 1);
+  --src-color-green-300: rgba(134, 239, 172, 1);
+  --src-color-green-400: rgba(74, 222, 128, 1);
+  --src-color-green-500: rgba(34, 197, 94, 1);
+  --src-color-green-600: rgba(22, 163, 74, 1);
+  --src-color-green-700: rgba(21, 128, 61, 1);
+  --src-color-green-800: rgba(22, 101, 52, 1);
+  --src-color-green-900: rgba(20, 83, 45, 1);
+  --src-color-green-950: rgba(5, 46, 22, 1);
+  --src-color-red-50: rgba(254, 243, 241, 1);
+  --src-color-red-100: rgba(253, 226, 221, 1);
+  --src-color-red-200: rgba(251, 197, 188, 1);
+  --src-color-red-300: rgba(247, 148, 130, 1);
+  --src-color-red-400: rgba(245, 107, 82, 1);
+  --src-color-red-500: rgba(242, 65, 34, 1);
+  --src-color-red-600: rgba(197, 40, 12, 1);
+  --src-color-red-700: rgba(159, 32, 10, 1);
+  --src-color-red-800: rgba(115, 24, 7, 1);
+  --src-color-red-900: rgba(67, 14, 4, 1);
+  --src-color-red-950: rgba(69, 10, 10, 1);
+  --src-color-blue-50: rgba(240, 245, 253, 1);
+  --src-color-blue-100: rgba(232, 240, 253, 1);
+  --src-color-blue-200: rgba(187, 212, 247, 1);
+  --src-color-blue-300: rgba(147, 186, 241, 1);
+  --src-color-blue-400: rgba(102, 153, 225, 1);
+  --src-color-blue-500: rgba(62, 125, 213, 1);
+  --src-color-blue-600: rgba(36, 99, 188, 1);
+  --src-color-blue-700: rgba(20, 73, 149, 1);
+  --src-color-blue-800: rgba(14, 53, 108, 1);
+  --src-color-blue-900: rgba(16, 41, 76, 1);
+  --src-color-blue-950: rgba(5, 17, 35, 1);
+  --src-color-orange-50: rgba(255, 248, 230, 1);
+  --src-color-orange-100: rgba(254, 239, 197, 1);
+  --src-color-orange-200: rgba(253, 216, 141, 1);
+  --src-color-orange-300: rgba(252, 193, 93, 1);
+  --src-color-orange-400: rgba(248, 170, 53, 1);
+  --src-color-orange-500: rgba(245, 155, 24, 1);
+  --src-color-orange-600: rgba(245, 168, 15, 1);
+  --src-color-orange-700: rgba(217, 143, 12, 1);
+  --src-color-orange-800: rgba(184, 117, 10, 1);
+  --src-color-orange-900: rgba(114, 73, 9, 1);
+  --src-color-orange-950: rgba(67, 41, 3, 1);
+  --src-color-alpha-default-10: rgba(148, 163, 184, 0.08);
+  --src-color-alpha-default-50: rgba(148, 163, 184, 0.16);
+  --src-color-alpha-default-100: rgba(148, 163, 184, 0.24);
+  --src-color-alpha-default-200: rgba(71, 85, 105, 0.24);
+  --src-color-alpha-default-600: rgba(71, 85, 105, 0.64);
+  --src-color-alpha-white-10: rgba(255, 255, 255, 0.04);
+  --src-color-alpha-white-50: rgba(255, 255, 255, 0.12);
+  --src-color-alpha-white-100: rgba(255, 255, 255, 0.16);
+  --src-color-alpha-dark-10: rgba(0, 0, 0, 0.04);
+  --src-color-alpha-dark-50: rgba(0, 0, 0, 0.08);
+  --src-color-alpha-dark-100: rgba(0, 0, 0, 0.16);
+  --src-color-alpha-dark-200: rgba(0, 0, 0, 0.24);
+  --src-color-alpha-dark-600: rgba(0, 0, 0, 0.64);
+  --src-color-alpha-test-10: rgba(148, 163, 184, 0.08);
+  --src-color-alpha-test-50: rgba(148, 163, 184, 0.16);
+  --src-color-alpha-test-100: rgba(148, 163, 184, 0.24);
+  --src-color-alpha-test-200: rgba(71, 85, 105, 0.24);
+  --src-color-alpha-test-600: rgba(71, 85, 105, 0.64);
+  --src-color-alpha-accent-10: rgba(1, 123, 255, 0.08);
+  --src-color-alpha-accent-50: rgba(1, 123, 255, 0.12);
+  --src-color-alpha-accent-100: rgba(1, 123, 255, 0.16);
+  --src-color-alpha-success-10: rgba(22, 163, 74, 0.08);
+  --src-color-alpha-accent-200: rgba(1, 123, 255, 0.24);
+  --src-color-alpha-accent-300: rgba(1, 123, 255, 0.32);
+  --src-color-alpha-accent-400: rgba(1, 123, 255, 0.36);
+  --src-color-alpha-destruct-10: rgba(239, 68, 68, 0.08);
+  --src-color-alpha-success-50: rgba(22, 163, 74, 0.12);
+  --src-color-alpha-success-100: rgba(22, 163, 74, 0.24);
+  --src-color-alpha-success-200: rgba(22, 163, 74, 0.32);
+  --src-color-alpha-destruct-50: rgba(239, 68, 68, 0.12);
+  --src-color-alpha-destruct-100: rgba(239, 68, 68, 0.16);
+  --src-color-alpha-destruct-200: rgba(239, 68, 68, 0.24);
+}

package/styles/variables/typeface/web.scss

@@ -0,0 +1,35 @@
+/* typeface - web */
+:root {
+  --src-font-family-header: Inter;
+  --src-font-family-body: Inter;
+  --src-font-family-mono: PT Mono;
+  --src-font-weight-bold: Bold;
+  --src-font-weight-semiBold: SemiBold;
+  --src-font-weight-medium: Medium;
+  --src-font-weight-regular: Regular;
+  --src-font-size-tech: 9px;
+  --src-font-size-xs: 12px;
+  --src-font-size-sm: 14px;
+  --src-font-size-base: 16px;
+  --src-font-size-md: 20px;
+  --src-font-size-lg: 24px;
+  --src-font-size-xl: 28px;
+  --src-font-size-2xl: 32px;
+  --src-font-size-3xl: 40px;
+  --src-font-size-4xl: 48px;
+  --src-font-line-tech: 12px;
+  --src-font-line-xs: 16px;
+  --src-font-line-sm: 20px;
+  --src-font-line-base: 24px;
+  --src-font-line-md: 28px;
+  --src-font-line-lg: 32px;
+  --src-font-line-xl: 36px;
+  --src-font-line-2xl: 40px;
+  --src-font-line-3xl: 48px;
+  --src-font-line-4xl: 52px;
+  --src-font-spacing-tech: 1.2000000476837158px;
+  --src-font-spacing-xl: -0.20000000298023224px;
+  --src-font-spacing-2xl: -0.30000001192092896px;
+  --src-font-spacing-3xl: -0.5px;
+  --src-font-spacing-4xl: -1px;
+}

package/styles/variables/ui/_lg.scss

@@ -0,0 +1,35 @@
+[class*='--size-lg'] {
+  --src-media-thumbnail: 64px;
+  --src-media-preview: 1280px;
+  --src-padding-xs: var(--src-space-2-5);
+  --src-padding-sm: var(--src-space-4);
+  --src-padding-md: var(--src-space-5);
+  --src-padding-lg: var(--src-space-6);
+  --src-height-xs: var(--src-space-5);
+  --src-icon-size: var(--src-space-6);
+  --src-icon-line-width: 1.6399999856948853px;
+  --src-border-border: 2px;
+  --src-height-sm: var(--src-space-6);
+  --src-height-base: var(--src-space-11);
+  --src-border-rounded-none: 0px;
+  --src-height-lg: 64px;
+  --src-border-rounded-xs: var(--src-space-1-5);
+  --src-border-rounded: var(--src-space-2);
+  --src-border-rounded-parent: var(--src-space-3);
+  --src-border-rounded-full: 9999px;
+  --src-gap-lg: var(--src-space-4);
+  --src-text-lineHeight: var(--src-font-line-base);
+  --src-text-fontSize: var(--src-font-size-base);
+  --src-text-weight-base: var(--src-font-weight-medium);
+  --src-gap-none: 0px;
+  --src-gap-xl: var(--src-space-5);
+  --src-gap-md: var(--src-space-2);
+  --src-gap-sm: var(--src-space-1-5);
+  --src-text-weight-bold: var(--src-font-weight-bold);
+  --src-text-weight-medium: var(--src-font-weight-semiBold);
+  --src-shadow-focused: var(--src-space-1-5);
+  --src-shadow-ambient-inner: -2px;
+  --src-shadow-ambient-inner-light: 2px;
+  --src-shadow-ambient-outer: 2px;
+  --src-shadow-blur: 2px;
+}

package/styles/variables/ui/_md.scss

@@ -0,0 +1,35 @@
+[class*='--size-md'] {
+  --src-media-thumbnail: 48px;
+  --src-media-preview: 1024px;
+  --src-padding-xs: var(--src-space-2);
+  --src-padding-sm: var(--src-space-3);
+  --src-padding-md: var(--src-space-4);
+  --src-padding-lg: var(--src-space-5);
+  --src-height-xs: var(--src-space-4);
+  --src-icon-size: var(--src-space-5);
+  --src-icon-line-width: 1.440000057220459px;
+  --src-border-border: 1px;
+  --src-height-sm: var(--src-space-5);
+  --src-height-base: var(--src-space-9);
+  --src-border-rounded-none: 0px;
+  --src-height-lg: 52px;
+  --src-border-rounded-xs: var(--src-space-1);
+  --src-border-rounded: var(--src-space-1-5);
+  --src-border-rounded-parent: var(--src-space-2-5);
+  --src-border-rounded-full: 9999px;
+  --src-gap-lg: var(--src-space-3);
+  --src-text-lineHeight: var(--src-font-line-sm);
+  --src-text-fontSize: var(--src-font-size-sm);
+  --src-text-weight-base: var(--src-font-weight-medium);
+  --src-gap-none: 0px;
+  --src-gap-xl: var(--src-space-4);
+  --src-gap-md: var(--src-space-1-5);
+  --src-gap-sm: var(--src-space-1);
+  --src-text-weight-bold: var(--src-font-weight-bold);
+  --src-text-weight-medium: var(--src-font-weight-semiBold);
+  --src-shadow-focused: var(--src-space-1);
+  --src-shadow-ambient-inner: -1px;
+  --src-shadow-ambient-inner-light: 1px;
+  --src-shadow-ambient-outer: 1px;
+  --src-shadow-blur: 1px;
+}

package/styles/variables/ui/_sm.scss

@@ -0,0 +1,35 @@
+[class*='--size-sm'] {
+  --src-media-thumbnail: 32px;
+  --src-media-preview: 640px;
+  --src-padding-xs: var(--src-space-1-5);
+  --src-padding-sm: var(--src-space-2);
+  --src-padding-md: var(--src-space-3);
+  --src-padding-lg: var(--src-space-4);
+  --src-height-xs: var(--src-space-3);
+  --src-icon-size: var(--src-space-4);
+  --src-icon-line-width: 1.2400000095367432px;
+  --src-border-border: 1px;
+  --src-height-sm: var(--src-space-4);
+  --src-height-base: var(--src-space-7);
+  --src-border-rounded-none: 0px;
+  --src-height-lg: 40px;
+  --src-border-rounded-xs: var(--src-space-0-5);
+  --src-border-rounded: var(--src-space-1);
+  --src-border-rounded-parent: var(--src-space-2);
+  --src-border-rounded-full: 9999px;
+  --src-gap-lg: var(--src-space-2);
+  --src-text-lineHeight: var(--src-font-line-xs);
+  --src-text-fontSize: var(--src-font-size-xs);
+  --src-text-weight-base: var(--src-font-weight-medium);
+  --src-gap-none: 0px;
+  --src-gap-xl: var(--src-space-3);
+  --src-gap-md: var(--src-space-1);
+  --src-gap-sm: var(--src-space-0-5);
+  --src-text-weight-bold: var(--src-font-weight-bold);
+  --src-text-weight-medium: var(--src-font-weight-semiBold);
+  --src-shadow-focused: var(--src-space-1);
+  --src-shadow-ambient-inner: -1px;
+  --src-shadow-ambient-inner-light: 1px;
+  --src-shadow-ambient-outer: 1px;
+  --src-shadow-blur: 1px;
+}

package/styles/variables/ui/_xl.scss

@@ -0,0 +1,35 @@
+[class*='--size-xl'] {
+  --src-media-thumbnail: 96px;
+  --src-media-preview: 1440px;
+  --src-padding-xs: var(--src-space-3-5);
+  --src-padding-sm: var(--src-space-5);
+  --src-padding-md: var(--src-space-6);
+  --src-padding-lg: var(--src-space-7);
+  --src-height-xs: var(--src-space-6);
+  --src-icon-size: var(--src-space-7);
+  --src-icon-line-width: 1.840000033378601px;
+  --src-border-border: 2px;
+  --src-height-sm: var(--src-space-7);
+  --src-height-base: var(--src-space-14);
+  --src-border-rounded-none: 0px;
+  --src-height-lg: 76px;
+  --src-border-rounded-xs: var(--src-space-2);
+  --src-border-rounded: var(--src-space-2-5);
+  --src-border-rounded-parent: var(--src-space-4);
+  --src-border-rounded-full: 9999px;
+  --src-gap-lg: var(--src-space-5);
+  --src-text-lineHeight: var(--src-font-line-md);
+  --src-text-fontSize: var(--src-font-size-md);
+  --src-text-weight-base: var(--src-font-weight-medium);
+  --src-gap-none: 0px;
+  --src-gap-xl: var(--src-space-6);
+  --src-gap-md: var(--src-space-2-5);
+  --src-gap-sm: var(--src-space-2);
+  --src-text-weight-bold: var(--src-font-weight-bold);
+  --src-text-weight-medium: var(--src-font-weight-semiBold);
+  --src-shadow-focused: var(--src-space-1-5);
+  --src-shadow-ambient-inner: -3px;
+  --src-shadow-ambient-inner-light: 3px;
+  --src-shadow-ambient-outer: 3px;
+  --src-shadow-blur: 3px;
+}

package/styles/variables-legacy/index.scss

@@ -0,0 +1,6 @@
+@use 'colors';
+@use 'colors-aliases';
+@use 'typography';
+@use 'borders';
+@use 'shadows';
+// @use 'form-aliases';