@accelint/design-toolkit 2.4.0 → 2.4.2

package/dist/tokens/themes.css

@@ -70,74 +70,74 @@
 
 @theme {
   /** Typography **/
-  --typography-header-xxl-size: var(--typography-header-xxl-size);
-  --typography-header-xxl-height: var(--typography-header-xxl-height);
-  --typography-header-xxl-spacing: var(--typography-header-xxl-spacing);
-  --typography-header-xl-size: var(--typography-header-xl-size);
-  --typography-header-xl-height: var(--typography-header-xl-height);
-  --typography-header-xl-spacing: var(--typography-header-xl-spacing);
-  --typography-header-l-size: var(--typography-header-l-size);
-  --typography-header-l-height: var(--typography-header-l-height);
-  --typography-header-l-spacing: var(--typography-header-l-spacing);
-  --typography-header-m-size: var(--typography-header-m-size);
-  --typography-header-m-height: var(--typography-header-m-height);
-  --typography-header-m-spacing: var(--typography-header-m-spacing);
-  --typography-header-s-size: var(--typography-header-s-size);
-  --typography-header-s-height: var(--typography-header-s-height);
-  --typography-header-s-spacing: var(--typography-header-s-spacing);
-  --typography-header-xs-size: var(--typography-header-xs-size);
-  --typography-header-xs-height: var(--typography-header-xs-height);
-  --typography-header-xs-spacing: var(--typography-header-xs-spacing);
-  --typography-body-l-size: var(--typography-body-l-size);
-  --typography-body-l-height: var(--typography-body-l-height);
-  --typography-body-l-spacing: var(--typography-body-l-spacing);
-  --typography-body-m-size: var(--typography-body-m-size);
-  --typography-body-m-height: var(--typography-body-m-height);
-  --typography-body-m-spacing: var(--typography-body-m-spacing);
-  --typography-body-s-size: var(--typography-body-s-size);
-  --typography-body-s-height: var(--typography-body-s-height);
-  --typography-body-s-spacing: var(--typography-body-s-spacing);
-  --typography-body-xs-size: var(--typography-body-xs-size);
-  --typography-body-xs-height: var(--typography-body-xs-height);
-  --typography-body-xs-spacing: var(--typography-body-xs-spacing);
-  --typography-body-xxs-size: var(--typography-body-xxs-size);
-  --typography-body-xxs-height: var(--typography-body-xxs-height);
-  --typography-body-xxs-spacing: var(--typography-body-xxs-spacing);
-  --typography-button-l-size: var(--typography-button-l-size);
-  --typography-button-l-height: var(--typography-button-l-height);
-  --typography-button-l-spacing: var(--typography-button-l-spacing);
-  --typography-button-m-size: var(--typography-button-m-size);
-  --typography-button-m-height: var(--typography-button-m-height);
-  --typography-button-m-spacing: var(--typography-button-m-spacing);
-  --typography-button-s-size: var(--typography-button-s-size);
-  --typography-button-s-height: var(--typography-button-s-height);
-  --typography-button-s-spacing: var(--typography-button-s-spacing);
-  --typography-button-xs-size: var(--typography-button-xs-size);
-  --typography-button-xs-height: var(--typography-button-xs-height);
-  --typography-button-xs-spacing: var(--typography-button-xs-spacing);
+  --typography-header-xxl-size: var(--typography-header-xxl-size, 32px);
+  --typography-header-xxl-height: var(--typography-header-xxl-height, 40px);
+  --typography-header-xxl-spacing: var(--typography-header-xxl-spacing, 0px);
+  --typography-header-xl-size: var(--typography-header-xl-size, 24px);
+  --typography-header-xl-height: var(--typography-header-xl-height, 28px);
+  --typography-header-xl-spacing: var(--typography-header-xl-spacing, 0.18px);
+  --typography-header-l-size: var(--typography-header-l-size, 20px);
+  --typography-header-l-height: var(--typography-header-l-height, 24px);
+  --typography-header-l-spacing: var(--typography-header-l-spacing, 0.18px);
+  --typography-header-m-size: var(--typography-header-m-size, 14px);
+  --typography-header-m-height: var(--typography-header-m-height, 20px);
+  --typography-header-m-spacing: var(--typography-header-m-spacing, 0.25px);
+  --typography-header-s-size: var(--typography-header-s-size, 12px);
+  --typography-header-s-height: var(--typography-header-s-height, 16px);
+  --typography-header-s-spacing: var(--typography-header-s-spacing, 0.4px);
+  --typography-header-xs-size: var(--typography-header-xs-size, 10px);
+  --typography-header-xs-height: var(--typography-header-xs-height, 12px);
+  --typography-header-xs-spacing: var(--typography-header-xs-spacing, 0.25px);
+  --typography-body-l-size: var(--typography-body-l-size, 16px);
+  --typography-body-l-height: var(--typography-body-l-height, 24px);
+  --typography-body-l-spacing: var(--typography-body-l-spacing, 0.5px);
+  --typography-body-m-size: var(--typography-body-m-size, 14px);
+  --typography-body-m-height: var(--typography-body-m-height, 20px);
+  --typography-body-m-spacing: var(--typography-body-m-spacing, 0.25px);
+  --typography-body-s-size: var(--typography-body-s-size, 12px);
+  --typography-body-s-height: var(--typography-body-s-height, 16px);
+  --typography-body-s-spacing: var(--typography-body-s-spacing, 0.4px);
+  --typography-body-xs-size: var(--typography-body-xs-size, 10px);
+  --typography-body-xs-height: var(--typography-body-xs-height, 12px);
+  --typography-body-xs-spacing: var(--typography-body-xs-spacing, 0.5px);
+  --typography-body-xxs-size: var(--typography-body-xxs-size, 9px);
+  --typography-body-xxs-height: var(--typography-body-xxs-height, 12px);
+  --typography-body-xxs-spacing: var(--typography-body-xxs-spacing, 0.25px);
+  --typography-button-l-size: var(--typography-button-l-size, 16px);
+  --typography-button-l-height: var(--typography-button-l-height, 24px);
+  --typography-button-l-spacing: var(--typography-button-l-spacing, 0.5px);
+  --typography-button-m-size: var(--typography-button-m-size, 14px);
+  --typography-button-m-height: var(--typography-button-m-height, 20px);
+  --typography-button-m-spacing: var(--typography-button-m-spacing, 0.25px);
+  --typography-button-s-size: var(--typography-button-s-size, 12px);
+  --typography-button-s-height: var(--typography-button-s-height, 16px);
+  --typography-button-s-spacing: var(--typography-button-s-spacing, 0.4px);
+  --typography-button-xs-size: var(--typography-button-xs-size, 10px);
+  --typography-button-xs-height: var(--typography-button-xs-height, 12px);
+  --typography-button-xs-spacing: var(--typography-button-xs-spacing, 0.5px);
 }
 
 @theme {
   /** Spacing **/
-  --spacing-0: var(--spacing-0);
-  --spacing-none: var(--spacing-none);
-  --spacing-xxs: var(--spacing-xxs);
-  --spacing-xs: var(--spacing-xs);
-  --spacing-s: var(--spacing-s);
-  --spacing-m: var(--spacing-m);
-  --spacing-l: var(--spacing-l);
-  --spacing-xl: var(--spacing-xl);
-  --spacing-xxl: var(--spacing-xxl);
-  --spacing-oversized: var(--spacing-oversized);
+  --spacing-0: var(--spacing-0, 0px);
+  --spacing-none: var(--spacing-none, unset);
+  --spacing-xxs: var(--spacing-xxs, 2px);
+  --spacing-xs: var(--spacing-xs, 4px);
+  --spacing-s: var(--spacing-s, 8px);
+  --spacing-m: var(--spacing-m, 12px);
+  --spacing-l: var(--spacing-l, 16px);
+  --spacing-xl: var(--spacing-xl, 24px);
+  --spacing-xxl: var(--spacing-xxl, 40px);
+  --spacing-oversized: var(--spacing-oversized, 80px);
 }
 
 @theme {
   /** Radius **/
-  --radius-none: var(--radius-none);
-  --radius-small: var(--radius-small);
-  --radius-medium: var(--radius-medium);
-  --radius-large: var(--radius-large);
-  --radius-round: var(--radius-round);
+  --radius-none: var(--radius-none, 0px);
+  --radius-small: var(--radius-small, 2px);
+  --radius-medium: var(--radius-medium, 4px);
+  --radius-large: var(--radius-large, 8px);
+  --radius-round: var(--radius-round, 80px);
 }
 
 @theme {

package/dist/variants/variants.css

@@ -0,0 +1,58 @@
+@custom-variant placement-left (&:where([data-placement~="left"]));
+@custom-variant placement-right (&:where([data-placement~="right"]));
+@custom-variant placement-top (&:where([data-placement~="top"]));
+@custom-variant placement-bottom (&:where([data-placement~="bottom"]));
+@custom-variant size-xlarge (&:where([data-size="xlarge"]));
+@custom-variant size-large (&:where([data-size="large"]));
+@custom-variant size-medium (&:where([data-size="medium"]));
+@custom-variant size-small (&:where([data-size="small"]));
+@custom-variant size-xsmall (&:where([data-size="xsmall"]));
+@custom-variant type-literal (&:where([data-type="literal"]));
+@custom-variant type-year (&:where([data-type="year"]));
+@custom-variant type-month (&:where([data-type="month"]));
+@custom-variant type-day (&:where([data-type="day"]));
+@custom-variant layout-grid (&:where([data-layout="grid"]));
+@custom-variant layout-stack (&:where([data-layout="stack"]));
+@custom-variant orientation-horizontal (&:where([data-orientation="horizontal"]));
+@custom-variant orientation-vertical (&:where([data-orientation="vertical"]));
+@custom-variant selection-single (&:where([data-selection-mode="single"]));
+@custom-variant selection-multiple (&:where([data-selection-mode="multiple"]));
+@custom-variant resizable-right (&:where([data-resizable-direction="right"]));
+@custom-variant resizable-left (&:where([data-resizable-direction="left"]));
+@custom-variant resizable-both (&:where([data-resizable-direction="both"]));
+@custom-variant sort-ascending (&:where([data-sort-direction="ascending"]));
+@custom-variant sort-descending (&:where([data-sort-direction="descending"]));
+@custom-variant allows-removing (&:where([data-allows-removing]));
+@custom-variant allows-sorting (&:where([data-allows-sorting]));
+@custom-variant allows-dragging (&:where([data-allows-dragging]));
+@custom-variant has-submenu (&:where([data-has-submenu]));
+@custom-variant has-child-items (&:where([data-has-child-items]));
+@custom-variant enabled (&:where(:not([disabled], [data-disabled]), :enabled));
+@custom-variant open (&:where([open], [data-open], :open));
+@custom-variant expanded (&:where([expanded], [data-expanded]));
+@custom-variant entering (&:where([data-entering]));
+@custom-variant exiting (&:where([data-exiting]));
+@custom-variant indeterminate (&:where([data-indeterminate], :indeterminate));
+@custom-variant placeholder-shown (&:where([data-placeholder], :placeholder-shown));
+@custom-variant current (&:where([data-current]));
+@custom-variant optional (&:where(:not([required], [data-required]), :optional));
+@custom-variant required (&:where([required], [data-required], :required));
+@custom-variant unavailable (&:where([data-unavailable]));
+@custom-variant invalid (&:where([invalid], [data-invalid], :invalid));
+@custom-variant read-only (&:where([readonly], [data-readonly], :read-only));
+@custom-variant outside-month (&:where([data-outside-month]));
+@custom-variant outside-visible-range (&:where([data-outside-visible-range]));
+@custom-variant pending (&:where([data-pending]));
+@custom-variant empty (&:where([data-empty], :empty));
+@custom-variant focus-within (&:where([data-focus-within], :focus-within));
+@custom-variant hover (&:where([data-hovered], :hover));
+@custom-variant focus (&:where([data-focused], :focus));
+@custom-variant focus-visible (&:where([data-focus-visible], :focus-visible));
+@custom-variant pressed (&:where([data-pressed], :active));
+@custom-variant selected (&:where([data-selected], :checked));
+@custom-variant selection-start (&:where([data-selection-start]));
+@custom-variant selection-end (&:where([data-selection-end]));
+@custom-variant dragging (&:where([data-dragging]));
+@custom-variant drop-target (&:where([data-drop-target]));
+@custom-variant resizing (&:where([data-resizing]));
+@custom-variant disabled (&:where([disabled], [data-disabled], :disabled));

package/dist/variants/variants.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelint/design-toolkit",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "private": false,
   "license": "Apache-2.0",
   "repository": {
@@ -111,8 +111,8 @@
     "vite-tsconfig-paths": "5.0.1",
     "vitest": "^3.1.1",
     "@accelint/biome-config": "0.1.2",
-    "@accelint/typescript-config": "0.1.2",
-    "@accelint/vitest-config": "0.1.3"
+    "@accelint/vitest-config": "0.1.3",
+    "@accelint/typescript-config": "0.1.2"
   },
   "$schema": "https://json.schemastore.org/package",
   "author": "https://hypergiant.com",
@@ -121,10 +121,11 @@
   },
   "scripts": {
     "bench": "pnpm vitest bench --run --dir src",
-    "build": "pnpm gen:tokens && pnpm tsup && pnpm build:css",
+    "build": "pnpm gen:tokens && pnpm gen:variants && pnpm tsup && pnpm build:css",
     "build:css": "pnpm tailwindcss -i ./src/index.css -o ./dist/styles.css",
     "dev": "pnpm tsc --watch",
     "gen:tokens": "node scripts/generate-tokens.mjs",
+    "gen:variants": "node scripts/generate-variants.mjs",
     "index": "pnpm zx ../../scripts/indexer.mjs design-toolkit/components",
     "lint": "pnpm biome lint",
     "preview": "pnpm storybook dev -p 6006",