@handamade/psi-tokens 0.3.0

package/dist/dtcg/light.json

@@ -0,0 +1,635 @@
+{
+  "$description": "DS tokens, theme \"light\". Generated — do not edit.",
+  "color": {
+    "bg": {
+      "primary": {
+        "$type": "color",
+        "$value": "#eceff2",
+        "$description": "slot(canvas)"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#f6f9fc",
+        "$description": "slot(canvas) → L delta(0.03)"
+      }
+    },
+    "fg": {
+      "primary": {
+        "$type": "color",
+        "$value": "#222f3c",
+        "$description": "slot(ink) → L set(0.3), C set(0.03)"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#222f3cb3",
+        "$description": "ref(fgPrimary) → alpha(0.7)"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "#222f3c80",
+        "$description": "ref(fgPrimary) → alpha(0.5)"
+      },
+      "quaternary": {
+        "$type": "color",
+        "$value": "#222f3c4d",
+        "$description": "ref(fgPrimary) → alpha(0.3)"
+      },
+      "primary-inverted": {
+        "$type": "color",
+        "$value": "#eceff2",
+        "$description": "slot(canvas)"
+      },
+      "static-white": {
+        "$type": "color",
+        "$value": "#ffffff",
+        "$description": "slot(canvas) → L set(1), C set(0)"
+      },
+      "static-black": {
+        "$type": "color",
+        "$value": "#1a222b",
+        "$description": "slot(ink) → L set(0.25), C cap(0.03)"
+      },
+      "on-accent": {
+        "$type": "color",
+        "$value": "#ffffff",
+        "$description": "ref(fgStaticWhite)"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "#0053c9",
+        "$description": "slot(accent) → L set(0.48), C cap(0.23)"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "#00703e",
+        "$description": "slot(success) → L set(0.48), C cap(0.1187)"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#7e5400",
+        "$description": "slot(warning) → L set(0.48), C cap(0.1013)"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "#b1001b",
+        "$description": "slot(danger) → L set(0.48), C cap(0.1946)"
+      }
+    },
+    "fill": {
+      "neutral1": {
+        "$type": "color",
+        "$value": "#f2f4f6",
+        "$description": "slot(canvas) → L delta(0.016), C delta(-0.001)"
+      },
+      "neutral2": {
+        "$type": "color",
+        "$value": "#eceff2",
+        "$description": "slot(canvas)"
+      },
+      "neutral3": {
+        "$type": "color",
+        "$value": "#e6e9ed",
+        "$description": "slot(canvas) → L delta(-0.017), C delta(0.001)"
+      },
+      "neutral4": {
+        "$type": "color",
+        "$value": "#e0e4e8",
+        "$description": "slot(canvas) → L delta(-0.034), C delta(0.002)"
+      },
+      "neutral5": {
+        "$type": "color",
+        "$value": "#e0e4e9",
+        "$description": "slot(canvas) → L delta(-0.032), C delta(0.003)"
+      },
+      "neutral6": {
+        "$type": "color",
+        "$value": "#dadfe4",
+        "$description": "slot(canvas) → L delta(-0.048), C delta(0.004)"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "#1368e9",
+        "$description": "slot(accent)"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "#007e46",
+        "$description": "slot(success) → C cap(0.1285)"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#e79d00",
+        "$description": "slot(warning)"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "#d40924",
+        "$description": "slot(danger)"
+      },
+      "tint-accent": {
+        "$type": "color",
+        "$value": "#0053c91f",
+        "$description": "ref(fgAccent) → alpha(0.12)"
+      },
+      "tint-success": {
+        "$type": "color",
+        "$value": "#00703e1f",
+        "$description": "ref(fgSuccess) → alpha(0.12)"
+      },
+      "tint-warning": {
+        "$type": "color",
+        "$value": "#7e54001f",
+        "$description": "ref(fgWarning) → alpha(0.12)"
+      },
+      "tint-danger": {
+        "$type": "color",
+        "$value": "#b1001b1f",
+        "$description": "ref(fgDanger) → alpha(0.12)"
+      }
+    },
+    "border": {
+      "faint": {
+        "$type": "color",
+        "$value": "#222f3c14",
+        "$description": "ref(fgPrimary) → alpha(0.08)"
+      },
+      "neutral": {
+        "$type": "color",
+        "$value": "#222f3c26",
+        "$description": "ref(fgPrimary) → alpha(0.15)"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#222f3c4d",
+        "$description": "ref(fgPrimary) → alpha(0.3)"
+      },
+      "focus": {
+        "$type": "color",
+        "$value": "#0053c9",
+        "$description": "ref(fgAccent)"
+      }
+    },
+    "scrim": {
+      "soft": {
+        "$type": "color",
+        "$value": "#eceff240",
+        "$description": "ref(bgPrimary) → alpha(0.25)"
+      },
+      "medium": {
+        "$type": "color",
+        "$value": "#eceff259",
+        "$description": "ref(bgPrimary) → alpha(0.35)"
+      },
+      "heavy": {
+        "$type": "color",
+        "$value": "#eceff2d1",
+        "$description": "ref(bgPrimary) → alpha(0.82)"
+      }
+    }
+  },
+  "dimension": {
+    "space": {
+      "0": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "2": {
+        "$type": "dimension",
+        "$value": "0.125rem"
+      },
+      "4": {
+        "$type": "dimension",
+        "$value": "0.25rem"
+      },
+      "6": {
+        "$type": "dimension",
+        "$value": "0.375rem"
+      },
+      "8": {
+        "$type": "dimension",
+        "$value": "0.5rem"
+      },
+      "12": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "16": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "20": {
+        "$type": "dimension",
+        "$value": "1.25rem"
+      },
+      "24": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "32": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "40": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "48": {
+        "$type": "dimension",
+        "$value": "3rem"
+      },
+      "64": {
+        "$type": "dimension",
+        "$value": "4rem"
+      },
+      "80": {
+        "$type": "dimension",
+        "$value": "5rem"
+      },
+      "96": {
+        "$type": "dimension",
+        "$value": "6rem"
+      },
+      "120": {
+        "$type": "dimension",
+        "$value": "7.5rem"
+      },
+      "144": {
+        "$type": "dimension",
+        "$value": "9rem"
+      }
+    },
+    "size": {
+      "24": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "32": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "40": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "48": {
+        "$type": "dimension",
+        "$value": "3rem"
+      }
+    },
+    "radius": {
+      "4": {
+        "$type": "dimension",
+        "$value": "0.25rem"
+      },
+      "6": {
+        "$type": "dimension",
+        "$value": "0.375rem"
+      },
+      "8": {
+        "$type": "dimension",
+        "$value": "0.5rem"
+      },
+      "12": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      }
+    },
+    "breakpoint": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "560px"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "960px"
+      }
+    },
+    "container": {
+      "max": {
+        "$type": "dimension",
+        "$value": "82rem"
+      },
+      "gutter": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "gutterNarrow": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      }
+    }
+  },
+  "typography": {
+    "12-16-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "12px",
+        "lineHeight": "16px",
+        "fontWeight": 400
+      }
+    },
+    "12-16-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "12px",
+        "lineHeight": "16px",
+        "fontWeight": 500
+      }
+    },
+    "14-20-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "14px",
+        "lineHeight": "20px",
+        "fontWeight": 400
+      }
+    },
+    "14-20-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "14px",
+        "lineHeight": "20px",
+        "fontWeight": 500
+      }
+    },
+    "16-20-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "16px",
+        "lineHeight": "20px",
+        "fontWeight": 400
+      }
+    },
+    "16-24-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "16px",
+        "lineHeight": "24px",
+        "fontWeight": 400
+      }
+    },
+    "16-24-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "16px",
+        "lineHeight": "24px",
+        "fontWeight": 500
+      }
+    },
+    "18-28-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 500
+      }
+    },
+    "20-28-semibold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "20px",
+        "lineHeight": "28px",
+        "fontWeight": 600
+      }
+    },
+    "24-32-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "24px",
+        "lineHeight": "32px",
+        "fontWeight": 500
+      }
+    },
+    "30-36-bold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "30px",
+        "lineHeight": "36px",
+        "fontWeight": 700
+      }
+    },
+    "serif-18-28-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 400
+      }
+    },
+    "serif-20-30-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontSize": "20px",
+        "lineHeight": "30px",
+        "fontWeight": 400
+      }
+    },
+    "serif-20-32-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontSize": "20px",
+        "lineHeight": "32px",
+        "fontWeight": 400
+      }
+    },
+    "serif-24-36-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontSize": "24px",
+        "lineHeight": "36px",
+        "fontWeight": 400
+      }
+    },
+    "serif-28-40-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontSize": "28px",
+        "lineHeight": "40px",
+        "fontWeight": 400
+      }
+    },
+    "mono-13-20-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.mono}",
+        "fontSize": "13px",
+        "lineHeight": "20px",
+        "fontWeight": 400
+      }
+    },
+    "mono-14-20-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.mono}",
+        "fontSize": "14px",
+        "lineHeight": "20px",
+        "fontWeight": 400
+      }
+    },
+    "mono-15-24-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.mono}",
+        "fontSize": "15px",
+        "lineHeight": "24px",
+        "fontWeight": 400
+      }
+    },
+    "mono-15-24-medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.mono}",
+        "fontSize": "15px",
+        "lineHeight": "24px",
+        "fontWeight": 500
+      }
+    }
+  },
+  "display": {
+    "56-128-black": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.display}",
+        "fontSize": "clamp(56px, 9vw, 128px)",
+        "lineHeight": 0.95,
+        "fontWeight": 900,
+        "letterSpacing": "-0.02em"
+      }
+    },
+    "36-64-black": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.display}",
+        "fontSize": "clamp(36px, 5vw, 64px)",
+        "lineHeight": 1.05,
+        "fontWeight": 900,
+        "letterSpacing": "-0.02em"
+      }
+    },
+    "32-32-extrabold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.display}",
+        "fontSize": "32px",
+        "lineHeight": 1.1,
+        "fontWeight": 800,
+        "letterSpacing": "-0.01em"
+      }
+    }
+  },
+  "duration": {
+    "150": {
+      "$type": "duration",
+      "$value": "150ms"
+    },
+    "200": {
+      "$type": "duration",
+      "$value": "200ms"
+    },
+    "350": {
+      "$type": "duration",
+      "$value": "350ms"
+    },
+    "450": {
+      "$type": "duration",
+      "$value": "450ms"
+    },
+    "600": {
+      "$type": "duration",
+      "$value": "600ms"
+    }
+  },
+  "easing": {
+    "standard": {
+      "$type": "string",
+      "$value": "ease"
+    },
+    "in-out": {
+      "$type": "string",
+      "$value": "ease-in-out"
+    },
+    "soft": {
+      "$type": "string",
+      "$value": "cubic-bezier(0.2, 0.6, 0.2, 1)"
+    }
+  },
+  "cubicBezier": {
+    "standard": {
+      "$type": "cubicBezier",
+      "$value": [
+        0.25,
+        0.1,
+        0.25,
+        1
+      ]
+    },
+    "in-out": {
+      "$type": "cubicBezier",
+      "$value": [
+        0.42,
+        0,
+        0.58,
+        1
+      ]
+    },
+    "soft": {
+      "$type": "cubicBezier",
+      "$value": [
+        0.2,
+        0.6,
+        0.2,
+        1
+      ]
+    }
+  },
+  "fontFamily": {
+    "sans": {
+      "$type": "fontFamily",
+      "$value": [
+        "ui-sans-serif",
+        "system-ui",
+        "sans-serif"
+      ]
+    },
+    "serif": {
+      "$type": "fontFamily",
+      "$value": [
+        "Georgia",
+        "Times New Roman",
+        "serif"
+      ]
+    },
+    "mono": {
+      "$type": "fontFamily",
+      "$value": [
+        "ui-monospace",
+        "SFMono-Regular",
+        "monospace"
+      ]
+    },
+    "display": {
+      "$type": "fontFamily",
+      "$value": [
+        "ui-sans-serif",
+        "system-ui",
+        "sans-serif"
+      ]
+    }
+  }
+}

package/dist/ember.css

@@ -0,0 +1,58 @@
+@layer psi.theme {
+  [data-psi-theme="ember"] {
+    --psi-palette-emberCanvas: oklch(0.147 0.004 49);
+    --psi-palette-emberInk: oklch(0.949 0.011 72);
+    --psi-palette-emberAccent: oklch(0.724 0.177 40);
+    --psi-palette-emberEmerald: oklch(0.52 0.19 155);
+    --psi-palette-emberAmber: oklch(0.75 0.1582 75);
+    --psi-palette-emberRuby: oklch(0.55 0.22 25);
+    --psi-palette-white: oklch(1 0 0);
+    --psi-palette-black: oklch(0 0 0);
+    --psi-bg-primary: var(--psi-palette-emberCanvas);
+    --psi-bg-secondary: oklch(from var(--psi-palette-emberCanvas) calc(l + 0.015) calc(c + 0.003) h);
+    --psi-fg-primary: var(--psi-palette-emberInk);
+    --psi-fg-secondary: oklch(from var(--psi-fg-primary) l c h / 0.7);
+    --psi-fg-tertiary: oklch(from var(--psi-fg-primary) l c h / 0.5);
+    --psi-fg-quaternary: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-fg-primary-inverted: oklch(from var(--psi-palette-emberInk) 0.15 c h);
+    --psi-fg-static-white: oklch(from var(--psi-palette-emberCanvas) 1 0 h);
+    --psi-fg-static-black: oklch(from var(--psi-palette-emberInk) 0.25 min(c, 0.03) h);
+    --psi-fg-on-accent: var(--psi-fg-static-black);
+    --psi-fg-accent: oklch(from var(--psi-palette-emberAccent) 0.75 min(c, 0.156) h);
+    --psi-fg-success: oklch(from var(--psi-palette-emberEmerald) 0.75 min(c, 0.23) h);
+    --psi-fg-warning: oklch(from var(--psi-palette-emberAmber) 0.75 min(c, 0.1582) h);
+    --psi-fg-danger: oklch(from var(--psi-palette-emberRuby) 0.75 min(c, 0.1505) h);
+    --psi-fill-neutral1: oklch(from var(--psi-palette-emberInk) 0.18 0.012 h);
+    --psi-fill-neutral2: oklch(from var(--psi-palette-emberInk) 0.2 0.015 h);
+    --psi-fill-neutral3: oklch(from var(--psi-palette-emberInk) 0.23 0.018 h);
+    --psi-fill-neutral4: oklch(from var(--psi-palette-emberInk) 0.26 0.02 h);
+    --psi-fill-neutral5: oklch(from var(--psi-palette-emberInk) 0.29 0.022 h);
+    --psi-fill-neutral6: oklch(from var(--psi-palette-emberInk) 0.32 0.025 h);
+    --psi-fill-accent: var(--psi-palette-emberAccent);
+    --psi-fill-success: oklch(from var(--psi-palette-emberEmerald) l min(c, 0.1285) h);
+    --psi-fill-warning: var(--psi-palette-emberAmber);
+    --psi-fill-danger: var(--psi-palette-emberRuby);
+    --psi-fill-tint-accent: oklch(from var(--psi-fg-accent) l c h / 0.15);
+    --psi-fill-tint-success: oklch(from var(--psi-fg-success) l c h / 0.15);
+    --psi-fill-tint-warning: oklch(from var(--psi-fg-warning) l c h / 0.15);
+    --psi-fill-tint-danger: oklch(from var(--psi-fg-danger) l c h / 0.15);
+    --psi-border-faint: oklch(from var(--psi-fg-primary) l c h / 0.08);
+    --psi-border-neutral: oklch(from var(--psi-fg-primary) l c h / 0.15);
+    --psi-border-strong: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-border-focus: var(--psi-fg-accent);
+    --psi-scrim-soft: oklch(from var(--psi-bg-primary) l c h / 0.25);
+    --psi-scrim-medium: oklch(from var(--psi-bg-primary) l c h / 0.35);
+    --psi-scrim-heavy: oklch(from var(--psi-bg-primary) l c h / 0.82);
+    --psi-font-sans: "Archivo", system-ui, sans-serif;
+    --psi-font-serif: "IBM Plex Serif", Georgia, serif;
+    --psi-font-mono: "IBM Plex Mono", "Courier New", monospace;
+    --psi-font-display: "Archivo", system-ui, sans-serif;
+  }
+}
+@layer psi.components {
+  [data-psi-theme="ember"] {
+    --psi-button-font: var(--psi-text-mono-15-24-regular);
+    --psi-card-radius: 0;
+    --psi-media-tint: grayscale(1) sepia(0.65) saturate(1.6) hue-rotate(-12deg) brightness(0.88) contrast(1.05);
+  }
+}