npm - @seed-design/css - Versions diffs - 0.2.0 → 0.2.3 - Mend

@seed-design/css 0.2.0 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/all.css +333 -214
package/all.min.css +1 -1
package/package.json +1 -1
package/recipes/action-button.d.ts +3 -3
package/recipes/action-chip.d.ts +2 -2
package/recipes/action-sheet-item.d.ts +1 -1
package/recipes/app-bar-main.d.ts +4 -4
package/recipes/app-bar.d.ts +3 -3
package/recipes/app-screen.d.ts +4 -4
package/recipes/avatar.d.ts +1 -1
package/recipes/badge.d.ts +3 -3
package/recipes/bottom-sheet.d.ts +1 -1
package/recipes/callout.d.ts +1 -1
package/recipes/checkbox.css +5 -112
package/recipes/checkbox.d.ts +3 -7
package/recipes/checkbox.mjs +1 -31
package/recipes/checkmark.css +105 -0
package/recipes/checkmark.d.ts +28 -0
package/recipes/checkmark.mjs +65 -0
package/recipes/chip-tabs.css +42 -10
package/recipes/chip-tabs.d.ts +7 -3
package/recipes/chip-tabs.mjs +6 -0
package/recipes/chip.css +33 -33
package/recipes/chip.d.ts +3 -3
package/recipes/contextual-floating-button.d.ts +2 -2
package/recipes/control-chip.d.ts +2 -2
package/recipes/extended-action-sheet-item.d.ts +1 -1
package/recipes/extended-fab.d.ts +2 -2
package/recipes/identity-placeholder.d.ts +1 -1
package/recipes/inline-banner.d.ts +1 -1
package/recipes/link-content.d.ts +2 -2
package/recipes/list-item.css +102 -0
package/recipes/list-item.d.ts +24 -0
package/recipes/list-item.mjs +59 -0
package/recipes/manner-temp-badge.d.ts +1 -1
package/recipes/manner-temp.d.ts +1 -1
package/recipes/menu-sheet-item.d.ts +2 -2
package/recipes/notification-badge-positioner.d.ts +2 -2
package/recipes/notification-badge.d.ts +1 -1
package/recipes/page-banner.d.ts +2 -2
package/recipes/progress-circle.d.ts +1 -1
package/recipes/radio.css +29 -50
package/recipes/radio.d.ts +6 -2
package/recipes/radio.mjs +8 -3
package/recipes/radiomark.css +68 -0
package/recipes/radiomark.d.ts +24 -0
package/recipes/radiomark.mjs +43 -0
package/recipes/reaction-button.d.ts +1 -1
package/recipes/select-box.css +0 -68
package/recipes/select-box.d.ts +1 -1
package/recipes/select-box.mjs +0 -16
package/recipes/skeleton.d.ts +1 -1
package/recipes/snackbar.d.ts +1 -1
package/recipes/tabs.d.ts +3 -3
package/recipes/text-field.css +8 -9
package/recipes/text-field.d.ts +1 -1
package/recipes/text.d.ts +3 -3
package/recipes/toggle-button.d.ts +2 -2
package/vars/component/checkbox.d.ts +5 -123
package/vars/component/checkbox.mjs +5 -123
package/vars/component/checkmark.d.ts +121 -0
package/vars/component/checkmark.mjs +121 -0
package/vars/component/chip-tab.d.ts +70 -10
package/vars/component/chip-tab.mjs +70 -10
package/vars/component/chip-tablist.d.ts +10 -2
package/vars/component/chip-tablist.mjs +10 -2
package/vars/component/chip.d.ts +0 -91
package/vars/component/chip.mjs +0 -91
package/vars/component/index.d.ts +3 -0
package/vars/component/index.mjs +3 -0
package/vars/component/list-item.d.ts +72 -0
package/vars/component/list-item.mjs +72 -0
package/vars/component/radio.d.ts +28 -52
package/vars/component/radio.mjs +28 -52
package/vars/component/radiomark.d.ts +77 -0
package/vars/component/radiomark.mjs +77 -0
package/vars/component/select-box.d.ts +0 -47
package/vars/component/select-box.mjs +0 -47

package/vars/component/checkbox.mjs CHANGED Viewed

@@ -7,6 +7,11 @@ export const vars = {
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
     }
   },
   "weightDefault": {
@@ -23,93 +28,6 @@ export const vars = {
       }
     }
   },
-  "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": {
-    "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)"
-      }
-    },
-    "disabledSelected": {
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
   "sizeMedium": {
     "enabled": {
       "root": {
@@ -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"
       }
     }
   }

package/vars/component/checkmark.d.ts ADDED Viewed

@@ -0,0 +1,121 @@
+export declare const vars: {
+  "variantSquare": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "strokeWidth": "1px"
+      }
+    },
+    "enabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "pressedSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantGhost": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-placeholder)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "pressedSelected": {
+      "root": {
+        "color": "var(--seed-color-palette-carrot-200)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-r1)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "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/checkmark.mjs ADDED Viewed

@@ -0,0 +1,121 @@
+export const vars = {
+  "variantSquare": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "strokeWidth": "1px"
+      }
+    },
+    "enabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "pressedSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantGhost": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-placeholder)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "pressedSelected": {
+      "root": {
+        "color": "var(--seed-color-palette-carrot-200)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-r1)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "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/chip-tab.d.ts CHANGED Viewed

@@ -2,22 +2,84 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x2)",
-        "cornerRadius": "var(--seed-radius-full)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x3_5)",
         "minHeight": "36px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "fontSize": "var(--seed-font-size-t4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "minHeight": "40px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)"
       }
     }
   },
   "variantNeutralSolid": {
     "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
       "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "stroke": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "enabledPressed": {
@@ -58,8 +120,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-neutral-weak)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "fontWeight": "var(--seed-font-weight-medium)"
+        "color": "var(--seed-color-fg-neutral-muted)"
       }
     },
     "enabledPressed": {
@@ -72,8 +133,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "color": "var(--seed-color-palette-static-white)"
       }
     },
     "selectedPressed": {

package/vars/component/chip-tab.mjs CHANGED Viewed

@@ -2,22 +2,84 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x2)",
-        "cornerRadius": "var(--seed-radius-full)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x3_5)",
         "minHeight": "36px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "fontSize": "var(--seed-font-size-t4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "minHeight": "40px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)"
       }
     }
   },
   "variantNeutralSolid": {
     "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
       "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "stroke": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
       }
     },
     "enabledPressed": {
@@ -58,8 +120,7 @@ export const vars = {
         "color": "var(--seed-color-bg-neutral-weak)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "fontWeight": "var(--seed-font-weight-medium)"
+        "color": "var(--seed-color-fg-neutral-muted)"
       }
     },
     "enabledPressed": {
@@ -72,8 +133,7 @@ export const vars = {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)",
-        "fontWeight": "var(--seed-font-weight-bold)"
+        "color": "var(--seed-color-palette-static-white)"
       }
     },
     "selectedPressed": {

package/vars/component/chip-tablist.d.ts CHANGED Viewed

@@ -2,14 +2,22 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "paddingX": "var(--seed-dimension-x4)"
+        "paddingX": "var(--seed-dimension-x4)",
+        "gap": "8px"
       }
     }
   },
   "variantNeutralSolid": {
     "enabled": {
       "root": {
-        "gap": "0px"
+        "gap": "8px"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "gap": "8px"
       }
     }
   },

package/vars/component/chip-tablist.mjs CHANGED Viewed

@@ -2,14 +2,22 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "paddingX": "var(--seed-dimension-x4)"
+        "paddingX": "var(--seed-dimension-x4)",
+        "gap": "8px"
       }
     }
   },
   "variantNeutralSolid": {
     "enabled": {
       "root": {
-        "gap": "0px"
+        "gap": "8px"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "gap": "8px"
       }
     }
   },