@seed-design/css 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/bottom-sheet.css

@@ -114,6 +114,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    border: none;
     top: var(--seed-dimension-x5);
     right: var(--seed-dimension-x5);
     border-radius: var(--seed-radius-full);

package/recipes/chip.css

@@ -1,4 +1,5 @@
 .seed-chip__root {
+    position: relative;
     display: inline-flex;
     justify-content: center;
     align-items: center;

package/recipes/control-chip.css

@@ -1,4 +1,5 @@
 .seed-control-chip {
+    position: relative;
     display: inline-flex;
     justify-content: center;
     align-items: center;

package/recipes/select-box.css

@@ -22,6 +22,7 @@
 .seed-select-box__content {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: var(--seed-dimension-x0_5);
 }
 .seed-select-box__checkboxControl {

package/recipes/switch.css

@@ -6,11 +6,9 @@
     position: relative;
     vertical-align: top;
     isolation: isolate;
-    opacity: 1;
     cursor: pointer;
 }
 .seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
-    opacity: 0.38;
     cursor: not-allowed;
 }
 .seed-switch__control {
@@ -21,6 +19,9 @@
     background: var(--seed-color-palette-gray-600);
     transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
 }
+.seed-switch__control:is(:disabled, [disabled], [data-disabled]) {
+    opacity: 0.38;
+}
 .seed-switch__control:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-brand-solid);
 }
@@ -29,42 +30,78 @@
     background: var(--seed-color-palette-static-white);
     transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
 }
-.seed-switch__root--size_medium {
-    min-height: 32px;
-}
-.seed-switch__control--size_medium {
-    min-inline-size: 52px;
-    min-block-size: 32px;
-    padding: 2px 2px;
-}
-.seed-switch__thumb--size_medium {
-    width: 28px;
-    height: 28px;
-    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
+.seed-switch__label {
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
 }
-.seed-switch__thumb--size_medium:is(:checked, [data-checked]) {
-    transform: translateX(calc(52px - 32px));
+.seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
 }
-.seed-switch__root--size_small {
+.seed-switch__root--size_16 {
     min-height: 24px;
-    gap: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x1_5);
 }
-.seed-switch__control--size_small {
+.seed-switch__control--size_16 {
     min-inline-size: 26px;
     min-block-size: 16px;
     padding: 2px 2px;
     margin: calc((24px - 16px) / 2) 0;
 }
-.seed-switch__thumb--size_small {
+.seed-switch__thumb--size_16 {
     width: 12px;
     height: 12px;
 }
-.seed-switch__thumb--size_small:is(:checked, [data-checked]) {
+.seed-switch__thumb--size_16:is(:checked, [data-checked]) {
     transform: translateX(calc(26px - 16px));
 }
-.seed-switch__label--size_small {
+.seed-switch__label--size_16 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    margin-top: calc(12px - 0.5625rem);
+}
+.seed-switch__root--size_24 {
+    min-height: 24px;
+    gap: var(--seed-dimension-x2);
+}
+.seed-switch__control--size_24 {
+    min-inline-size: 38px;
+    min-block-size: 24px;
+    padding: 2px 2px;
+    margin: calc((24px - 24px) / 2) 0;
+}
+.seed-switch__thumb--size_24 {
+    width: 20px;
+    height: 20px;
+    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
+}
+.seed-switch__thumb--size_24:is(:checked, [data-checked]) {
+    transform: translateX(calc(38px - 24px));
+}
+.seed-switch__label--size_24 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-regular);
     margin-top: calc(12px - 0.59375rem);
+}
+.seed-switch__root--size_32 {
+    min-height: 32px;
+    gap: var(--seed-dimension-x2_5);
+}
+.seed-switch__control--size_32 {
+    min-inline-size: 52px;
+    min-block-size: 32px;
+    padding: 2px 2px;
+    margin: calc((32px - 32px) / 2) 0;
+}
+.seed-switch__thumb--size_32 {
+    width: 28px;
+    height: 28px;
+    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
+}
+.seed-switch__thumb--size_32:is(:checked, [data-checked]) {
+    transform: translateX(calc(52px - 32px));
+}
+.seed-switch__label--size_32 {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    margin-top: calc(16px - 0.6875rem);
 }

package/recipes/switch.d.ts

@@ -1,8 +1,8 @@
 declare interface SwitchVariant {
   /**
-  * @default medium
+  * @default 32
   */
-  size: "medium" | "small";
+  size: "16" | "24" | "32";
 }
 
 declare type SwitchVariantMap = {

package/recipes/switch.mjs

@@ -21,15 +21,16 @@ const switchSlotNames = [
 ];
 
 const defaultVariant = {
-  "size": "medium"
+  "size": 32
 };
 
 const compoundVariants = [];
 
 export const switchVariantMap = {
   "size": [
-    "medium",
-    "small"
+    "16",
+    "24",
+    "32"
   ]
 };
 

package/vars/component/switch.d.ts

@@ -8,6 +8,10 @@ export declare const vars: {
       "thumb": {
         "color": "var(--seed-color-palette-static-white)",
         "cornerRadius": "var(--seed-radius-full)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
       }
     },
     "enabledSelected": {
@@ -16,15 +20,19 @@ export declare const vars: {
       }
     },
     "disabled": {
-      "root": {
+      "control": {
         "opacity": "0.38"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "sizeMedium": {
+  "size32": {
     "enabled": {
       "root": {
-        "height": "32px"
+        "height": "32px",
+        "gap": "var(--seed-dimension-x2_5)"
       },
       "control": {
         "height": "32px",
@@ -36,15 +44,42 @@ export declare const vars: {
         "height": "28px",
         "width": "28px",
         "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       }
     }
   },
-  "sizeSmall": {
+  "size24": {
     "enabled": {
       "root": {
         "height": "24px",
         "gap": "var(--seed-dimension-x2)"
       },
+      "control": {
+        "height": "24px",
+        "width": "38px",
+        "paddingX": "2px",
+        "paddingY": "2px"
+      },
+      "thumb": {
+        "height": "20px",
+        "width": "20px",
+        "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "size16": {
+    "enabled": {
+      "root": {
+        "height": "24px",
+        "gap": "var(--seed-dimension-x1_5)"
+      },
       "control": {
         "height": "16px",
         "width": "26px",
@@ -56,9 +91,8 @@ export declare const vars: {
         "width": "12px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       }
     }
   }

package/vars/component/switch.mjs

@@ -8,6 +8,10 @@ export const vars = {
       "thumb": {
         "color": "var(--seed-color-palette-static-white)",
         "cornerRadius": "var(--seed-radius-full)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
       }
     },
     "enabledSelected": {
@@ -16,15 +20,19 @@ export const vars = {
       }
     },
     "disabled": {
-      "root": {
+      "control": {
         "opacity": "0.38"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "sizeMedium": {
+  "size32": {
     "enabled": {
       "root": {
-        "height": "32px"
+        "height": "32px",
+        "gap": "var(--seed-dimension-x2_5)"
       },
       "control": {
         "height": "32px",
@@ -36,15 +44,42 @@ export const vars = {
         "height": "28px",
         "width": "28px",
         "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       }
     }
   },
-  "sizeSmall": {
+  "size24": {
     "enabled": {
       "root": {
         "height": "24px",
         "gap": "var(--seed-dimension-x2)"
       },
+      "control": {
+        "height": "24px",
+        "width": "38px",
+        "paddingX": "2px",
+        "paddingY": "2px"
+      },
+      "thumb": {
+        "height": "20px",
+        "width": "20px",
+        "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "size16": {
+    "enabled": {
+      "root": {
+        "height": "24px",
+        "gap": "var(--seed-dimension-x1_5)"
+      },
       "control": {
         "height": "16px",
         "width": "26px",
@@ -56,9 +91,8 @@ export const vars = {
         "width": "12px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       }
     }
   }