@seed-design/lynx-css 0.1.0

package/recipes/checkmark.css

@@ -0,0 +1,131 @@
+.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)
+}
+.seed-checkmark__icon {
+    position: absolute
+}
+.seed-checkmark__root--variant_square {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-weak)
+}
+.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--size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    border-radius: var(--seed-radius-r1)
+}
+.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-size_medium {
+    width: 12px;
+    height: 12px
+}
+.seed-checkmark__icon--variant_square-size_large {
+    width: 14px;
+    height: 14px
+}
+.seed-checkmark__icon--variant_ghost-size_medium {
+    width: 14px;
+    height: 14px
+}
+.seed-checkmark__icon--variant_ghost-size_large {
+    width: 18px;
+    height: 18px
+}
+.seed-checkmark__icon--variant_square-checked_false-indeterminate_false {
+    opacity: 0
+}
+.seed-checkmark__root--variant_square-checked_true-disabled_false {
+    border-width: 0px;
+    border-color: #00000000
+}
+.seed-checkmark__root--variant_square-indeterminate_true-disabled_false {
+    border-width: 0px;
+    border-color: #00000000
+}
+.seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid)
+}
+.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-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-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-indeterminate_true-disabled_false {
+    background-color: 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_neutral-indeterminate_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted)
+}
+.seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.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 {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-checkmark__icon--variant_square-checked_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-checkmark__icon--variant_square-indeterminate_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.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__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

@@ -0,0 +1,48 @@
+declare interface CheckmarkVariant {
+  /**
+  * @default "square"
+  */
+  variant: "square" | "ghost";
+/**
+  * @default "brand"
+  */
+  tone: "brand" | "neutral";
+/**
+  * @default "medium"
+  */
+  size: "medium" | "large";
+/**
+  * @default false
+  */
+  checked: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  indeterminate: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type CheckmarkVariantMap = {
+  [key in keyof CheckmarkVariant]: Array<CheckmarkVariant[key]>;
+};
+
+export declare type CheckmarkVariantProps = Partial<CheckmarkVariant>;
+
+export declare type CheckmarkSlotName = "root" | "icon";
+
+export declare const checkmarkVariantMap: CheckmarkVariantMap;
+
+export declare const checkmark: ((
+  props?: CheckmarkVariantProps,
+) => Record<CheckmarkSlotName, string>) & {
+  splitVariantProps: <T extends CheckmarkVariantProps>(
+    props: T,
+  ) => [CheckmarkVariantProps, Omit<T, keyof CheckmarkVariantProps>];
+}

package/recipes/checkmark.mjs

@@ -0,0 +1,220 @@
+import './checkmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const checkmarkSlotNames = [
+  [
+    "root",
+    "seed-checkmark__root"
+  ],
+  [
+    "icon",
+    "seed-checkmark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "square",
+  "tone": "brand",
+  "size": "medium",
+  "checked": false,
+  "disabled": false,
+  "indeterminate": false,
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "variant": "square",
+    "size": "medium"
+  },
+  {
+    "variant": "square",
+    "size": "large"
+  },
+  {
+    "variant": "ghost",
+    "size": "medium"
+  },
+  {
+    "variant": "ghost",
+    "size": "large"
+  },
+  {
+    "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
+  },
+  {
+    "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
+  },
+  {
+    "variant": "square",
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "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
+  }
+];
+
+export const checkmarkVariantMap = {
+  "variant": [
+    "square",
+    "ghost"
+  ],
+  "tone": [
+    "brand",
+    "neutral"
+  ],
+  "size": [
+    "medium",
+    "large"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "indeterminate": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const checkmarkVariantKeys = Object.keys(checkmarkVariantMap);
+
+export function checkmark(props) {
+  return Object.fromEntries(
+    checkmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(checkmark, { splitVariantProps: (props) => splitVariantProps(props, checkmarkVariantMap) });
+
+// @recipe(seed): checkmark

package/recipes/progress-circle.css

@@ -0,0 +1,80 @@
+/* TODO: Lynx SVG(stroke-dasharray) 지원 시 qvism recipe로 전환하고 이 파일 삭제 */
+
+.seed-progress-circle__root {
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+/* size 40: outer r=20, inner r=15 (0.53 * sqrt(2) * 20) */
+.seed-progress-circle__root--size_40 {
+  clip-path: path(
+    "M20 0 A20 20 0 1 1 20 40 A20 20 0 1 1 20 0 Z M20 5 A15 15 0 1 0 20 35 A15 15 0 1 0 20 5 Z"
+  );
+}
+
+/* size 24: outer r=12, inner r=9 (0.53 * sqrt(2) * 12) */
+.seed-progress-circle__root--size_24 {
+  clip-path: path(
+    "M12 0 A12 12 0 1 1 12 24 A12 12 0 1 1 12 0 Z M12 3 A9 9 0 1 0 12 21 A9 9 0 1 0 12 3 Z"
+  );
+}
+
+/* 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%;
+  z-index: 1;
+}
+
+.seed-progress-circle__root--tone_neutral {
+  background: var(--seed-color-palette-gray-200);
+}
+
+.seed-progress-circle__root--tone_brand {
+  background: var(--seed-color-palette-carrot-200);
+}
+
+.seed-progress-circle__root--tone_staticWhite {
+  background: var(--seed-color-palette-static-white-alpha-300);
+}
+
+.seed-progress-circle__range--tone_neutral,
+.seed-progress-circle__cap--tone_neutral {
+  background: var(--seed-color-palette-gray-500);
+}
+
+.seed-progress-circle__range--tone_brand,
+.seed-progress-circle__cap--tone_brand {
+  background: var(--seed-color-bg-brand-solid);
+}
+
+.seed-progress-circle__range--tone_staticWhite,
+.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

@@ -0,0 +1,30 @@
+/* TODO: Lynx SVG(stroke-dasharray) 지원 시 qvism recipe 자동 생성으로 전환하고 이 파일 삭제 */
+
+declare interface ProgressCircleVariant {
+  /**
+   * @default "neutral"
+   */
+  tone: "neutral" | "brand" | "staticWhite" | "inherit";
+  /**
+   * @default "40"
+   */
+  size: "14" | "16" | "18" | "24" | "40";
+}
+
+declare type ProgressCircleVariantMap = {
+  [key in keyof ProgressCircleVariant]: Array<ProgressCircleVariant[key]>;
+};
+
+export declare type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
+
+export declare type ProgressCircleSlotName = "root" | "range" | "cap";
+
+export declare const progressCircleVariantMap: ProgressCircleVariantMap;
+
+export declare const progressCircle: ((
+  props?: ProgressCircleVariantProps,
+) => Record<ProgressCircleSlotName, string>) & {
+  splitVariantProps: <T extends ProgressCircleVariantProps>(
+    props: T,
+  ) => [ProgressCircleVariantProps, Omit<T, keyof ProgressCircleVariantProps>];
+};

package/recipes/progress-circle.mjs

@@ -0,0 +1,40 @@
+/* TODO: Lynx SVG(stroke-dasharray) 지원 시 qvism recipe 자동 생성으로 전환하고 이 파일 삭제 */
+import "./progress-circle.css";
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const progressCircleSlotNames = [
+  ["root", "seed-progress-circle__root"],
+  ["range", "seed-progress-circle__range"],
+  ["cap", "seed-progress-circle__cap"],
+];
+
+const defaultVariant = {
+  tone: "neutral",
+  size: "40",
+};
+
+const compoundVariants = [];
+
+export const progressCircleVariantMap = {
+  tone: ["neutral", "brand", "staticWhite", "inherit"],
+  size: ["14", "16", "18", "24", "40"],
+};
+
+export const progressCircleVariantKeys = Object.keys(progressCircleVariantMap);
+
+export function progressCircle(props) {
+  return Object.fromEntries(
+    progressCircleSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(progressCircle, {
+  splitVariantProps: (props) => splitVariantProps(props, progressCircleVariantMap),
+});
+
+// @recipe(seed): progress-circle

package/recipes/radio-group.css

@@ -0,0 +1,5 @@
+.seed-radio-group__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-dimension-x1)
+}

package/recipes/radio-group.d.ts

@@ -0,0 +1,21 @@
+declare interface RadioGroupVariant {
+  
+}
+
+declare type RadioGroupVariantMap = {
+  [key in keyof RadioGroupVariant]: Array<RadioGroupVariant[key]>;
+};
+
+export declare type RadioGroupVariantProps = Partial<RadioGroupVariant>;
+
+export declare type RadioGroupSlotName = "root" | "text";
+
+export declare const radioGroupVariantMap: RadioGroupVariantMap;
+
+export declare const radioGroup: ((
+  props?: RadioGroupVariantProps,
+) => Record<RadioGroupSlotName, string>) & {
+  splitVariantProps: <T extends RadioGroupVariantProps>(
+    props: T,
+  ) => [RadioGroupVariantProps, Omit<T, keyof RadioGroupVariantProps>];
+}

package/recipes/radio-group.mjs

@@ -0,0 +1,36 @@
+import './radio-group.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const radioGroupSlotNames = [
+  [
+    "root",
+    "seed-radio-group__root"
+  ],
+  [
+    "text",
+    "seed-radio-group__text"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const radioGroupVariantMap = {};
+
+export const radioGroupVariantKeys = Object.keys(radioGroupVariantMap);
+
+export function radioGroup(props) {
+  return Object.fromEntries(
+    radioGroupSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(radioGroup, { splitVariantProps: (props) => splitVariantProps(props, radioGroupVariantMap) });
+
+// @recipe(seed): radio-group

package/recipes/radio.css

@@ -0,0 +1,34 @@
+.seed-radio__root {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    gap: var(--seed-dimension-x2)
+}
+.seed-radio__label {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-radio__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-radio__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-radio__root--size_medium {
+    min-height: var(--seed-dimension-x8);
+    --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2)
+}
+.seed-radio__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-radio__root--size_large {
+    min-height: var(--seed-dimension-x9);
+    --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2)
+}
+.seed-radio__label--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-radio__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}

package/recipes/radio.d.ts

@@ -0,0 +1,32 @@
+declare interface RadioVariant {
+  /**
+  * @default "regular"
+  */
+  weight: "regular" | "bold";
+/**
+  * @default "medium"
+  */
+  size: "medium" | "large";
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type RadioVariantMap = {
+  [key in keyof RadioVariant]: Array<RadioVariant[key]>;
+};
+
+export declare type RadioVariantProps = Partial<RadioVariant>;
+
+export declare type RadioSlotName = "root" | "label";
+
+export declare const radioVariantMap: RadioVariantMap;
+
+export declare const radio: ((
+  props?: RadioVariantProps,
+) => Record<RadioSlotName, string>) & {
+  splitVariantProps: <T extends RadioVariantProps>(
+    props: T,
+  ) => [RadioVariantProps, Omit<T, keyof RadioVariantProps>];
+}