@asafarim/design-tokens 0.3.6 → 0.4.1

package/src/tokens/ui/button.ts

@@ -0,0 +1,25 @@
+import type { Token } from "../../core/types";
+
+export const button = {
+  primaryBg: { value: "var(--asm-color-button-primary-bg)", description: "Primary button background." } satisfies Token,
+  primaryText: { value: "var(--asm-color-button-primary-text)", description: "Primary button text." } satisfies Token,
+  primaryBgHover: {
+    value: "var(--asm-color-button-primary-bg-hover)",
+    description: "Primary button background (hover)."
+  } satisfies Token,
+  primaryBgActive: {
+    value: "var(--asm-color-button-primary-bg-active)",
+    description: "Primary button background (active)."
+  } satisfies Token,
+
+  secondaryBg: { value: "var(--asm-color-button-secondary-bg)", description: "Secondary button background." } satisfies Token,
+  secondaryText: { value: "var(--asm-color-button-secondary-text)", description: "Secondary button text." } satisfies Token,
+
+  ghostBgHover: { value: "var(--asm-color-button-ghost-bg-hover)", description: "Ghost button hover background." } satisfies Token,
+
+  destructiveBg: { value: "var(--asm-color-button-destructive-bg)", description: "Destructive button background." } satisfies Token,
+  destructiveText: { value: "var(--asm-color-button-destructive-text)", description: "Destructive button text." } satisfies Token,
+
+  disabledBg: { value: "var(--asm-color-button-disabled-bg)", description: "Disabled button background." } satisfies Token,
+  disabledText: { value: "var(--asm-color-button-disabled-text)", description: "Disabled button text." } satisfies Token
+} as const;

package/src/tokens/ui/focus.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const focus = {
+  ringColor: { value: "var(--asm-color-focus-ring)", description: "Focus ring color." } satisfies Token,
+  ringWidth: { value: "2px", description: "Focus ring width." } satisfies Token,
+  ringOffset: { value: "2px", description: "Focus ring offset." } satisfies Token
+} as const;

package/src/tokens/ui/index.ts

@@ -0,0 +1,5 @@
+export { surface } from "./surface";
+export { button } from "./button";
+export { input } from "./input";
+export { focus } from "./focus";
+export { overlay } from "./overlay";

package/src/tokens/ui/input.ts

@@ -0,0 +1,12 @@
+import type { Token } from "../../core/types";
+
+export const input = {
+  bg: { value: "var(--asm-color-input-bg)", description: "Input background." } satisfies Token,
+  text: { value: "var(--asm-color-input-text)", description: "Input text." } satisfies Token,
+  border: { value: "var(--asm-color-input-border)", description: "Input border." } satisfies Token,
+  borderHover: { value: "var(--asm-color-input-border-hover)", description: "Input border (hover)." } satisfies Token,
+  borderFocus: { value: "var(--asm-color-input-border-focus)", description: "Input border (focus)." } satisfies Token,
+  placeholder: { value: "var(--asm-color-input-placeholder)", description: "Input placeholder text." } satisfies Token,
+  errorBorder: { value: "var(--asm-color-input-error-border)", description: "Input error border." } satisfies Token,
+  successBorder: { value: "var(--asm-color-input-success-border)", description: "Input success border." } satisfies Token
+} as const;

package/src/tokens/ui/overlay.ts

@@ -0,0 +1,6 @@
+import type { Token } from "../../core/types";
+
+export const overlay = {
+  scrim: { value: "var(--asm-color-overlay-scrim)", description: "Overlay scrim color." } satisfies Token,
+  backdropBlur: { value: "var(--asm-effect-blur-md)", description: "Default overlay backdrop blur." } satisfies Token
+} as const;

package/src/tokens/ui/surface.ts

@@ -0,0 +1,9 @@
+import type { Token } from "../../core/types";
+
+export const surface = {
+  background: { value: "var(--asm-color-bg)", description: "App background surface." } satisfies Token,
+  surface: { value: "var(--asm-color-surface)", description: "Default surface (cards)." } satisfies Token,
+  surfaceMuted: { value: "var(--asm-color-surface-muted)", description: "Muted surface." } satisfies Token,
+  panel: { value: "var(--asm-color-panel)", description: "Panel surface." } satisfies Token,
+  modal: { value: "var(--asm-color-modal)", description: "Modal surface." } satisfies Token
+} as const;

package/src/tokens/zindex/index.ts

@@ -0,0 +1 @@
+export { scale } from "./scale";

package/src/tokens/zindex/scale.ts

@@ -0,0 +1,12 @@
+import type { Token } from "../../core/types";
+
+export const scale = {
+  base: { value: 0, description: "Base stacking context." } satisfies Token<number>,
+  dropdown: { value: 100, description: "Dropdown menus." } satisfies Token<number>,
+  sticky: { value: 200, description: "Sticky headers." } satisfies Token<number>,
+  overlay: { value: 300, description: "Overlays/scrims." } satisfies Token<number>,
+  modal: { value: 400, description: "Modal dialogs." } satisfies Token<number>,
+  popover: { value: 450, description: "Popovers." } satisfies Token<number>,
+  tooltip: { value: 500, description: "Tooltips." } satisfies Token<number>,
+  toast: { value: 600, description: "Toasts/notifications." } satisfies Token<number>
+} as const;