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

package/recipes/bottom-sheet.layered.css

@@ -1,7 +1,7 @@
 @layer seed-components {
   .seed-bottom-sheet__positioner {
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -13,8 +13,9 @@
   }
 
   .seed-bottom-sheet__backdrop {
+    opacity: 0;
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     top: 0;
     right: 0;
@@ -22,43 +23,17 @@
     left: 0;
   }
 
-  .seed-bottom-sheet__backdrop.seed-bottom-sheet__backdrop--snap-points_true, .seed-bottom-sheet__backdrop:not([data-state="open"]):not([data-open])[data-snap-points="true"]:not([data-snap-points-overlay="true"]) {
-    opacity: 0;
-  }
-
-  .seed-bottom-sheet__backdrop.seed-bottom-sheet__backdrop--state_open.seed-bottom-sheet__backdrop--snap-points-overlay_true, .seed-bottom-sheet__backdrop.seed-bottom-sheet__backdrop--open_true.seed-bottom-sheet__backdrop--snap-points-overlay_true {
-    opacity: 1;
-  }
-
   .seed-bottom-sheet__content {
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
     padding-bottom: env(safe-area-inset-bottom);
-    transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
     flex-direction: column;
     flex: 1;
     display: flex;
     position: relative;
-  }
-
-  .seed-bottom-sheet__content.seed-bottom-sheet__content--snap-points_true {
-    transform: translate3d(0, var(--initial-transform, 100%), 0);
-  }
-
-  .seed-bottom-sheet__content.seed-bottom-sheet__content--delayed-snap-points_true {
-    transform: translate3d(0, var(--snap-point-height, 0), 0);
-  }
-
-  .seed-bottom-sheet__content:after {
-    background: inherit;
-    z-index: -1;
-    height: 200vh;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
+    transform: translate3d(0, 100%, 0);
   }
 
   .seed-bottom-sheet__header {
@@ -88,19 +63,8 @@
   }
 
   .seed-bottom-sheet__body {
-    --seed-box-padding-x: var(--seed-dimension-spacing-x-global-gutter);
-    --seed-box-height: auto;
-    --seed-box-min-height: auto;
-    --seed-box-max-height: none;
-    --seed-box-justify-content: flex-start;
-    --seed-box-align-items: stretch;
-    padding-left: var(--seed-box-padding-x);
-    padding-right: var(--seed-box-padding-x);
-    height: var(--seed-box-height);
-    min-height: var(--seed-box-min-height);
-    max-height: var(--seed-box-max-height);
-    justify-content: var(--seed-box-justify-content);
-    align-items: var(--seed-box-align-items);
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
     flex-direction: column;
     display: flex;
   }
@@ -115,29 +79,12 @@
   }
 
   .seed-bottom-sheet__closeButton {
-    top: var(--seed-dimension-x6);
-    right: var(--seed-dimension-x4);
-    border-radius: var(--seed-radius-full);
-    background: var(--seed-color-bg-neutral-weak);
-    --seed-icon-size: 14px;
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    border: none;
     justify-content: center;
     align-items: center;
-    width: 28px;
-    height: 28px;
     display: flex;
     position: absolute;
   }
 
-  .seed-bottom-sheet__closeButton:after {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    bottom: -8px;
-    left: -8px;
-  }
-
   .seed-bottom-sheet__header--headerAlign_left {
     justify-content: flex-start;
   }
@@ -147,11 +94,6 @@
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
   }
 
-  .seed-bottom-sheet__title--headerAlign_left.seed-bottom-sheet__title--show-close-button_true {
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: 56px;
-  }
-
   .seed-bottom-sheet__header--headerAlign_center {
     text-align: center;
     justify-content: center;
@@ -161,50 +103,4 @@
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
   }
-
-  .seed-bottom-sheet__title--headerAlign_center.seed-bottom-sheet__title--show-close-button_true {
-    padding-left: 56px;
-    padding-right: 56px;
-  }
-
-  .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--state_open.seed-bottom-sheet__backdrop--snap-points_false:not([data-animation-done="true"]), .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--open_true.seed-bottom-sheet__backdrop--snap-points_false:not([data-animation-done="true"]) {
-    animation-name: fade-in;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter);
-  }
-
-  .seed-bottom-sheet__backdrop--skipAnimation_false:not(.seed-bottom-sheet__backdrop--state_open):not(.seed-bottom-sheet__backdrop--open_true)[data-snap-points="false"] {
-    animation-name: fade-out;
-    animation-duration: var(--seed-duration-d4);
-    animation-timing-function: var(--seed-timing-function-exit);
-  }
-
-  .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--state_open.seed-bottom-sheet__backdrop--snap-points_true[data-should-overlay-animate="true"]:not([data-animation-done="true"]), .seed-bottom-sheet__backdrop--skipAnimation_false.seed-bottom-sheet__backdrop--open_true.seed-bottom-sheet__backdrop--snap-points_true[data-should-overlay-animate="true"]:not([data-animation-done="true"]) {
-    animation-name: fade-in;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter);
-  }
-
-  .seed-bottom-sheet__content--skipAnimation_false {
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-  }
-
-  .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--state_open.seed-bottom-sheet__content--snap-points_false:not([data-animation-done="true"]), .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--open_true.seed-bottom-sheet__content--snap-points_false:not([data-animation-done="true"]) {
-    animation-name: drawer-slide-from-bottom;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-  }
-
-  .seed-bottom-sheet__content--skipAnimation_false:not(.seed-bottom-sheet__content--state_open):not(.seed-bottom-sheet__content--open_true)[data-snap-points="false"] {
-    animation-name: drawer-slide-to-bottom;
-    animation-duration: var(--seed-duration-d4);
-    animation-timing-function: var(--seed-timing-function-exit);
-  }
-
-  .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--state_open.seed-bottom-sheet__content--delayed-snap-points_true:not([data-animation-done="true"]), .seed-bottom-sheet__content--skipAnimation_false.seed-bottom-sheet__content--open_true.seed-bottom-sheet__content--delayed-snap-points_true:not([data-animation-done="true"]) {
-    animation-name: drawer-slide-from-bottom;
-    animation-duration: var(--seed-duration-d6);
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-  }
 }

package/recipes/bottom-sheet.layered.mjs

@@ -53,6 +53,7 @@ export const bottomSheetVariantMap = {
     "center"
   ],
   "skipAnimation": [
+    true,
     false
   ]
 };

package/recipes/bottom-sheet.mjs

@@ -53,6 +53,7 @@ export const bottomSheetVariantMap = {
     "center"
   ],
   "skipAnimation": [
+    true,
     false
   ]
 };

package/recipes/checkbox-group.d.ts

@@ -1,7 +1,8 @@
 declare interface CheckboxGroupVariant {
   
   disabled?: boolean;
-  loading?: boolean;}
+  loading?: boolean;
+  checked?: boolean;}
 
 declare type CheckboxGroupVariantMap = {
   [key in keyof CheckboxGroupVariant]: Array<CheckboxGroupVariant[key]>;

package/recipes/checkbox-group.layered.mjs

@@ -22,6 +22,9 @@ export const checkboxGroupVariantMap = {
   ],
   "loading": [
     true
+  ],
+  "checked": [
+    true
   ]
 };
 

package/recipes/checkbox-group.mjs

@@ -22,6 +22,9 @@ export const checkboxGroupVariantMap = {
   ],
   "loading": [
     true
+  ],
+  "checked": [
+    true
   ]
 };
 

package/recipes/checkbox.css

@@ -1,37 +1,32 @@
 .seed-checkbox__root {
-    display: inline-flex;
-    align-items: flex-start;
+    display: flex;
+    align-items: center;
     position: relative;
-    max-width: 100%;
-    gap: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x2)
 }
 .seed-checkbox__label {
-    color: var(--seed-color-fg-neutral);
-}
-.seed-checkbox__label.seed-checkbox__label--disabled_true {
-    color: var(--seed-color-fg-disabled);
+    color: var(--seed-color-fg-neutral)
 }
 .seed-checkbox__label--weight_regular {
-    font-weight: var(--seed-font-weight-regular);
+    font-weight: var(--seed-font-weight-regular)
 }
 .seed-checkbox__label--weight_bold {
-    font-weight: var(--seed-font-weight-bold);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-checkbox__root--size_medium {
+    min-height: var(--seed-dimension-x8)
+}
+.seed-checkbox__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
 }
 .seed-checkbox__root--size_large {
-    min-height: var(--seed-dimension-x9);
-    --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
+    min-height: var(--seed-dimension-x9)
 }
 .seed-checkbox__label--size_large {
     font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
-}
-.seed-checkbox__root--size_medium {
-    min-height: var(--seed-dimension-x8);
-    --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
+    line-height: var(--seed-line-height-t5)
 }
-.seed-checkbox__label--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
+.seed-checkbox__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
 }

package/recipes/checkbox.d.ts

@@ -6,7 +6,11 @@ declare interface CheckboxVariant {
 /**
   * @default "medium"
   */
-  size: "large" | "medium";
+  size: "medium" | "large";
+/**
+  * @default false
+  */
+  disabled: boolean;
 }
 
 declare type CheckboxVariantMap = {

package/recipes/checkbox.layered.css

@@ -1,9 +1,8 @@
 @layer seed-components {
   .seed-checkbox__root {
-    align-items: flex-start;
+    align-items: center;
     gap: var(--seed-dimension-x2);
-    max-width: 100%;
-    display: inline-flex;
+    display: flex;
     position: relative;
   }
 
@@ -11,10 +10,6 @@
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-checkbox__label.seed-checkbox__label--disabled_true {
-    color: var(--seed-color-fg-disabled);
-  }
-
   .seed-checkbox__label--weight_regular {
     font-weight: var(--seed-font-weight-regular);
   }
@@ -23,25 +18,25 @@
     font-weight: var(--seed-font-weight-bold);
   }
 
+  .seed-checkbox__root--size_medium {
+    min-height: var(--seed-dimension-x8);
+  }
+
+  .seed-checkbox__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+
   .seed-checkbox__root--size_large {
     min-height: var(--seed-dimension-x9);
-    --checkmark-margin-top: calc((var(--seed-dimension-x9)  - var(--seed-dimension-x6)) / 2);
   }
 
   .seed-checkbox__label--size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
-    margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
-  }
-
-  .seed-checkbox__root--size_medium {
-    min-height: var(--seed-dimension-x8);
-    --checkmark-margin-top: calc((var(--seed-dimension-x8)  - var(--seed-dimension-x5)) / 2);
   }
 
-  .seed-checkbox__label--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
+  .seed-checkbox__label--disabled_true {
+    color: var(--seed-color-fg-disabled);
   }
 }

package/recipes/checkbox.layered.mjs

@@ -13,8 +13,9 @@ const checkboxSlotNames = [
 ];
 
 const defaultVariant = {
+  "weight": "regular",
   "size": "medium",
-  "weight": "regular"
+  "disabled": false
 };
 
 const compoundVariants = [];
@@ -25,8 +26,12 @@ export const checkboxVariantMap = {
     "bold"
   ],
   "size": [
-    "large",
-    "medium"
+    "medium",
+    "large"
+  ],
+  "disabled": [
+    true,
+    false
   ]
 };
 

package/recipes/checkbox.mjs

@@ -13,8 +13,9 @@ const checkboxSlotNames = [
 ];
 
 const defaultVariant = {
+  "weight": "regular",
   "size": "medium",
-  "weight": "regular"
+  "disabled": false
 };
 
 const compoundVariants = [];
@@ -25,8 +26,12 @@ export const checkboxVariantMap = {
     "bold"
   ],
   "size": [
-    "large",
-    "medium"
+    "medium",
+    "large"
+  ],
+  "disabled": [
+    true,
+    false
   ]
 };
 

package/recipes/checkmark.css

@@ -1,108 +1,130 @@
 .seed-checkmark__root {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: none;
-    margin-top: var(--checkmark-margin-top, 0);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-checkmark__icon {
-    display: none;
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    text-align: center;
-    overflow: initial;
+    position: absolute
 }
 .seed-checkmark__root--variant_square {
     border-width: 1px;
     border-style: solid;
-    border-color: var(--seed-color-stroke-neutral-weak);
+    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[data-checked], .seed-checkmark__icon--variant_square.seed-checkmark__icon--disabled_true[data-indeterminate] {
-    color: var(--seed-color-fg-disabled);
+.seed-checkmark__icon--variant_square-size_large {
+    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_medium {
+    width: 14px;
+    height: 14px
 }
-.seed-checkmark__icon--variant_ghost {
-    display: block;
-    color: var(--seed-color-fg-placeholder);
-    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+.seed-checkmark__icon--variant_ghost-size_large {
+    width: 18px;
+    height: 18px
 }
-.seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true {
-    color: var(--seed-color-fg-disabled);
+.seed-checkmark__icon--variant_square-checked_false-indeterminate_false {
+    opacity: 0
 }
-.seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true[data-checked], .seed-checkmark__icon--variant_ghost.seed-checkmark__icon--disabled_true[data-indeterminate] {
-    color: var(--seed-color-fg-disabled);
+.seed-checkmark__root--variant_square-checked_true-disabled_false {
+    border-width: 0px;
+    border-color: #00000000
 }
-.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-indeterminate_true-disabled_false {
+    border-width: 0px;
+    border-color: #00000000
 }
-.seed-checkmark__root--size_medium {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
+.seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid)
 }
-.seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true)[data-checked], .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true)[data-indeterminate] {
-    background: var(--seed-color-bg-neutral-inverted);
+.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)[data-checked]:active, .seed-checkmark__root--variant_square-tone_neutral:not(.seed-checkmark__root--disabled_true)[data-indeterminate]:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
+.seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted)
 }
-.seed-checkmark__icon--variant_square-tone_neutral:not(.seed-checkmark__icon--disabled_true)[data-checked], .seed-checkmark__icon--variant_square-tone_neutral:not(.seed-checkmark__icon--disabled_true)[data-indeterminate] {
-    color: var(--seed-color-fg-neutral-inverted);
+.seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted)
 }
-.seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true)[data-checked], .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true)[data-indeterminate] {
-    background: var(--seed-color-bg-brand-solid);
+.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)[data-checked]:active, .seed-checkmark__root--variant_square-tone_brand:not(.seed-checkmark__root--disabled_true)[data-indeterminate]:active {
-    background: var(--seed-color-bg-brand-solid-pressed);
+.seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
+    color: var(--seed-color-palette-static-white)
 }
-.seed-checkmark__icon--variant_square-tone_brand:not(.seed-checkmark__icon--disabled_true)[data-checked], .seed-checkmark__icon--variant_square-tone_brand:not(.seed-checkmark__icon--disabled_true)[data-indeterminate] {
-    color: var(--seed-color-palette-static-white);
+.seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted)
 }
-.seed-checkmark__root--variant_ghost-tone_neutral:not(.seed-checkmark__root--disabled_true)[data-checked]:active, .seed-checkmark__root--variant_ghost-tone_neutral:not(.seed-checkmark__root--disabled_true)[data-indeterminate]:active {
-    background: var(--seed-color-palette-gray-200);
+.seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted)
 }
-.seed-checkmark__icon--variant_ghost-tone_neutral:not(.seed-checkmark__icon--disabled_true)[data-checked], .seed-checkmark__icon--variant_ghost-tone_neutral:not(.seed-checkmark__icon--disabled_true)[data-indeterminate] {
-    color: var(--seed-color-fg-neutral);
+.seed-checkmark__root--variant_square-disabled_true {
+    background-color: var(--seed-color-bg-disabled);
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
-.seed-checkmark__root--variant_ghost-tone_brand:not(.seed-checkmark__root--disabled_true)[data-checked]:active, .seed-checkmark__root--variant_ghost-tone_brand:not(.seed-checkmark__root--disabled_true)[data-indeterminate]:active {
-    background: var(--seed-color-palette-carrot-200);
+.seed-checkmark__icon--variant_square-disabled_true {
+    color: var(--seed-color-fg-disabled)
 }
-.seed-checkmark__icon--variant_ghost-tone_brand:not(.seed-checkmark__icon--disabled_true)[data-checked], .seed-checkmark__icon--variant_ghost-tone_brand:not(.seed-checkmark__icon--disabled_true)[data-indeterminate] {
-    color: var(--seed-color-fg-brand);
+.seed-checkmark__icon--variant_square-checked_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
 }
-.seed-checkmark__icon--size_medium-variant_ghost {
-    width: 14px;
-    height: 14px;
+.seed-checkmark__icon--variant_square-indeterminate_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
 }
-.seed-checkmark__icon--size_large-variant_ghost {
-    width: 18px;
-    height: 18px;
+.seed-checkmark__icon--variant_ghost-tone_brand-checked_true-disabled_false {
+    color: var(--seed-color-fg-brand)
 }
-.seed-checkmark__icon--size_medium-variant_square {
-    width: 12px;
-    height: 12px;
+.seed-checkmark__icon--variant_ghost-tone_neutral-checked_true-disabled_false {
+    color: var(--seed-color-fg-neutral)
 }
-.seed-checkmark__icon--size_large-variant_square {
-    width: 14px;
-    height: 14px;
+.seed-checkmark__icon--variant_ghost-disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-checkmark__icon--variant_ghost-checked_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-checkmark__root--variant_square-pressed_true-checked_false-indeterminate_false-disabled_false {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-checkmark__root--variant_square-tone_brand-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid-pressed)
+}
+.seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+}
+.seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid-pressed)
+}
+.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.d.ts

@@ -6,11 +6,27 @@ declare interface CheckmarkVariant {
 /**
   * @default "brand"
   */
-  tone: "neutral" | "brand";
+  tone: "brand" | "neutral";
 /**
   * @default "medium"
   */
-  size: "large" | "medium";
+  size: "medium" | "large";
+/**
+  * @default false
+  */
+  checked: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  indeterminate: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
 }
 
 declare type CheckmarkVariantMap = {