@seed-design/css 0.2.1 → 0.2.4

package/recipes/select-box.css

@@ -25,74 +25,6 @@
     flex-grow: 1;
     gap: var(--seed-dimension-x0_5);
 }
-.seed-select-box__checkboxControl {
-    flex: none;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    background-color: var(--seed-color-bg-layer-default);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--seed-color-stroke-neutral-weak);
-    border-radius: var(--seed-radius-r1);
-}
-.seed-select-box__checkboxControl:is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-select-box__checkboxControl:is(:checked, [data-checked]) {
-    background-color: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-select-box__checkboxControl:is(:checked, [data-checked]):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-select-box__checkboxIcon {
-    width: var(--seed-dimension-x3_5);
-    height: var(--seed-dimension-x3_5);
-    display: none;
-}
-.seed-select-box__checkboxIcon:is(:checked, [data-checked]) {
-    display: block;
-    color: var(--seed-color-palette-static-white);
-}
-.seed-select-box__radioControl {
-    flex: none;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    background-color: var(--seed-color-bg-layer-default);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--seed-color-stroke-neutral-weak);
-    border-radius: var(--seed-radius-full);
-}
-.seed-select-box__radioControl:is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-select-box__radioControl:is(:checked, [data-checked]) {
-    background-color: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-select-box__radioControl:is(:checked, [data-checked]):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-select-box__radioIcon {
-    width: var(--seed-dimension-x2_5);
-    height: var(--seed-dimension-x2_5);
-    border-radius: var(--seed-radius-full);
-    display: none;
-}
-.seed-select-box__radioIcon:is(:checked, [data-checked]) {
-    display: block;
-    background-color: var(--seed-color-palette-static-white);
-    color: var(--seed-color-palette-static-white);
-}
 .seed-select-box__label {
     color: var(--seed-color-fg-neutral);
     font-weight: var(--seed-font-weight-bold);

package/recipes/select-box.d.ts

@@ -8,7 +8,7 @@ declare type SelectBoxVariantMap = {
 
 export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
 
-export declare type SelectBoxSlotName = "root" | "content" | "label" | "description" | "checkboxControl" | "checkboxIcon" | "radioControl" | "radioIcon";
+export declare type SelectBoxSlotName = "root" | "content" | "label" | "description";
 
 export declare const selectBoxVariantMap: SelectBoxVariantMap;
 

package/recipes/select-box.mjs

@@ -17,22 +17,6 @@ const selectBoxSlotNames = [
   [
     "description",
     "seed-select-box__description"
-  ],
-  [
-    "checkboxControl",
-    "seed-select-box__checkboxControl"
-  ],
-  [
-    "checkboxIcon",
-    "seed-select-box__checkboxIcon"
-  ],
-  [
-    "radioControl",
-    "seed-select-box__radioControl"
-  ],
-  [
-    "radioIcon",
-    "seed-select-box__radioIcon"
   ]
 ];
 

package/recipes/switch.css

@@ -22,12 +22,8 @@
 .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);
-}
 .seed-switch__thumb {
     border-radius: var(--seed-radius-full);
-    background: var(--seed-color-palette-static-white);
     transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
 }
 .seed-switch__label {
@@ -37,6 +33,18 @@
 .seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
 }
+.seed-switch__control--tone_neutral:is(:checked, [data-checked]) {
+    background: var(--seed-color-bg-neutral-inverted);
+}
+.seed-switch__thumb--tone_neutral {
+    background: var(--seed-color-fg-neutral-inverted);
+}
+.seed-switch__control--tone_brand:is(:checked, [data-checked]) {
+    background: var(--seed-color-bg-brand-solid);
+}
+.seed-switch__thumb--tone_brand {
+    background: var(--seed-color-palette-static-white);
+}
 .seed-switch__root--size_16 {
     min-height: 24px;
     gap: var(--seed-dimension-x1_5);
@@ -89,12 +97,12 @@
 .seed-switch__control--size_32 {
     min-inline-size: 52px;
     min-block-size: 32px;
-    padding: 2px 2px;
+    padding: 3px 3px;
     margin: calc((32px - 32px) / 2) 0;
 }
 .seed-switch__thumb--size_32 {
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
     box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
 }
 .seed-switch__thumb--size_32:is(:checked, [data-checked]) {

package/recipes/switch.d.ts

@@ -1,5 +1,9 @@
 declare interface SwitchVariant {
   /**
+  * @default "brand"
+  */
+  tone: "neutral" | "brand";
+/**
   * @default 32
   */
   size: "16" | "24" | "32";

package/recipes/switch.mjs

@@ -21,12 +21,17 @@ const switchSlotNames = [
 ];
 
 const defaultVariant = {
+  "tone": "brand",
   "size": 32
 };
 
 const compoundVariants = [];
 
 export const switchVariantMap = {
+  "tone": [
+    "neutral",
+    "brand"
+  ],
   "size": [
     "16",
     "24",

package/recipes/text-field.css

@@ -66,24 +66,23 @@
 .seed-text-field__value {
     box-sizing: border-box;
     font: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    resize: none;
+    height: 100%;
+    flex-grow: 1;
+    color: var(--seed-color-fg-neutral);
 }
 .seed-text-field__value:is(input) {
     padding-inline: 0;
+    width: 0;
 }
 .seed-text-field__value:is(textarea) {
     padding-inline: 0;
     min-height: 90px;
     width: 100%;
 }
-.seed-text-field__value {
-    background: none;
-    border: none;
-    outline: none;
-    resize: none;
-    flex-grow: 1;
-    height: 100%;
-    color: var(--seed-color-fg-neutral);
-}
 .seed-text-field__value::placeholder {
     color: var(--seed-color-fg-placeholder);
 }

package/vars/component/badge.d.ts

@@ -189,7 +189,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-warning-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral)"
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
       }
     }
   },

package/vars/component/badge.mjs

@@ -189,7 +189,7 @@ export const vars = {
         "color": "var(--seed-color-bg-warning-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral)"
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
       }
     }
   },

package/vars/component/checkbox.d.ts

@@ -7,106 +7,24 @@ export declare const vars: {
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
-    }
-  },
-  "weightDefault": {
-    "enabled": {
-      "label": {
-        "fontWeight": "var(--seed-font-weight-regular)"
-      }
-    }
-  },
-  "weightStronger": {
-    "enabled": {
-      "label": {
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    }
-  },
-  "variantSquare": {
-    "enabled": {
-      "control": {
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "strokeWidth": "1px"
-      }
-    },
-    "enabledSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
     },
     "disabled": {
-      "control": {
-        "color": "var(--seed-color-bg-disabled)",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "disabledSelected": {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "variantGhost": {
+  "weightRegular": {
     "enabled": {
-      "icon": {
-        "color": "var(--seed-color-fg-placeholder)"
-      }
-    },
-    "enabledSelected": {
-      "icon": {
-        "color": "var(--seed-color-fg-brand)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-palette-carrot-200)"
-      }
-    },
-    "disabled": {
       "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       }
-    },
-    "disabledSelected": {
+    }
+  },
+  "weightBold": {
+    "enabled": {
       "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
+        "fontWeight": "var(--seed-font-weight-bold)"
       }
     }
   },
@@ -118,10 +36,6 @@ export declare const vars: {
       "label": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x5)",
-        "cornerRadius": "var(--seed-radius-r1)"
       }
     }
   },
@@ -133,38 +47,6 @@ export declare const vars: {
       "label": {
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x6)",
-        "cornerRadius": "var(--seed-radius-r1)"
-      }
-    }
-  },
-  "variantSquareSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "12px"
-      }
-    }
-  },
-  "variantSquareSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "18px"
       }
     }
   }

package/vars/component/checkbox.mjs

@@ -7,106 +7,24 @@ export const vars = {
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
-    }
-  },
-  "weightDefault": {
-    "enabled": {
-      "label": {
-        "fontWeight": "var(--seed-font-weight-regular)"
-      }
-    }
-  },
-  "weightStronger": {
-    "enabled": {
-      "label": {
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    }
-  },
-  "variantSquare": {
-    "enabled": {
-      "control": {
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "strokeWidth": "1px"
-      }
-    },
-    "enabledSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
     },
     "disabled": {
-      "control": {
-        "color": "var(--seed-color-bg-disabled)",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "disabledSelected": {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
-  "variantGhost": {
+  "weightRegular": {
     "enabled": {
-      "icon": {
-        "color": "var(--seed-color-fg-placeholder)"
-      }
-    },
-    "enabledSelected": {
-      "icon": {
-        "color": "var(--seed-color-fg-brand)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-palette-carrot-200)"
-      }
-    },
-    "disabled": {
       "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       }
-    },
-    "disabledSelected": {
+    }
+  },
+  "weightBold": {
+    "enabled": {
       "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
+        "fontWeight": "var(--seed-font-weight-bold)"
       }
     }
   },
@@ -118,10 +36,6 @@ export const vars = {
       "label": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x5)",
-        "cornerRadius": "var(--seed-radius-r1)"
       }
     }
   },
@@ -133,38 +47,6 @@ export const vars = {
       "label": {
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x6)",
-        "cornerRadius": "var(--seed-radius-r1)"
-      }
-    }
-  },
-  "variantSquareSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "12px"
-      }
-    }
-  },
-  "variantSquareSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "18px"
       }
     }
   }