@seed-design/css 0.0.1-rc.0

package/vars/color/palette.mjs

@@ -0,0 +1,78 @@
+export const blue100 = "var(--seed-color-palette-blue-100)";
+export const blue200 = "var(--seed-color-palette-blue-200)";
+export const blue300 = "var(--seed-color-palette-blue-300)";
+export const blue400 = "var(--seed-color-palette-blue-400)";
+export const blue500 = "var(--seed-color-palette-blue-500)";
+export const blue600 = "var(--seed-color-palette-blue-600)";
+export const blue700 = "var(--seed-color-palette-blue-700)";
+export const blue800 = "var(--seed-color-palette-blue-800)";
+export const blue900 = "var(--seed-color-palette-blue-900)";
+export const blue1000 = "var(--seed-color-palette-blue-1000)";
+export const carrot100 = "var(--seed-color-palette-carrot-100)";
+export const carrot200 = "var(--seed-color-palette-carrot-200)";
+export const carrot300 = "var(--seed-color-palette-carrot-300)";
+export const carrot400 = "var(--seed-color-palette-carrot-400)";
+export const carrot500 = "var(--seed-color-palette-carrot-500)";
+export const carrot600 = "var(--seed-color-palette-carrot-600)";
+export const carrot700 = "var(--seed-color-palette-carrot-700)";
+export const carrot800 = "var(--seed-color-palette-carrot-800)";
+export const carrot900 = "var(--seed-color-palette-carrot-900)";
+export const carrot1000 = "var(--seed-color-palette-carrot-1000)";
+export const gray00 = "var(--seed-color-palette-gray-00)";
+export const gray100 = "var(--seed-color-palette-gray-100)";
+export const gray200 = "var(--seed-color-palette-gray-200)";
+export const gray300 = "var(--seed-color-palette-gray-300)";
+export const gray400 = "var(--seed-color-palette-gray-400)";
+export const gray500 = "var(--seed-color-palette-gray-500)";
+export const gray600 = "var(--seed-color-palette-gray-600)";
+export const gray700 = "var(--seed-color-palette-gray-700)";
+export const gray800 = "var(--seed-color-palette-gray-800)";
+export const gray900 = "var(--seed-color-palette-gray-900)";
+export const gray1000 = "var(--seed-color-palette-gray-1000)";
+export const green100 = "var(--seed-color-palette-green-100)";
+export const green200 = "var(--seed-color-palette-green-200)";
+export const green300 = "var(--seed-color-palette-green-300)";
+export const green400 = "var(--seed-color-palette-green-400)";
+export const green500 = "var(--seed-color-palette-green-500)";
+export const green600 = "var(--seed-color-palette-green-600)";
+export const green700 = "var(--seed-color-palette-green-700)";
+export const green800 = "var(--seed-color-palette-green-800)";
+export const green900 = "var(--seed-color-palette-green-900)";
+export const green1000 = "var(--seed-color-palette-green-1000)";
+export const purple100 = "var(--seed-color-palette-purple-100)";
+export const purple200 = "var(--seed-color-palette-purple-200)";
+export const purple300 = "var(--seed-color-palette-purple-300)";
+export const purple400 = "var(--seed-color-palette-purple-400)";
+export const purple500 = "var(--seed-color-palette-purple-500)";
+export const purple600 = "var(--seed-color-palette-purple-600)";
+export const purple700 = "var(--seed-color-palette-purple-700)";
+export const purple800 = "var(--seed-color-palette-purple-800)";
+export const purple900 = "var(--seed-color-palette-purple-900)";
+export const purple1000 = "var(--seed-color-palette-purple-1000)";
+export const red100 = "var(--seed-color-palette-red-100)";
+export const red200 = "var(--seed-color-palette-red-200)";
+export const red300 = "var(--seed-color-palette-red-300)";
+export const red400 = "var(--seed-color-palette-red-400)";
+export const red500 = "var(--seed-color-palette-red-500)";
+export const red600 = "var(--seed-color-palette-red-600)";
+export const red700 = "var(--seed-color-palette-red-700)";
+export const red800 = "var(--seed-color-palette-red-800)";
+export const red900 = "var(--seed-color-palette-red-900)";
+export const red1000 = "var(--seed-color-palette-red-1000)";
+export const staticBlack = "var(--seed-color-palette-static-black)";
+export const staticWhite = "var(--seed-color-palette-static-white)";
+export const staticBlackAlpha50 = "var(--seed-color-palette-static-black-alpha-50)";
+export const staticBlackAlpha200 = "var(--seed-color-palette-static-black-alpha-200)";
+export const staticBlackAlpha500 = "var(--seed-color-palette-static-black-alpha-500)";
+export const staticWhiteAlpha200 = "var(--seed-color-palette-static-white-alpha-200)";
+export const staticWhiteAlpha800 = "var(--seed-color-palette-static-white-alpha-800)";
+export const yellow100 = "var(--seed-color-palette-yellow-100)";
+export const yellow200 = "var(--seed-color-palette-yellow-200)";
+export const yellow300 = "var(--seed-color-palette-yellow-300)";
+export const yellow400 = "var(--seed-color-palette-yellow-400)";
+export const yellow500 = "var(--seed-color-palette-yellow-500)";
+export const yellow600 = "var(--seed-color-palette-yellow-600)";
+export const yellow700 = "var(--seed-color-palette-yellow-700)";
+export const yellow800 = "var(--seed-color-palette-yellow-800)";
+export const yellow900 = "var(--seed-color-palette-yellow-900)";
+export const yellow1000 = "var(--seed-color-palette-yellow-1000)";

package/vars/color/stroke.d.ts

@@ -0,0 +1,10 @@
+export declare const brand = "var(--seed-color-stroke-brand)";
+export declare const control = "var(--seed-color-stroke-control)";
+export declare const critical = "var(--seed-color-stroke-critical)";
+export declare const field = "var(--seed-color-stroke-field)";
+export declare const informative = "var(--seed-color-stroke-informative)";
+export declare const neutral = "var(--seed-color-stroke-neutral)";
+export declare const positive = "var(--seed-color-stroke-positive)";
+export declare const fieldFocused = "var(--seed-color-stroke-field-focused)";
+export declare const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
+export declare const onImage = "var(--seed-color-stroke-on-image)";

package/vars/color/stroke.mjs

@@ -0,0 +1,10 @@
+export const brand = "var(--seed-color-stroke-brand)";
+export const control = "var(--seed-color-stroke-control)";
+export const critical = "var(--seed-color-stroke-critical)";
+export const field = "var(--seed-color-stroke-field)";
+export const informative = "var(--seed-color-stroke-informative)";
+export const neutral = "var(--seed-color-stroke-neutral)";
+export const positive = "var(--seed-color-stroke-positive)";
+export const fieldFocused = "var(--seed-color-stroke-field-focused)";
+export const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
+export const onImage = "var(--seed-color-stroke-on-image)";

package/vars/component/action-button.d.ts

@@ -0,0 +1,491 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-d4)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "variantBrandSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
+        "rangeColor": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    }
+  },
+  "variantNeutralSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
+        "rangeColor": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  "variantNeutralWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "variantCriticalSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
+        "rangeColor": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid-pressed)"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeColor": "var(--seed-color-stroke-neutral)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeColor": "var(--seed-color-stroke-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)"
+      }
+    }
+  },
+  "variantBrandOutline": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeColor": "var(--seed-color-stroke-neutral)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-carrot-200)",
+        "rangeColor": "var(--seed-color-bg-brand-solid)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeColor": "var(--seed-color-stroke-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)"
+      }
+    }
+  },
+  "sizeXsmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeXsmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeXsmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x8)",
+        "paddingX": "var(--seed-dimension-x1_5)",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x9)",
+        "paddingX": "var(--seed-dimension-x2)",
+        "paddingY": "var(--seed-dimension-x2)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "progressCircle": {
+        "size": "16px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x10)",
+        "paddingX": "var(--seed-dimension-x2_5)",
+        "paddingY": "var(--seed-dimension-x2_5)"
+      },
+      "icon": {
+        "size": "18px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      },
+      "progressCircle": {
+        "size": "18px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeLargeLayoutWithText": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x5)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "suffixIcon": {
+        "size": "22px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      }
+    }
+  },
+  "sizeLargeLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x13)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "icon": {
+        "size": "22px"
+      }
+    }
+  }
+}