@seed-design/lynx-css 0.1.0

package/recipes/radio.mjs

@@ -0,0 +1,53 @@
+import './radio.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const radioSlotNames = [
+  [
+    "root",
+    "seed-radio__root"
+  ],
+  [
+    "label",
+    "seed-radio__label"
+  ]
+];
+
+const defaultVariant = {
+  "weight": "regular",
+  "size": "medium",
+  "disabled": false
+};
+
+const compoundVariants = [];
+
+export const radioVariantMap = {
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "size": [
+    "medium",
+    "large"
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const radioVariantKeys = Object.keys(radioVariantMap);
+
+export function radio(props) {
+  return Object.fromEntries(
+    radioSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(radio, { splitVariantProps: (props) => splitVariantProps(props, radioVariantMap) });
+
+// @recipe(seed): radio

package/recipes/radiomark.css

@@ -0,0 +1,94 @@
+.seed-radiomark__root {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    margin-top: var(--radiomark-margin-top, 0);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-weak);
+    border-radius: var(--seed-radius-full);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
+.seed-radiomark__icon {
+    border-radius: var(--seed-radius-full)
+}
+.seed-radiomark__root--size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-radiomark__icon--size_medium {
+    width: var(--seed-dimension-x2);
+    height: var(--seed-dimension-x2)
+}
+.seed-radiomark__root--size_large {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6)
+}
+.seed-radiomark__icon--size_large {
+    width: var(--seed-dimension-x2_5);
+    height: var(--seed-dimension-x2_5)
+}
+.seed-radiomark__icon--checked_false {
+    opacity: 0
+}
+.seed-radiomark__root--tone_brand-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid);
+    border-width: 0px;
+    border-color: #00000000
+}
+.seed-radiomark__icon--tone_brand-checked_true-disabled_false {
+    color: var(--seed-color-palette-static-white);
+    background-color: var(--seed-color-palette-static-white)
+}
+.seed-radiomark__root--tone_neutral-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted);
+    border-width: 0px;
+    border-color: #00000000
+}
+.seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
+    color: var(--seed-color-fg-neutral-inverted);
+    background-color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-radiomark__root--tone_brand-checked_false-disabled_true {
+    background-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__root--tone_neutral-checked_false-disabled_true {
+    background-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__root--tone_brand-checked_true-disabled_true {
+    background-color: var(--seed-color-bg-transparent);
+    border-width: 1px;
+    border-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__icon--tone_brand-checked_true-disabled_true {
+    color: var(--seed-color-palette-gray-300);
+    background-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__root--tone_neutral-checked_true-disabled_true {
+    background-color: var(--seed-color-bg-transparent);
+    border-width: 1px;
+    border-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__icon--tone_neutral-checked_true-disabled_true {
+    color: var(--seed-color-palette-gray-300);
+    background-color: var(--seed-color-palette-gray-300)
+}
+.seed-radiomark__icon--size_medium-checked_true-disabled_true {
+    width: var(--seed-dimension-x2_5);
+    height: var(--seed-dimension-x2_5)
+}
+.seed-radiomark__icon--size_large-checked_true-disabled_true {
+    width: var(--seed-dimension-x3);
+    height: var(--seed-dimension-x3)
+}
+.seed-radiomark__root--pressed_true-checked_false-disabled_false {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-radiomark__root--tone_brand-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-brand-solid-pressed)
+}
+.seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+}

package/recipes/radiomark.d.ts

@@ -0,0 +1,40 @@
+declare interface RadiomarkVariant {
+  /**
+  * @default "brand"
+  */
+  tone: "brand" | "neutral";
+/**
+  * @default "medium"
+  */
+  size: "medium" | "large";
+/**
+  * @default false
+  */
+  checked: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type RadiomarkVariantMap = {
+  [key in keyof RadiomarkVariant]: Array<RadiomarkVariant[key]>;
+};
+
+export declare type RadiomarkVariantProps = Partial<RadiomarkVariant>;
+
+export declare type RadiomarkSlotName = "root" | "icon";
+
+export declare const radiomarkVariantMap: RadiomarkVariantMap;
+
+export declare const radiomark: ((
+  props?: RadiomarkVariantProps,
+) => Record<RadiomarkSlotName, string>) & {
+  splitVariantProps: <T extends RadiomarkVariantProps>(
+    props: T,
+  ) => [RadiomarkVariantProps, Omit<T, keyof RadiomarkVariantProps>];
+}

package/recipes/radiomark.mjs

@@ -0,0 +1,121 @@
+import './radiomark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const radiomarkSlotNames = [
+  [
+    "root",
+    "seed-radiomark__root"
+  ],
+  [
+    "icon",
+    "seed-radiomark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "brand",
+  "size": "medium",
+  "checked": false,
+  "disabled": false,
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "tone": "brand",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "tone": "brand",
+    "checked": false,
+    "disabled": true
+  },
+  {
+    "tone": "neutral",
+    "checked": false,
+    "disabled": true
+  },
+  {
+    "tone": "brand",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "size": "medium",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "size": "large",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "pressed": true,
+    "checked": false,
+    "disabled": false
+  },
+  {
+    "tone": "brand",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "tone": "neutral",
+    "pressed": true,
+    "checked": true,
+    "disabled": false
+  }
+];
+
+export const radiomarkVariantMap = {
+  "tone": [
+    "brand",
+    "neutral"
+  ],
+  "size": [
+    "medium",
+    "large"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const radiomarkVariantKeys = Object.keys(radiomarkVariantMap);
+
+export function radiomark(props) {
+  return Object.fromEntries(
+    radiomarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(radiomark, { splitVariantProps: (props) => splitVariantProps(props, radiomarkVariantMap) });
+
+// @recipe(seed): radiomark

package/recipes/shared.mjs

@@ -0,0 +1,48 @@
+export const createClassName = (className, variants, compoundVariants = []) => {
+  const variantKeys = Object.keys(variants)
+
+  const variantValues = variantKeys.map((key) => variants[key]);
+
+  const variantClassName = variantKeys
+    .map((key, index) => `${className}--${key}_${variantValues[index]}`)
+    .join(" ");
+
+  const compountVariantClassName = compoundVariants
+    .filter((compoundVariant) =>
+      Object.keys(compoundVariant).every((key) => compoundVariant[key] === variants[key]),
+    )
+    .map(
+      (compoundVariant) =>
+        `${className}--${Object.keys(compoundVariant)
+          .map((key) => {
+            return `${key}_${compoundVariant[key]}`;
+          })
+          .join("-")}`,
+    )
+    .join(" ");
+
+  return [className, variantClassName, compountVariantClassName].filter(Boolean).join(" ");
+};
+
+export function mergeVariants(a, b) {
+  const result = { ...a };
+  for (const k in b) {
+    if (b[k] != null) {
+      result[k] = b[k];
+    }
+  }
+  return result;
+}
+
+export function splitVariantProps(props, variantMap) {
+  const variantProps = {};
+  const otherProps = {};
+  for (const key in props) {
+    if (variantMap[key] != null) {
+      variantProps[key] = props[key];
+    } else {
+      otherProps[key] = props[key];
+    }
+  }
+  return [variantProps, otherProps];
+}

package/recipes/switch.css

@@ -0,0 +1,40 @@
+.seed-switch__root {
+    display: flex;
+    align-items: flex-start;
+    position: relative
+}
+.seed-switch__label {
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
+    transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing)
+}
+.seed-switch__root--size_16 {
+    min-height: var(--seed-dimension-x6);
+    gap: var(--seed-dimension-x1_5)
+}
+.seed-switch__label--size_16 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2)
+}
+.seed-switch__root--size_24 {
+    min-height: var(--seed-dimension-x6);
+    gap: var(--seed-dimension-x2)
+}
+.seed-switch__label--size_24 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2)
+}
+.seed-switch__root--size_32 {
+    min-height: var(--seed-dimension-x8);
+    gap: var(--seed-dimension-x2_5)
+}
+.seed-switch__label--size_32 {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2)
+}
+.seed-switch__label--disabled_true {
+    opacity: 0.58
+}

package/recipes/switch.d.ts

@@ -0,0 +1,28 @@
+declare interface SwitchVariant {
+  /**
+  * @default 32
+  */
+  size: "16" | "24" | "32";
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type SwitchVariantMap = {
+  [key in keyof SwitchVariant]: Array<SwitchVariant[key]>;
+};
+
+export declare type SwitchVariantProps = Partial<SwitchVariant>;
+
+export declare type SwitchSlotName = "root" | "label";
+
+export declare const switchVariantMap: SwitchVariantMap;
+
+export declare const switchStyle: ((
+  props?: SwitchVariantProps,
+) => Record<SwitchSlotName, string>) & {
+  splitVariantProps: <T extends SwitchVariantProps>(
+    props: T,
+  ) => [SwitchVariantProps, Omit<T, keyof SwitchVariantProps>];
+}

package/recipes/switch.mjs

@@ -0,0 +1,49 @@
+import './switch.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const switchSlotNames = [
+  [
+    "root",
+    "seed-switch__root"
+  ],
+  [
+    "label",
+    "seed-switch__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": 32,
+  "disabled": false
+};
+
+const compoundVariants = [];
+
+export const switchVariantMap = {
+  "size": [
+    "16",
+    "24",
+    "32"
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const switchVariantKeys = Object.keys(switchVariantMap);
+
+export function switchStyle(props) {
+  return Object.fromEntries(
+    switchSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(switchStyle, { splitVariantProps: (props) => splitVariantProps(props, switchVariantMap) });
+
+// @recipe(seed): switch

package/recipes/switchmark.css

@@ -0,0 +1,75 @@
+.seed-switchmark__root {
+    display: flex;
+    position: relative;
+    border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-palette-gray-600);
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing)
+}
+.seed-switchmark__thumb {
+    border-radius: var(--seed-radius-full);
+    transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
+    transform: scale(0.8)
+}
+.seed-switchmark__thumb--tone_neutral {
+    background-color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-switchmark__thumb--tone_brand {
+    background-color: var(--seed-color-palette-static-white)
+}
+.seed-switchmark__root--size_16 {
+    min-width: 26px;
+    min-height: 16px;
+    margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
+    margin-bottom: calc((var(--seed-dimension-x6) - 16px) / 2);
+    padding: 2px 2px
+}
+.seed-switchmark__thumb--size_16 {
+    width: 12px;
+    height: 12px
+}
+.seed-switchmark__root--size_24 {
+    min-width: 38px;
+    min-height: 24px;
+    margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
+    margin-bottom: calc((var(--seed-dimension-x6) - 24px) / 2);
+    padding: 2px 2px
+}
+.seed-switchmark__thumb--size_24 {
+    width: 20px;
+    height: 20px
+}
+.seed-switchmark__root--size_32 {
+    min-width: 52px;
+    min-height: 32px;
+    margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
+    margin-bottom: calc((var(--seed-dimension-x8) - 32px) / 2);
+    padding: 3px 3px
+}
+.seed-switchmark__thumb--size_32 {
+    width: 26px;
+    height: 26px
+}
+.seed-switchmark__root--disabled_true {
+    opacity: 0.38
+}
+.seed-switchmark__root--tone_brand-checked_true {
+    background-color: var(--seed-color-bg-brand-solid)
+}
+.seed-switchmark__root--tone_neutral-checked_true-disabled_false {
+    background-color: var(--seed-color-bg-neutral-inverted)
+}
+.seed-switchmark__root--tone_neutral-checked_true-disabled_true {
+    background-color: var(--seed-color-palette-gray-600)
+}
+.seed-switchmark__thumb--tone_neutral-disabled_true {
+    background-color: var(--seed-color-palette-static-black-alpha-700)
+}
+.seed-switchmark__thumb--size_32-checked_true {
+    transform: scale(1) translateX(20px)
+}
+.seed-switchmark__thumb--size_24-checked_true {
+    transform: scale(1) translateX(14px)
+}
+.seed-switchmark__thumb--size_16-checked_true {
+    transform: scale(1) translateX(10px)
+}

package/recipes/switchmark.d.ts

@@ -0,0 +1,36 @@
+declare interface SwitchmarkVariant {
+  /**
+  * @default "brand"
+  */
+  tone: "neutral" | "brand";
+/**
+  * @default "32"
+  */
+  size: "16" | "24" | "32";
+/**
+  * @default false
+  */
+  checked: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type SwitchmarkVariantMap = {
+  [key in keyof SwitchmarkVariant]: Array<SwitchmarkVariant[key]>;
+};
+
+export declare type SwitchmarkVariantProps = Partial<SwitchmarkVariant>;
+
+export declare type SwitchmarkSlotName = "root" | "thumb";
+
+export declare const switchmarkVariantMap: SwitchmarkVariantMap;
+
+export declare const switchmark: ((
+  props?: SwitchmarkVariantProps,
+) => Record<SwitchmarkSlotName, string>) & {
+  splitVariantProps: <T extends SwitchmarkVariantProps>(
+    props: T,
+  ) => [SwitchmarkVariantProps, Omit<T, keyof SwitchmarkVariantProps>];
+}

package/recipes/switchmark.mjs

@@ -0,0 +1,90 @@
+import './switchmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const switchmarkSlotNames = [
+  [
+    "root",
+    "seed-switchmark__root"
+  ],
+  [
+    "thumb",
+    "seed-switchmark__thumb"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "brand",
+  "size": "32",
+  "checked": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "tone": "brand",
+    "checked": true
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "tone": "neutral",
+    "disabled": true
+  },
+  {
+    "size": "32",
+    "checked": true
+  },
+  {
+    "size": "24",
+    "checked": true
+  },
+  {
+    "size": "16",
+    "checked": true
+  }
+];
+
+export const switchmarkVariantMap = {
+  "tone": [
+    "neutral",
+    "brand"
+  ],
+  "size": [
+    "16",
+    "24",
+    "32"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const switchmarkVariantKeys = Object.keys(switchmarkVariantMap);
+
+export function switchmark(props) {
+  return Object.fromEntries(
+    switchmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(switchmark, { splitVariantProps: (props) => splitVariantProps(props, switchmarkVariantMap) });
+
+// @recipe(seed): switchmark