open-ds 0.0.0-stage → 0.1.0

package/assets/tokens/accessible-first/light.tokens.json

@@ -0,0 +1,581 @@
+{
+  "color": {
+    "gray": {
+      "light": {
+        "0": "#FFFFFF",
+        "50": "#F7F7F7",
+        "100": "#EDEDED",
+        "200": "#D6D6D6",
+        "300": "#949494",
+        "400": "#767676",
+        "500": "#595959",
+        "600": "#464646",
+        "700": "#333333",
+        "800": "#222222",
+        "900": "#141414",
+        "950": "#0A0A0A"
+      },
+      "dark": {
+        "0": "#0A0A0A",
+        "50": "#141414",
+        "100": "#222222",
+        "200": "#333333",
+        "300": "#595959",
+        "400": "#767676",
+        "500": "#949494",
+        "600": "#B4B4B4",
+        "700": "#D6D6D6",
+        "800": "#EDEDED",
+        "900": "#F7F7F7",
+        "950": "#FFFFFF"
+      }
+    },
+    "blue": {
+      "light": {
+        "100": "#E1ECFF",
+        "300": "#8AB4F8",
+        "500": "#1A5DD0",
+        "600": "#0B4FC0",
+        "700": "#083C93",
+        "800": "#062C6E"
+      },
+      "dark": {
+        "100": "#062C6E",
+        "300": "#083C93",
+        "500": "#0B4FC0",
+        "600": "#1A5DD0",
+        "700": "#8AB4F8",
+        "800": "#E1ECFF"
+      }
+    },
+    "green": {
+      "light": {
+        "100": "#E3F4EA",
+        "300": "#5CC283",
+        "700": "#1F7A3A",
+        "900": "#123322"
+      },
+      "dark": {
+        "100": "#123322",
+        "300": "#1F7A3A",
+        "700": "#5CC283",
+        "900": "#E3F4EA"
+      }
+    },
+    "amber": {
+      "light": {
+        "100": "#FFF3D6",
+        "300": "#F2B84B",
+        "700": "#8A5600",
+        "900": "#3A2A05"
+      },
+      "dark": {
+        "100": "#3A2A05",
+        "300": "#8A5600",
+        "700": "#F2B84B",
+        "900": "#FFF3D6"
+      }
+    },
+    "red": {
+      "light": {
+        "100": "#FDE7E7",
+        "300": "#F28B8B",
+        "700": "#C42B2B",
+        "900": "#3D1414"
+      },
+      "dark": {
+        "100": "#3D1414",
+        "300": "#C42B2B",
+        "700": "#F28B8B",
+        "900": "#FDE7E7"
+      }
+    },
+    "black": {
+      "light": {
+        "scrim": "#0000008C"
+      },
+      "dark": {
+        "scrim": "#000000B3"
+      }
+    },
+    "teal": {
+      "light": {
+        "100": "#E0F2F1",
+        "300": "#7FCFC6",
+        "500": "#14918A",
+        "600": "#0F766E",
+        "700": "#0B5B55",
+        "800": "#08423E"
+      },
+      "dark": {
+        "100": "#08423E",
+        "300": "#0B5B55",
+        "500": "#0F766E",
+        "600": "#14918A",
+        "700": "#7FCFC6",
+        "800": "#E0F2F1"
+      }
+    },
+    "surface": {
+      "canvas": "#F7F7F7",
+      "default": "#FFFFFF",
+      "raised": "#FFFFFF",
+      "sunken": "#EDEDED",
+      "selected": "#E1ECFF",
+      "inverse": "#141414",
+      "scrim": "#0000008C"
+    },
+    "text": {
+      "primary": "#141414",
+      "secondary": "#333333",
+      "muted": "#595959",
+      "inverse": "#FFFFFF",
+      "on-action": "#FFFFFF",
+      "link": "#083C93"
+    },
+    "border": {
+      "default": "#D6D6D6",
+      "strong": "#595959",
+      "focus": "#0B4FC0"
+    },
+    "action": {
+      "primary": {
+        "@": "#0B4FC0",
+        "hover": "#083C93"
+      },
+      "secondary": {
+        "@": "#FFFFFF",
+        "hover": "#EDEDED"
+      }
+    },
+    "status": {
+      "info": {
+        "@": "#0B5B55",
+        "subtle": "#E0F2F1"
+      },
+      "success": {
+        "@": "#1F7A3A",
+        "subtle": "#E3F4EA"
+      },
+      "warning": {
+        "@": "#8A5600",
+        "subtle": "#FFF3D6"
+      },
+      "danger": {
+        "@": "#C42B2B",
+        "subtle": "#FDE7E7"
+      }
+    },
+    "category": {
+      "1": {
+        "@": "#0B4FC0",
+        "subtle": "#E1ECFF"
+      },
+      "2": {
+        "@": "#0F766E",
+        "subtle": "#E0F2F1"
+      },
+      "3": {
+        "@": "#1F7A3A",
+        "subtle": "#E3F4EA"
+      },
+      "4": {
+        "@": "#8A5600",
+        "subtle": "#FFF3D6"
+      },
+      "5": {
+        "@": "#595959",
+        "subtle": "#EDEDED"
+      }
+    },
+    "disabled": {
+      "text": "#595959",
+      "surface": "#EDEDED",
+      "border": "#D6D6D6"
+    }
+  },
+  "space": {
+    "12": "0.75rem",
+    "16": "1rem",
+    "24": "1.5rem",
+    "32": "2rem",
+    "48": "3rem",
+    "gap": {
+      "tight": "0.75rem",
+      "default": "1rem",
+      "group": "2rem",
+      "section": "3rem"
+    },
+    "inset": {
+      "control-x": "1.5rem",
+      "container": "1.5rem",
+      "cell-x": "1rem"
+    }
+  },
+  "size": {
+    "16": "1rem",
+    "20": "1.25rem",
+    "24": "1.5rem",
+    "48": "3rem",
+    "52": "3.25rem",
+    "56": "3.5rem",
+    "control": {
+      "default": "3.25rem",
+      "compact": "3rem"
+    },
+    "row": "3.5rem",
+    "icon": "1.25rem"
+  },
+  "radius": {
+    "0": "0rem",
+    "4": "0.25rem",
+    "6": "0.375rem",
+    "8": "0.5rem",
+    "full": "9999px",
+    "control": "0.375rem",
+    "badge": "0.25rem",
+    "container": "0.5rem",
+    "round": "9999px"
+  },
+  "border-width": {
+    "2": "2px",
+    "3": "3px",
+    "default": "2px",
+    "focus": "3px"
+  },
+  "font": {
+    "size": {
+      "16": "1rem",
+      "18": "1.125rem",
+      "19": "1.1875rem",
+      "22": "1.375rem",
+      "28": "1.75rem",
+      "36": "2.25rem"
+    },
+    "weight": {
+      "400": 400,
+      "700": 700
+    },
+    "line-height": {
+      "1_2": 1.2,
+      "1_25": 1.25,
+      "1_3": 1.3,
+      "1_4": 1.4,
+      "1_5": 1.5,
+      "1_6": 1.6
+    },
+    "family": {
+      "atkinson-hyperlegible": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "ibm-plex-mono": "\"IBM Plex Mono\", ui-monospace, monospace"
+    }
+  },
+  "duration": {
+    "fast": "120ms",
+    "moderate": "200ms",
+    "relaxed": "320ms"
+  },
+  "easing": {
+    "standard": "cubic-bezier(0.2, 0, 0, 1)"
+  },
+  "opacity": {
+    "50": 0.5,
+    "disabled": 0.5
+  },
+  "shadow": {
+    "none": "0px 0px 0px 0px #00000000"
+  },
+  "accessible-first": {
+    "theme": {
+      "base": {
+        "radius": {
+          "control": "0.375rem",
+          "badge": "0.25rem",
+          "container": "0.5rem"
+        },
+        "type": {
+          "display": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "title": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "heading": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "body": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "label": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "caption": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          },
+          "data": {
+            "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif"
+          }
+        }
+      },
+      "light": {
+        "color": {
+          "surface": {
+            "canvas": "#F7F7F7",
+            "default": "#FFFFFF",
+            "raised": "#FFFFFF",
+            "sunken": "#EDEDED",
+            "selected": "#E1ECFF",
+            "inverse": "#141414",
+            "scrim": "#0000008C"
+          },
+          "text": {
+            "primary": "#141414",
+            "secondary": "#333333",
+            "muted": "#595959",
+            "inverse": "#FFFFFF",
+            "on-action": "#FFFFFF",
+            "link": "#083C93"
+          },
+          "border": {
+            "default": "#D6D6D6",
+            "strong": "#595959",
+            "focus": "#0B4FC0"
+          },
+          "action": {
+            "primary": {
+              "@": "#0B4FC0",
+              "hover": "#083C93"
+            },
+            "secondary": {
+              "@": "#FFFFFF",
+              "hover": "#EDEDED"
+            }
+          },
+          "status": {
+            "info": {
+              "@": "#0B5B55",
+              "subtle": "#E0F2F1"
+            },
+            "success": {
+              "@": "#1F7A3A",
+              "subtle": "#E3F4EA"
+            },
+            "warning": {
+              "@": "#8A5600",
+              "subtle": "#FFF3D6"
+            },
+            "danger": {
+              "@": "#C42B2B",
+              "subtle": "#FDE7E7"
+            }
+          },
+          "category": {
+            "1": {
+              "@": "#0B4FC0",
+              "subtle": "#E1ECFF"
+            },
+            "2": {
+              "@": "#0F766E",
+              "subtle": "#E0F2F1"
+            },
+            "3": {
+              "@": "#1F7A3A",
+              "subtle": "#E3F4EA"
+            },
+            "4": {
+              "@": "#8A5600",
+              "subtle": "#FFF3D6"
+            },
+            "5": {
+              "@": "#595959",
+              "subtle": "#EDEDED"
+            }
+          },
+          "disabled": {
+            "text": "#595959",
+            "surface": "#EDEDED",
+            "border": "#D6D6D6"
+          }
+        },
+        "elevation": {
+          "card": "0px 0px 0px 0px #00000000",
+          "overlay": "0px 0px 0px 0px #00000000"
+        }
+      }
+    }
+  },
+  "type": {
+    "display": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "2.25rem",
+      "line-height": 1.2,
+      "font-weight": 700
+    },
+    "title": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1.75rem",
+      "line-height": 1.25,
+      "font-weight": 700
+    },
+    "heading": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1.375rem",
+      "line-height": 1.3,
+      "font-weight": 700
+    },
+    "body": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1.1875rem",
+      "line-height": 1.6,
+      "font-weight": 400
+    },
+    "label": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1.125rem",
+      "line-height": 1.4,
+      "font-weight": 700
+    },
+    "caption": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1rem",
+      "line-height": 1.5,
+      "font-weight": 400
+    },
+    "data": {
+      "font-family": "\"Atkinson Hyperlegible\", Verdana, sans-serif",
+      "font-size": "1.1875rem",
+      "line-height": 1.6,
+      "font-weight": 400
+    }
+  },
+  "motion": {
+    "duration": {
+      "feedback": "200ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.2, 0, 0, 1)"
+    }
+  },
+  "elevation": {
+    "card": "0px 0px 0px 0px #00000000",
+    "overlay": "0px 0px 0px 0px #00000000"
+  },
+  "button": {
+    "primary": {
+      "background": {
+        "@": "#0B4FC0",
+        "hover": "#083C93"
+      },
+      "label": "#FFFFFF"
+    },
+    "secondary": {
+      "background": {
+        "@": "#FFFFFF",
+        "hover": "#EDEDED"
+      },
+      "label": "#141414",
+      "border": "#595959"
+    },
+    "ghost": {
+      "background-hover": "#EDEDED",
+      "label": "#083C93"
+    },
+    "height": "3.25rem",
+    "padding-x": "1.5rem",
+    "radius": "0.375rem",
+    "font-size": "1.125rem",
+    "font-weight": 700,
+    "focus-ring": "#0B4FC0",
+    "icon-size": "1.25rem",
+    "disabled": {
+      "background": "#EDEDED",
+      "label": "#595959",
+      "border": "#D6D6D6"
+    }
+  },
+  "input": {
+    "background": "#FFFFFF",
+    "border": {
+      "@": "#595959",
+      "focus": "#0B4FC0"
+    },
+    "text": "#141414",
+    "placeholder": "#595959",
+    "height": "3.25rem",
+    "padding-x": "1.5rem",
+    "radius": "0.375rem",
+    "font-size": "1.1875rem",
+    "disabled": {
+      "background": "#EDEDED",
+      "border": "#D6D6D6",
+      "text": "#595959"
+    }
+  },
+  "control": {
+    "checked": "#0B4FC0",
+    "track": "#595959",
+    "thumb": "#FFFFFF",
+    "radius": "0.25rem"
+  },
+  "badge": {
+    "radius": "0.25rem",
+    "padding-x": "0.75rem",
+    "font-size": "1rem",
+    "neutral": {
+      "background": "#EDEDED",
+      "label": "#333333"
+    },
+    "success": {
+      "background": "#E3F4EA",
+      "label": "#1F7A3A"
+    },
+    "warning": {
+      "background": "#FFF3D6",
+      "label": "#8A5600"
+    },
+    "danger": {
+      "background": "#FDE7E7",
+      "label": "#C42B2B"
+    },
+    "info": {
+      "background": "#E0F2F1",
+      "label": "#0B5B55"
+    }
+  },
+  "card": {
+    "background": "#FFFFFF",
+    "border": "#D6D6D6",
+    "radius": "0.5rem",
+    "padding": "1.5rem",
+    "shadow": "0px 0px 0px 0px #00000000"
+  },
+  "table": {
+    "header-background": "#EDEDED",
+    "row-height": "3.5rem",
+    "cell-padding-x": "1rem",
+    "row-border": "#D6D6D6",
+    "row-selected": "#E1ECFF",
+    "font-size": "1.1875rem"
+  },
+  "tabs": {
+    "indicator": "#0B4FC0",
+    "label": {
+      "@": "#333333",
+      "active": "#141414"
+    }
+  },
+  "overlay": {
+    "background": "#FFFFFF",
+    "radius": "0.5rem",
+    "shadow": "0px 0px 0px 0px #00000000",
+    "scrim": "#0000008C",
+    "item-height": "3.25rem"
+  },
+  "tooltip": {
+    "background": "#141414",
+    "label": "#FFFFFF"
+  },
+  "transition": {
+    "duration": "200ms",
+    "easing": "cubic-bezier(0.2, 0, 0, 1)"
+  }
+}

package/assets/tokens/accessible-first/shadcn.css

@@ -0,0 +1,21 @@
+/* Accessible first: shadcn/ui's radius, shadow and text scale, mapped onto the scheme's tokens. Generated. */
+@theme inline {
+  --radius-xs: var(--radius-badge);
+  --radius-sm: var(--radius-badge);
+  --radius-md: var(--radius-control);
+  --radius-lg: var(--radius-container);
+  --radius-xl: var(--radius-container);
+  --shadow-xs: var(--elevation-card);
+  --shadow-sm: var(--elevation-card);
+  --shadow-md: var(--elevation-overlay);
+  --shadow-lg: var(--elevation-overlay);
+  --shadow-xl: var(--elevation-overlay);
+  --text-xs: var(--type-caption-font-size);
+  --text-xs--line-height: var(--type-caption-line-height);
+  --text-sm: var(--type-body-font-size);
+  --text-sm--line-height: var(--type-body-line-height);
+  --text-base: var(--type-body-font-size);
+  --text-base--line-height: var(--type-body-line-height);
+  --text-lg: var(--type-heading-font-size);
+  --text-lg--line-height: var(--type-heading-line-height);
+}

package/assets/tokens/accessible-first/theme.css

@@ -0,0 +1,101 @@
+/* Accessible first: shadcn variables and a Tailwind v4 theme, mapped onto Open DS semantics. Generated. */
+/* Set on every element that can change brand, mode or scheme, so var() resolves there. */
+:root,
+[data-scheme],
+[data-brand],
+.dark {
+  --background: var(--color-surface-canvas);
+  --foreground: var(--color-text-primary);
+  --card: var(--color-surface-default);
+  --card-foreground: var(--color-text-primary);
+  --popover: var(--color-surface-raised);
+  --popover-foreground: var(--color-text-primary);
+  --primary: var(--color-action-primary);
+  --primary-foreground: var(--color-text-on-action);
+  --secondary: var(--color-action-secondary);
+  --secondary-foreground: var(--color-text-primary);
+  --muted: var(--color-surface-sunken);
+  --muted-foreground: var(--color-text-muted);
+  --accent: var(--color-surface-sunken);
+  --accent-foreground: var(--color-text-primary);
+  --destructive: var(--color-status-danger);
+  --border: var(--color-border-default);
+  --input: var(--color-border-strong);
+  --ring: var(--color-border-focus);
+  --radius: var(--radius-control);
+  --sidebar: var(--color-surface-default);
+  --sidebar-foreground: var(--color-text-primary);
+  --sidebar-primary: var(--color-action-primary);
+  --sidebar-primary-foreground: var(--color-text-on-action);
+  --sidebar-accent: var(--color-surface-sunken);
+  --sidebar-accent-foreground: var(--color-text-primary);
+  --sidebar-border: var(--color-border-default);
+  --sidebar-ring: var(--color-border-focus);
+  --chart-1: var(--color-category-1);
+  --chart-2: var(--color-category-2);
+  --chart-3: var(--color-category-3);
+  --chart-4: var(--color-category-4);
+  --chart-5: var(--color-category-5);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --font-display: var(--type-display-font-family);
+  --text-display: var(--type-display-font-size);
+  --text-display--line-height: var(--type-display-line-height);
+  --text-display--font-weight: var(--type-display-font-weight);
+  --font-title: var(--type-title-font-family);
+  --text-title: var(--type-title-font-size);
+  --text-title--line-height: var(--type-title-line-height);
+  --text-title--font-weight: var(--type-title-font-weight);
+  --font-heading: var(--type-heading-font-family);
+  --text-heading: var(--type-heading-font-size);
+  --text-heading--line-height: var(--type-heading-line-height);
+  --text-heading--font-weight: var(--type-heading-font-weight);
+  --font-body: var(--type-body-font-family);
+  --text-body: var(--type-body-font-size);
+  --text-body--line-height: var(--type-body-line-height);
+  --text-body--font-weight: var(--type-body-font-weight);
+  --font-label: var(--type-label-font-family);
+  --text-label: var(--type-label-font-size);
+  --text-label--line-height: var(--type-label-line-height);
+  --text-label--font-weight: var(--type-label-font-weight);
+  --font-caption: var(--type-caption-font-family);
+  --text-caption: var(--type-caption-font-size);
+  --text-caption--line-height: var(--type-caption-line-height);
+  --text-caption--font-weight: var(--type-caption-font-weight);
+  --font-data: var(--type-data-font-family);
+  --text-data: var(--type-data-font-size);
+  --text-data--line-height: var(--type-data-line-height);
+  --text-data--font-weight: var(--type-data-font-weight);
+}