@joinskips/brand 0.0.0 → 4.0.0-develop.108

package/tokens/skips-design-tokens.css

@@ -0,0 +1,136 @@
+/* Written by scripts/derive.py from skips-design-tokens.json; do not edit by hand. */
+:root {
+  --skips-font-ui: 'Onest Variable', Onest, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  --skips-font-mono: ui-monospace, Menlo, monospace;
+  --skips-font-weight-light: 300;
+  --skips-font-weight-regular: 400;
+  --skips-font-weight-medium: 500;
+  --skips-font-weight-semibold: 600;
+  --skips-font-weight-bold: 700;
+  --skips-font-weight-heavy: 800;
+  --skips-radius-control: 8px;
+  --skips-radius-card: 12px;
+  --skips-radius-overlay: 16px;
+  --skips-radius-pill: 9999px;
+  --skips-shadow-card: 0 1px 2px rgba(33, 38, 41, 0.04);
+  --skips-shadow-lift: 0 4px 12px rgba(33, 38, 41, 0.06);
+  --skips-shadow-lift-hover: 0 8px 28px rgba(33, 38, 41, 0.14);
+  --skips-shadow-menu: 0 8px 24px rgba(33, 38, 41, 0.12);
+  --skips-shadow-modal: 0 24px 64px rgba(33, 38, 41, 0.18);
+  --skips-layout-content-max: 1200px;
+  --skips-layout-reading-width: 720px;
+  --skips-layout-control-height: 48px;
+  --skips-layout-control-height-compact: 44px;
+  --skips-layout-header-short: 60px;
+  --skips-layout-header-tall: 76px;
+  --skips-layout-gutter-phone: 16px;
+  --skips-layout-gutter-tablet: 24px;
+  --skips-layout-gutter-desktop: 32px;
+  --skips-duration-colour: 140ms;
+  --skips-duration-move: 200ms;
+  --skips-duration-shadow: 240ms;
+  --skips-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --skips-easing-pulse: cubic-bezier(0.4, 0, 0.6, 1);
+  --skips-dev-blue: #1d4ed8;
+  --skips-dev-mark: #bfdbfe;
+  --skips-dev-text: #ffffff;
+  --skips-font-size-xs: 12px;
+  --skips-line-height-xs: 1.5;
+  --skips-font-size-sm: 13px;
+  --skips-line-height-sm: 1.5;
+  --skips-font-size-base: 15px;
+  --skips-line-height-base: 1.6;
+  --skips-font-size-md: 16px;
+  --skips-line-height-md: 1.6;
+  --skips-font-size-lg: 18px;
+  --skips-line-height-lg: 1.55;
+  --skips-font-size-xl: 22px;
+  --skips-line-height-xl: 1.4;
+  --skips-font-size-2xl: 28px;
+  --skips-line-height-2xl: 1.2;
+  --skips-font-size-3xl: 36px;
+  --skips-line-height-3xl: 1.1;
+  --skips-font-size-4xl: 40px;
+  --skips-line-height-4xl: 1.05;
+  --skips-font-size-5xl: 54px;
+  --skips-line-height-5xl: 1.03;
+  --skips-font-size-6xl: 72px;
+  --skips-line-height-6xl: 1.02;
+}
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --skips-color-page: #f8f5f2;
+  --skips-color-surface: #ffffff;
+  --skips-color-muted: #f5f6f7;
+  --skips-color-paper: #f7f5f0;
+  --skips-color-ink: #212629;
+  --skips-color-ink-secondary: #5b5b57;
+  --skips-color-ink-placeholder: #64645f;
+  --skips-color-line-subtle: #d9d9d6;
+  --skips-color-line-control: #85857f;
+  --skips-color-accent: #f7ad00;
+  --skips-color-accent-ink: #212629;
+  --skips-color-action: #242e2b;
+  --skips-color-action-hover: #314039;
+  --skips-color-action-pressed: #1a231f;
+  --skips-color-action-ink: #ffffff;
+  --skips-color-error: #fff1f0;
+  --skips-color-error-ink: #b42318;
+  --skips-color-warning: #fff5d6;
+  --skips-color-warning-ink: #854d0e;
+  --skips-color-success: #dcf3e3;
+  --skips-color-success-ink: #166534;
+  --skips-color-focus: #212629;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+  --skips-color-page: #0f1110;
+  --skips-color-surface: #181a19;
+  --skips-color-muted: #1f2221;
+  --skips-color-paper: #1b1b18;
+  --skips-color-ink: #f5f6f4;
+  --skips-color-ink-secondary: #b4b4ae;
+  --skips-color-ink-placeholder: #8d8d87;
+  --skips-color-line-subtle: #2c2e2d;
+  --skips-color-line-control: #5a5c59;
+  --skips-color-accent: #f7ad00;
+  --skips-color-accent-ink: #212629;
+  --skips-color-action: #3a4a44;
+  --skips-color-action-hover: #46574f;
+  --skips-color-action-pressed: #2f3c37;
+  --skips-color-action-ink: #ffffff;
+  --skips-color-error: #3a1b19;
+  --skips-color-error-ink: #ff8a80;
+  --skips-color-warning: #3a2e10;
+  --skips-color-warning-ink: #f5c451;
+  --skips-color-success: #12301f;
+  --skips-color-success-ink: #7ddc9c;
+  --skips-color-focus: #f5f6f4;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --skips-color-page: #0f1110;
+    --skips-color-surface: #181a19;
+    --skips-color-muted: #1f2221;
+    --skips-color-paper: #1b1b18;
+    --skips-color-ink: #f5f6f4;
+    --skips-color-ink-secondary: #b4b4ae;
+    --skips-color-ink-placeholder: #8d8d87;
+    --skips-color-line-subtle: #2c2e2d;
+    --skips-color-line-control: #5a5c59;
+    --skips-color-accent: #f7ad00;
+    --skips-color-accent-ink: #212629;
+    --skips-color-action: #3a4a44;
+    --skips-color-action-hover: #46574f;
+    --skips-color-action-pressed: #2f3c37;
+    --skips-color-action-ink: #ffffff;
+    --skips-color-error: #3a1b19;
+    --skips-color-error-ink: #ff8a80;
+    --skips-color-warning: #3a2e10;
+    --skips-color-warning-ink: #f5c451;
+    --skips-color-success: #12301f;
+    --skips-color-success-ink: #7ddc9c;
+    --skips-color-focus: #f5f6f4;
+  }
+}

package/tokens/skips-design-tokens.json

@@ -0,0 +1,115 @@
+{
+  "colors": {
+    "light": {
+      "page": "#f8f5f2",
+      "surface": "#ffffff",
+      "muted": "#f5f6f7",
+      "paper": "#f7f5f0",
+      "ink": "#212629",
+      "ink-secondary": "#5b5b57",
+      "ink-placeholder": "#64645f",
+      "line-subtle": "#d9d9d6",
+      "line-control": "#85857f",
+      "accent": "#f7ad00",
+      "accent-ink": "#212629",
+      "action": "#242e2b",
+      "action-hover": "#314039",
+      "action-pressed": "#1a231f",
+      "action-ink": "#ffffff",
+      "error": "#fff1f0",
+      "error-ink": "#b42318",
+      "warning": "#fff5d6",
+      "warning-ink": "#854d0e",
+      "success": "#dcf3e3",
+      "success-ink": "#166534",
+      "focus": "#212629"
+    },
+    "dark": {
+      "page": "#0f1110",
+      "surface": "#181a19",
+      "muted": "#1f2221",
+      "paper": "#1b1b18",
+      "ink": "#f5f6f4",
+      "ink-secondary": "#b4b4ae",
+      "ink-placeholder": "#8d8d87",
+      "line-subtle": "#2c2e2d",
+      "line-control": "#5a5c59",
+      "accent": "#f7ad00",
+      "accent-ink": "#212629",
+      "action": "#3a4a44",
+      "action-hover": "#46574f",
+      "action-pressed": "#2f3c37",
+      "action-ink": "#ffffff",
+      "error": "#3a1b19",
+      "error-ink": "#ff8a80",
+      "warning": "#3a2e10",
+      "warning-ink": "#f5c451",
+      "success": "#12301f",
+      "success-ink": "#7ddc9c",
+      "focus": "#f5f6f4"
+    }
+  },
+  "dev": {
+    "blue": "#1d4ed8",
+    "mark": "#bfdbfe",
+    "text": "#ffffff"
+  },
+  "fontFamily": {
+    "ui": "'Onest Variable', Onest, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif",
+    "mono": "ui-monospace, Menlo, monospace"
+  },
+  "fontSize": {
+    "xs": { "size": "12px", "lineHeight": "1.5" },
+    "sm": { "size": "13px", "lineHeight": "1.5" },
+    "base": { "size": "15px", "lineHeight": "1.6" },
+    "md": { "size": "16px", "lineHeight": "1.6" },
+    "lg": { "size": "18px", "lineHeight": "1.55" },
+    "xl": { "size": "22px", "lineHeight": "1.4" },
+    "2xl": { "size": "28px", "lineHeight": "1.2" },
+    "3xl": { "size": "36px", "lineHeight": "1.1" },
+    "4xl": { "size": "40px", "lineHeight": "1.05" },
+    "5xl": { "size": "54px", "lineHeight": "1.03" },
+    "6xl": { "size": "72px", "lineHeight": "1.02" }
+  },
+  "fontWeight": {
+    "light": "300",
+    "regular": "400",
+    "medium": "500",
+    "semibold": "600",
+    "bold": "700",
+    "heavy": "800"
+  },
+  "radius": {
+    "control": "8px",
+    "card": "12px",
+    "overlay": "16px",
+    "pill": "9999px"
+  },
+  "shadow": {
+    "card": "0 1px 2px rgba(33, 38, 41, 0.04)",
+    "lift": "0 4px 12px rgba(33, 38, 41, 0.06)",
+    "lift-hover": "0 8px 28px rgba(33, 38, 41, 0.14)",
+    "menu": "0 8px 24px rgba(33, 38, 41, 0.12)",
+    "modal": "0 24px 64px rgba(33, 38, 41, 0.18)"
+  },
+  "layout": {
+    "content-max": "1200px",
+    "reading-width": "720px",
+    "control-height": "48px",
+    "control-height-compact": "44px",
+    "header-short": "60px",
+    "header-tall": "76px",
+    "gutter-phone": "16px",
+    "gutter-tablet": "24px",
+    "gutter-desktop": "32px"
+  },
+  "duration": {
+    "colour": "140ms",
+    "move": "200ms",
+    "shadow": "240ms"
+  },
+  "easing": {
+    "standard": "cubic-bezier(0.2, 0, 0, 1)",
+    "pulse": "cubic-bezier(0.4, 0, 0.6, 1)"
+  }
+}