chore: add stylelint custom plugin for token validation

Signed-off-by: Paul-Xavier Ceccaldi <[email protected]>

Author: P1X3L

lib/package.json

@@ -30,7 +30,8 @@
     "build": "vite build",
     "tokens:clean": "tsx src/theme/clean-tokens.ts",
     "tokens:build": "yarn tokens:clean && node ./src/theme/build-tokens.js",
-    "theme:generate": "yarn tokens:build && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
+    "tokens:generate-types": "tsx src/theme/extract-css-vars.ts",
+    "theme:generate": "yarn tokens:build && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css' && yarn tokens:generate-types",
     "test": "vitest"
   },
   "repository": {

lib/src/components/AspectRatio/aspect-ratio.module.scss

@@ -1,7 +1,7 @@
 @layer components {
   .root {
     & > * {
-      aspect-ratio: var(--aspect-ratio, 4 / 3);
+      aspect-ratio: var(--aspectRatio, 4 / 3);
     }
 
     & > img,
@@ -12,16 +12,16 @@
 
   .ratio {
     &-square {
-      --aspect-ratio: 1 / 1;
+      --aspectRatio: 1 / 1;
     }
     &-4-3 {
-      --aspect-ratio: 4 / 3;
+      --aspectRatio: 4 / 3;
     }
     &-3-2 {
-      --aspect-ratio: 3 / 2;
+      --aspectRatio: 3 / 2;
     }
     &-video {
-      --aspect-ratio: 16 / 9;
+      --aspectRatio: 16 / 9;
     }
   }
 }

lib/src/components/Badge/badge.module.scss

@@ -36,8 +36,8 @@
 
     &-sm {
       --borderRadius: var(--components-dimensions-badge-border-radius-sm);
-      --height: var(--components-dimensions-badge-size-max-height-sm);
-      --width: var(--components-dimensions-badge-size-min-width-sm);
+      --height: var(--components-dimensions-badge-size-height);
+      --width: var(--components-dimensions-badge-size-width);
     }
   }
 

lib/src/components/Breadcrumb/breadcrumb.module.scss

@@ -38,7 +38,7 @@
     position: absolute;
     bottom: 0;
     top: 0;
-    width: var(--size-icon-2xl);
+    width: var(--size-icon-xl);
   }
 
   .item-wrapper {

lib/src/components/DateTimePickerCommon/date-time-picker.scss

@@ -130,15 +130,15 @@
   .react-datepicker__month-text--in-selecting-range,
   .react-datepicker__month-text--in-range,
   .react-datepicker__month-text:hover {
-    width: var(--size-icon-4xl);
-    height: var(--size-icon-2xl);
+    width: var(--size-icon-2xl);
+    height: var(--size-icon-xl);
     margin: 2px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--size-icon-2xl);
+    border-radius: var(--size-icon-xl);
     &:hover {
-      border-radius: var(--size-icon-2xl);
+      border-radius: var(--size-icon-xl);
     }
   }
 }

lib/src/components/Drawer/AssetDrawer/asset-drawer.module.scss

@@ -20,24 +20,24 @@
     width: 100%;
 
     @media screen and (min-width: breakpoints.$breakpoint-md) {
-      margin-top: var(--size-icon-3xl);
+      margin-top: var(--size-icon-2xl);
     }
   }
 
   .content-max-width {
     flex: 1;
     margin: 0 auto;
     width: 100%;
-    max-width: var(--asset-drawer-content-max-width, 51.25rem); /* 820px */
+    max-width: var(--assetDrawerContentMaxWidth, 51.25rem); /* 820px */
   }
 
   .content {
-    --asset-drawer-content-padding: 0 var(--border-radius-lg) var(--border-radius-2xl);
+    --assetDrawerContentPadding: 0 var(--border-radius-lg) var(--border-radius-2xl);
 
-    padding: var(--asset-drawer-content-padding);
+    padding: var(--assetDrawerContentPadding);
 
     @media screen and (min-width: breakpoints.$breakpoint-md) {
-      --asset-drawer-content-padding: 0 var(--border-radius-2xl) var(--size-icon-3xl);
+      --assetDrawerContentPadding: 0 var(--border-radius-2xl) var(--size-icon-2xl);
     }
   }
 
@@ -86,17 +86,17 @@
     background-color: var(--color-background-warm-primary);
     transition: background-color var(--duration-medium);
 
-    --icon-block-size: var(--size-icon-3xl); /* 48px */
+    --iconBlockSize: var(--size-icon-2xl); /* 48px */
 
-    width: var(--icon-block-size);
-    height: var(--icon-block-size);
+    width: var(--iconBlockSize);
+    height: var(--iconBlockSize);
 
     &.size-md {
-      --icon-block-size: var(--size-icon-3xl); /* 48px */
+      --iconBlockSize: var(--size-icon-2xl); /* 48px */
     }
 
     &.size-sm {
-      --icon-block-size: var(--size-icon-2xl); /* 32px */
+      --iconBlockSize: var(--size-icon-xl); /* 32px */
     }
   }
 }

lib/src/components/Drawer/AssetDrawer/index.tsx

@@ -60,7 +60,7 @@ export const AssetDrawerComponent = forwardRefWithAs<AssetDrawerProps, 'div'>(
         <div className={cx('content-wrapper')}>
           <div
             className={cx('content-max-width')}
-            style={{ '--asset-drawer-content-max-width': drawerMaxWidth } as React.CSSProperties}
+            style={{ '--assetDrawerContentMaxWidth': drawerMaxWidth } as React.CSSProperties}
           >
             <div className={cx('content')}>{children}</div>
           </div>

lib/src/components/Drawer/drawer.module.scss

@@ -14,64 +14,64 @@
     transition: var(--duration-medium);
     max-width: 100%;
 
-    --drawer-left: 0;
-    --drawer-right: 0;
-    --drawer-top: 0;
-    --drawer-bottom: 0;
-    --drawer-height: 100%;
-    --drawer-width: 100%;
-    --drawer-transform: translateY(0, 0);
-
-    left: var(--drawer-left);
-    right: var(--drawer-right);
-    top: var(--drawer-top);
-    bottom: var(--drawer-bottom);
-    width: var(--drawer-width);
-    height: var(--drawer-height);
-    transform: var(--drawer-transform);
+    --drawerLeft: 0;
+    --drawerRight: 0;
+    --drawerTop: 0;
+    --drawerBottom: 0;
+    --drawerHeight: 100%;
+    --drawerWidth: 100%;
+    --drawerTransform: translateY(0, 0);
+
+    left: var(--drawerLeft);
+    right: var(--drawerRight);
+    top: var(--drawerTop);
+    bottom: var(--drawerBottom);
+    width: var(--drawerWidth);
+    height: var(--drawerHeight);
+    transform: var(--drawerTransform);
 
     &.placement {
       &-bottom {
-        --drawer-top: auto;
-        --drawer-transform: translateY(100%);
+        --drawerTop: auto;
+        --drawerTransform: translateY(100%);
       }
       &-left {
-        --drawer-right: auto;
-        --drawer-transform: translateX(-100%);
+        --drawerRight: auto;
+        --drawerTransform: translateX(-100%);
       }
       &-right {
-        --drawer-left: auto;
-        --drawer-transform: translateX(100%);
+        --drawerLeft: auto;
+        --drawerTransform: translateX(100%);
       }
       &-top {
-        --drawer-bottom: auto;
-        --drawer-transform: translateY(-100%);
+        --drawerBottom: auto;
+        --drawerTransform: translateY(-100%);
       }
       &-top,
       &-bottom {
         &.size {
           &-sm {
-            --drawer-height: 25rem; /* 400px */
+            --drawerHeight: 25rem; /* 400px */
           }
           &-md {
-            --drawer-height: 34.375rem; /* 550px */
+            --drawerHeight: 34.375rem; /* 550px */
           }
           &-lg {
-            --drawer-height: 42.5rem; /* 680px */
+            --drawerHeight: 42.5rem; /* 680px */
           }
         }
       }
       &-left,
       &-right {
         &.size {
           &-sm {
-            --drawer-width: 25rem; /* 400px */
+            --drawerWidth: 25rem; /* 400px */
           }
           &-md {
-            --drawer-width: 34.375rem; /* 550px */
+            --drawerWidth: 34.375rem; /* 550px */
           }
           &-lg {
-            --drawer-width: 42.5rem; /* 680px */
+            --drawerWidth: 42.5rem; /* 680px */
           }
         }
       }
@@ -80,12 +80,12 @@
     /* Note: this must come _after_ the placement rules to transition from offscreen to onscreen */
     &[data-enter] {
       opacity: 1;
-      --drawer-transform: translateX(0, 0);
+      --drawerTransform: translateX(0, 0);
     }
   }
 
   .backdrop {
-    background-color: var(--color-overlay);
+    background-color: var(--color-overlay-strong);
     z-index: 999;
     position: fixed;
     top: 0;
@@ -118,7 +118,7 @@
     position: sticky;
     z-index: 1;
     width: 100%;
-    background-color: var(--color-neutral-0);
+    background-color: var(--color-background-warm-strong);
     padding: var(--border-radius-2xl);
 
     @media screen and (min-width: breakpoints.$breakpoint-md) {

lib/src/components/DropdownMenu/dropdown-menu.module.scss

@@ -30,24 +30,24 @@
   .arrow-item {
     height: var(--height-32);
     width: var(--height-32);
-    transform: var(--dropdown-menu-transform);
+    transform: var(--dropdownMenuTransform);
   }
 
   .arrow-placement {
     &-bottom {
-      --dropdown-menu-transform: rotateZ(360deg);
+      --dropdownMenuTransform: rotateZ(360deg);
     }
 
     &-left {
-      --dropdown-menu-transform: rotateZ(90deg);
+      --dropdownMenuTransform: rotateZ(90deg);
     }
 
     &-right {
-      --dropdown-menu-transform: rotateZ(-90deg);
+      --dropdownMenuTransform: rotateZ(-90deg);
     }
 
     &-top {
-      --dropdown-menu-transform: rotateZ(180deg);
+      --dropdownMenuTransform: rotateZ(180deg);
     }
   }
 

lib/src/components/Icon/docs/properties.json

@@ -20,17 +20,14 @@
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "\"2xl\" | \"3xl\" | \"4xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\"",
+          "raw": "\"2xl\" | \"3xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\"",
           "value": [
             {
               "value": "\"2xl\""
             },
             {
               "value": "\"3xl\""
             },
-            {
-              "value": "\"4xl\""
-            },
             {
               "value": "\"lg\""
             },