@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.2

package/recipes/checkmark.layered.css

@@ -1,21 +1,15 @@
 @layer seed-components {
   .seed-checkmark__root {
-    margin-top: var(--checkmark-margin-top, 0);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
     flex: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     position: relative;
   }
 
   .seed-checkmark__icon {
-    text-align: center;
-    overflow: initial;
-    margin: auto;
-    display: none;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
   }
 
   .seed-checkmark__root--variant_square {
@@ -24,110 +18,129 @@
     border-color: var(--seed-color-stroke-neutral-weak);
   }
 
-  .seed-checkmark__root--variant_square.seed-checkmark__root--checked_true, .seed-checkmark__root--variant_square.seed-checkmark__root--indeterminate_true {
-    border-width: 0;
+  .seed-checkmark__icon--variant_ghost {
+    color: var(--seed-color-fg-placeholder);
+    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   }
 
-  .seed-checkmark__root--variant_square:not(.seed-checkmark__root--disabled_true):active {
-    background: var(--seed-color-bg-transparent-pressed);
+  .seed-checkmark__root--size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    border-radius: var(--seed-radius-r1);
   }
 
-  .seed-checkmark__root--variant_square.seed-checkmark__root--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    border-color: var(--seed-color-stroke-neutral-muted);
+  .seed-checkmark__root--size_large {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    border-radius: var(--seed-radius-r1);
   }
 
-  .seed-checkmark__icon--variant_square.seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_square.seed-checkmark__icon--indeterminate_true {
-    display: block;
+  .seed-checkmark__icon--variant_square-size_medium {
+    width: 12px;
+    height: 12px;
   }
 
-  .seed-checkmark__icon--variant_square.seed-checkmark__icon--disabled_true.seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_square.seed-checkmark__icon--disabled_true.seed-checkmark__icon--indeterminate_true {
-    color: var(--seed-color-fg-disabled);
+  .seed-checkmark__icon--variant_square-size_large, .seed-checkmark__icon--variant_ghost-size_medium {
+    width: 14px;
+    height: 14px;
   }
 
-  .seed-checkmark__root--variant_ghost:not(.seed-checkmark__root--disabled_true):active {
-    background: var(--seed-color-bg-transparent-pressed);
+  .seed-checkmark__icon--variant_ghost-size_large {
+    width: 18px;
+    height: 18px;
   }
 
-  .seed-checkmark__icon--variant_ghost {
-    color: var(--seed-color-fg-placeholder);
-    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    display: block;
+  .seed-checkmark__icon--variant_square-checked_false-indeterminate_false {
+    opacity: 0;
   }
 
-  .seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true, .seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true.seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true.seed-checkmark__icon--indeterminate_true {
-    color: var(--seed-color-fg-disabled);
+  .seed-checkmark__root--variant_square-checked_true-disabled_false, .seed-checkmark__root--variant_square-indeterminate_true-disabled_false {
+    border-width: 0;
+    border-color: #0000;
   }
 
-  .seed-checkmark__root--size_large {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
+  .seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid);
   }
 
-  .seed-checkmark__root--size_medium {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
+  .seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
+    color: var(--seed-color-palette-static-white);
   }
 
-  .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true, .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true {
-    background: var(--seed-color-bg-neutral-inverted);
+  .seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted);
   }
 
-  .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true:active, .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
+  .seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted);
   }
 
-  .seed-checkmark__icon--variant_square-tone_neutral:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_square-tone_neutral:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--indeterminate_true {
-    color: var(--seed-color-fg-neutral-inverted);
+  .seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid);
   }
 
-  .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true, .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true {
-    background: var(--seed-color-bg-brand-solid);
+  .seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
+    color: var(--seed-color-palette-static-white);
   }
 
-  .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true:active, .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true:active {
-    background: var(--seed-color-bg-brand-solid-pressed);
+  .seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted);
   }
 
-  .seed-checkmark__icon--variant_square-tone_brand:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_square-tone_brand:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--indeterminate_true {
-    color: var(--seed-color-palette-static-white);
+  .seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted);
   }
 
-  .seed-checkmark__root--variant_ghost-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true:active, .seed-checkmark__root--variant_ghost-tone_neutral:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true:active {
-    background: var(--seed-color-palette-gray-200);
+  .seed-checkmark__root--variant_square-disabled_true {
+    background-color: var(--seed-color-bg-disabled);
+    border-color: var(--seed-color-stroke-neutral-muted);
+  }
+
+  .seed-checkmark__icon--variant_square-disabled_true, .seed-checkmark__icon--variant_square-checked_true-disabled_true, .seed-checkmark__icon--variant_square-indeterminate_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
   }
 
-  .seed-checkmark__icon--variant_ghost-tone_neutral:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_ghost-tone_neutral:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--indeterminate_true {
+  .seed-checkmark__icon--variant_ghost-tone_brand-checked_true-disabled_false {
+    color: var(--seed-color-fg-brand);
+  }
+
+  .seed-checkmark__icon--variant_ghost-tone_neutral-checked_true-disabled_false {
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-checkmark__root--variant_ghost-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--checked_true:active, .seed-checkmark__root--variant_ghost-tone_brand:not(.seed-checkmark__root--disabled_true).seed-checkmark__root--indeterminate_true:active {
-    background: var(--seed-color-palette-carrot-200);
+  .seed-checkmark__icon--variant_ghost-disabled_true, .seed-checkmark__icon--variant_ghost-checked_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
   }
 
-  .seed-checkmark__icon--variant_ghost-tone_brand:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--checked_true, .seed-checkmark__icon--variant_ghost-tone_brand:not(.seed-checkmark__icon--disabled_true).seed-checkmark__icon--indeterminate_true {
-    color: var(--seed-color-fg-brand);
+  .seed-checkmark__root--variant_square-pressed_true-checked_false-indeterminate_false-disabled_false {
+    background-color: var(--seed-color-bg-transparent-pressed);
   }
 
-  .seed-checkmark__icon--size_medium-variant_ghost {
-    width: 14px;
-    height: 14px;
+  .seed-checkmark__root--variant_square-tone_brand-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid-pressed);
   }
 
-  .seed-checkmark__icon--size_large-variant_ghost {
-    width: 18px;
-    height: 18px;
+  .seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed);
   }
 
-  .seed-checkmark__icon--size_medium-variant_square {
-    width: 12px;
-    height: 12px;
+  .seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid-pressed);
   }
 
-  .seed-checkmark__icon--size_large-variant_square {
-    width: 14px;
-    height: 14px;
+  .seed-checkmark__root--variant_square-tone_neutral-pressed_true-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+  }
+
+  .seed-checkmark__root--variant_ghost-pressed_true-checked_false-indeterminate_false-disabled_false {
+    background-color: var(--seed-color-bg-transparent-pressed);
+  }
+
+  .seed-checkmark__root--variant_ghost-tone_brand-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-palette-carrot-200);
+  }
+
+  .seed-checkmark__root--variant_ghost-tone_neutral-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-palette-gray-200);
   }
 }

package/recipes/checkmark.layered.mjs

@@ -15,41 +15,159 @@ const checkmarkSlotNames = [
 const defaultVariant = {
   "variant": "square",
   "tone": "brand",
-  "size": "medium"
+  "size": "medium",
+  "checked": false,
+  "disabled": false,
+  "indeterminate": false,
+  "pressed": false
 };
 
 const compoundVariants = [
   {
     "variant": "square",
-    "tone": "neutral"
+    "size": "medium"
   },
   {
     "variant": "square",
-    "tone": "brand"
+    "size": "large"
   },
   {
     "variant": "ghost",
-    "tone": "neutral"
+    "size": "medium"
   },
   {
     "variant": "ghost",
-    "tone": "brand"
+    "size": "large"
   },
   {
-    "size": "medium",
-    "variant": "ghost"
+    "variant": "square",
+    "checked": false,
+    "indeterminate": false
+  },
+  {
+    "variant": "square",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "indeterminate": true,
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "tone": "brand",
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "large",
-    "variant": "ghost"
+    "variant": "ghost",
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "pressed": true,
+    "checked": false,
+    "indeterminate": false,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "medium",
-    "variant": "square"
+    "variant": "square",
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "large",
-    "variant": "square"
+    "variant": "square",
+    "tone": "brand",
+    "pressed": true,
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "pressed": true,
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "pressed": true,
+    "checked": false,
+    "indeterminate": false,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "tone": "brand",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   }
 ];
 
@@ -59,12 +177,28 @@ export const checkmarkVariantMap = {
     "ghost"
   ],
   "tone": [
-    "neutral",
-    "brand"
+    "brand",
+    "neutral"
   ],
   "size": [
-    "large",
-    "medium"
+    "medium",
+    "large"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "indeterminate": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
   ]
 };
 

package/recipes/checkmark.mjs

@@ -15,41 +15,159 @@ const checkmarkSlotNames = [
 const defaultVariant = {
   "variant": "square",
   "tone": "brand",
-  "size": "medium"
+  "size": "medium",
+  "checked": false,
+  "disabled": false,
+  "indeterminate": false,
+  "pressed": false
 };
 
 const compoundVariants = [
   {
     "variant": "square",
-    "tone": "neutral"
+    "size": "medium"
   },
   {
     "variant": "square",
-    "tone": "brand"
+    "size": "large"
   },
   {
     "variant": "ghost",
-    "tone": "neutral"
+    "size": "medium"
   },
   {
     "variant": "ghost",
-    "tone": "brand"
+    "size": "large"
   },
   {
-    "size": "medium",
-    "variant": "ghost"
+    "variant": "square",
+    "checked": false,
+    "indeterminate": false
+  },
+  {
+    "variant": "square",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "indeterminate": true,
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "tone": "brand",
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "large",
-    "variant": "ghost"
+    "variant": "ghost",
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "variant": "square",
+    "pressed": true,
+    "checked": false,
+    "indeterminate": false,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "brand",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "medium",
-    "variant": "square"
+    "variant": "square",
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   },
   {
-    "size": "large",
-    "variant": "square"
+    "variant": "square",
+    "tone": "brand",
+    "pressed": true,
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "pressed": true,
+    "indeterminate": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "pressed": true,
+    "checked": false,
+    "indeterminate": false,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "tone": "brand",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "variant": "ghost",
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
   }
 ];
 
@@ -59,12 +177,28 @@ export const checkmarkVariantMap = {
     "ghost"
   ],
   "tone": [
-    "neutral",
-    "brand"
+    "brand",
+    "neutral"
   ],
   "size": [
-    "large",
-    "medium"
+    "medium",
+    "large"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "indeterminate": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
   ]
 };
 

package/recipes/progress-circle.css

@@ -21,6 +21,21 @@
   );
 }
 
+/* size 18: outer r=9, inner r=7 — used inside action-button (large) loading state */
+.seed-progress-circle__root--size_18 {
+  clip-path: path("M9 0 A9 9 0 1 1 9 18 A9 9 0 1 1 9 0 Z M9 2 A7 7 0 1 0 9 16 A7 7 0 1 0 9 2 Z");
+}
+
+/* size 16: outer r=8, inner r=6 — used inside action-button (medium) loading state */
+.seed-progress-circle__root--size_16 {
+  clip-path: path("M8 0 A8 8 0 1 1 8 16 A8 8 0 1 1 8 0 Z M8 2 A6 6 0 1 0 8 14 A6 6 0 1 0 8 2 Z");
+}
+
+/* size 14: outer r=7, inner r=5 — used inside action-button (xsmall/small) loading state */
+.seed-progress-circle__root--size_14 {
+  clip-path: path("M7 0 A7 7 0 1 1 7 14 A7 7 0 1 1 7 0 Z M7 2 A5 5 0 1 0 7 12 A5 5 0 1 0 7 2 Z");
+}
+
 .seed-progress-circle__cap {
   position: absolute;
   border-radius: 50%;
@@ -53,3 +68,13 @@
 .seed-progress-circle__cap--tone_staticWhite {
   background: var(--seed-color-palette-static-white);
 }
+
+/* inherit: inherits --track-color / --range-color from parent (e.g. action-button) */
+.seed-progress-circle__root--tone_inherit {
+  background: var(--track-color);
+}
+
+.seed-progress-circle__range--tone_inherit,
+.seed-progress-circle__cap--tone_inherit {
+  background: var(--range-color);
+}

package/recipes/progress-circle.d.ts

@@ -4,11 +4,11 @@ declare interface ProgressCircleVariant {
   /**
    * @default "neutral"
    */
-  tone: "neutral" | "brand" | "staticWhite";
+  tone: "neutral" | "brand" | "staticWhite" | "inherit";
   /**
    * @default "40"
    */
-  size: "24" | "40";
+  size: "14" | "16" | "18" | "24" | "40";
 }
 
 declare type ProgressCircleVariantMap = {

package/recipes/progress-circle.mjs

@@ -16,8 +16,8 @@ const defaultVariant = {
 const compoundVariants = [];
 
 export const progressCircleVariantMap = {
-  tone: ["neutral", "brand", "staticWhite"],
-  size: ["24", "40"],
+  tone: ["neutral", "brand", "staticWhite", "inherit"],
+  size: ["14", "16", "18", "24", "40"],
 };
 
 export const progressCircleVariantKeys = Object.keys(progressCircleVariantMap);