@microbit/ui 0.1.0-alpha.10

package/src/base-tokens.ts

@@ -0,0 +1,1017 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * Token values (c) 2019, Segun Adebayo — Chakra UI's @chakra-ui/theme
+ * defaults, used under the MIT License (see LICENSE.md third-party notices).
+ *
+ * SPDX-License-Identifier: MIT
+ */
+// The base token scales, in Panda token format. Began as a mechanical
+// snapshot of Chakra UI v2's @chakra-ui/theme defaults; hand-maintained.
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
+// and `transition.property` (no Panda token category; inlined at use sites).
+
+export const colors = {
+  transparent: {
+    value: "transparent",
+  },
+  current: {
+    value: "currentColor",
+  },
+  black: {
+    value: "#000000",
+  },
+  white: {
+    value: "#FFFFFF",
+  },
+  whiteAlpha: {
+    "50": {
+      value: "rgba(255, 255, 255, 0.04)",
+    },
+    "100": {
+      value: "rgba(255, 255, 255, 0.06)",
+    },
+    "200": {
+      value: "rgba(255, 255, 255, 0.08)",
+    },
+    "300": {
+      value: "rgba(255, 255, 255, 0.16)",
+    },
+    "400": {
+      value: "rgba(255, 255, 255, 0.24)",
+    },
+    "500": {
+      value: "rgba(255, 255, 255, 0.36)",
+    },
+    "600": {
+      value: "rgba(255, 255, 255, 0.48)",
+    },
+    "700": {
+      value: "rgba(255, 255, 255, 0.64)",
+    },
+    "800": {
+      value: "rgba(255, 255, 255, 0.80)",
+    },
+    "900": {
+      value: "rgba(255, 255, 255, 0.92)",
+    },
+  },
+  blackAlpha: {
+    "50": {
+      value: "rgba(0, 0, 0, 0.04)",
+    },
+    "100": {
+      value: "rgba(0, 0, 0, 0.06)",
+    },
+    "200": {
+      value: "rgba(0, 0, 0, 0.08)",
+    },
+    "300": {
+      value: "rgba(0, 0, 0, 0.16)",
+    },
+    "400": {
+      value: "rgba(0, 0, 0, 0.24)",
+    },
+    "500": {
+      value: "rgba(0, 0, 0, 0.36)",
+    },
+    "600": {
+      value: "rgba(0, 0, 0, 0.48)",
+    },
+    "700": {
+      value: "rgba(0, 0, 0, 0.64)",
+    },
+    "800": {
+      value: "rgba(0, 0, 0, 0.80)",
+    },
+    "900": {
+      value: "rgba(0, 0, 0, 0.92)",
+    },
+  },
+  gray: {
+    "50": {
+      value: "#F7FAFC",
+    },
+    "100": {
+      value: "#EDF2F7",
+    },
+    "200": {
+      value: "#E2E8F0",
+    },
+    "300": {
+      value: "#CBD5E0",
+    },
+    "400": {
+      value: "#A0AEC0",
+    },
+    "500": {
+      value: "#718096",
+    },
+    "600": {
+      value: "#4A5568",
+    },
+    "700": {
+      value: "#2D3748",
+    },
+    "800": {
+      value: "#1A202C",
+    },
+    "900": {
+      value: "#171923",
+    },
+  },
+  red: {
+    "50": {
+      value: "#FFF5F5",
+    },
+    "100": {
+      value: "#FED7D7",
+    },
+    "200": {
+      value: "#FEB2B2",
+    },
+    "300": {
+      value: "#FC8181",
+    },
+    "400": {
+      value: "#F56565",
+    },
+    "500": {
+      value: "#E53E3E",
+    },
+    "600": {
+      value: "#C53030",
+    },
+    "700": {
+      value: "#9B2C2C",
+    },
+    "800": {
+      value: "#822727",
+    },
+    "900": {
+      value: "#63171B",
+    },
+  },
+  orange: {
+    "50": {
+      value: "#FFFAF0",
+    },
+    "100": {
+      value: "#FEEBC8",
+    },
+    "200": {
+      value: "#FBD38D",
+    },
+    "300": {
+      value: "#F6AD55",
+    },
+    "400": {
+      value: "#ED8936",
+    },
+    "500": {
+      value: "#DD6B20",
+    },
+    "600": {
+      value: "#C05621",
+    },
+    "700": {
+      value: "#9C4221",
+    },
+    "800": {
+      value: "#7B341E",
+    },
+    "900": {
+      value: "#652B19",
+    },
+  },
+  yellow: {
+    "50": {
+      value: "#FFFFF0",
+    },
+    "100": {
+      value: "#FEFCBF",
+    },
+    "200": {
+      value: "#FAF089",
+    },
+    "300": {
+      value: "#F6E05E",
+    },
+    "400": {
+      value: "#ECC94B",
+    },
+    "500": {
+      value: "#D69E2E",
+    },
+    "600": {
+      value: "#B7791F",
+    },
+    "700": {
+      value: "#975A16",
+    },
+    "800": {
+      value: "#744210",
+    },
+    "900": {
+      value: "#5F370E",
+    },
+  },
+  green: {
+    "50": {
+      value: "#F0FFF4",
+    },
+    "100": {
+      value: "#C6F6D5",
+    },
+    "200": {
+      value: "#9AE6B4",
+    },
+    "300": {
+      value: "#68D391",
+    },
+    "400": {
+      value: "#48BB78",
+    },
+    "500": {
+      value: "#38A169",
+    },
+    "600": {
+      value: "#2F855A",
+    },
+    "700": {
+      value: "#276749",
+    },
+    "800": {
+      value: "#22543D",
+    },
+    "900": {
+      value: "#1C4532",
+    },
+  },
+  teal: {
+    "50": {
+      value: "#E6FFFA",
+    },
+    "100": {
+      value: "#B2F5EA",
+    },
+    "200": {
+      value: "#81E6D9",
+    },
+    "300": {
+      value: "#4FD1C5",
+    },
+    "400": {
+      value: "#38B2AC",
+    },
+    "500": {
+      value: "#319795",
+    },
+    "600": {
+      value: "#2C7A7B",
+    },
+    "700": {
+      value: "#285E61",
+    },
+    "800": {
+      value: "#234E52",
+    },
+    "900": {
+      value: "#1D4044",
+    },
+  },
+  blue: {
+    "50": {
+      value: "#ebf8ff",
+    },
+    "100": {
+      value: "#bee3f8",
+    },
+    "200": {
+      value: "#90cdf4",
+    },
+    "300": {
+      value: "#63b3ed",
+    },
+    "400": {
+      value: "#4299e1",
+    },
+    "500": {
+      value: "#3182ce",
+    },
+    "600": {
+      value: "#2b6cb0",
+    },
+    "700": {
+      value: "#2c5282",
+    },
+    "800": {
+      value: "#2a4365",
+    },
+    "900": {
+      value: "#1A365D",
+    },
+  },
+  cyan: {
+    "50": {
+      value: "#EDFDFD",
+    },
+    "100": {
+      value: "#C4F1F9",
+    },
+    "200": {
+      value: "#9DECF9",
+    },
+    "300": {
+      value: "#76E4F7",
+    },
+    "400": {
+      value: "#0BC5EA",
+    },
+    "500": {
+      value: "#00B5D8",
+    },
+    "600": {
+      value: "#00A3C4",
+    },
+    "700": {
+      value: "#0987A0",
+    },
+    "800": {
+      value: "#086F83",
+    },
+    "900": {
+      value: "#065666",
+    },
+  },
+  purple: {
+    "50": {
+      value: "#FAF5FF",
+    },
+    "100": {
+      value: "#E9D8FD",
+    },
+    "200": {
+      value: "#D6BCFA",
+    },
+    "300": {
+      value: "#B794F4",
+    },
+    "400": {
+      value: "#9F7AEA",
+    },
+    "500": {
+      value: "#805AD5",
+    },
+    "600": {
+      value: "#6B46C1",
+    },
+    "700": {
+      value: "#553C9A",
+    },
+    "800": {
+      value: "#44337A",
+    },
+    "900": {
+      value: "#322659",
+    },
+  },
+  pink: {
+    "50": {
+      value: "#FFF5F7",
+    },
+    "100": {
+      value: "#FED7E2",
+    },
+    "200": {
+      value: "#FBB6CE",
+    },
+    "300": {
+      value: "#F687B3",
+    },
+    "400": {
+      value: "#ED64A6",
+    },
+    "500": {
+      value: "#D53F8C",
+    },
+    "600": {
+      value: "#B83280",
+    },
+    "700": {
+      value: "#97266D",
+    },
+    "800": {
+      value: "#702459",
+    },
+    "900": {
+      value: "#521B41",
+    },
+  },
+} as const;
+export const spacing = {
+  "1": {
+    value: "0.25rem",
+  },
+  "2": {
+    value: "0.5rem",
+  },
+  "3": {
+    value: "0.75rem",
+  },
+  "4": {
+    value: "1rem",
+  },
+  "5": {
+    value: "1.25rem",
+  },
+  "6": {
+    value: "1.5rem",
+  },
+  "7": {
+    value: "1.75rem",
+  },
+  "8": {
+    value: "2rem",
+  },
+  "9": {
+    value: "2.25rem",
+  },
+  "10": {
+    value: "2.5rem",
+  },
+  "12": {
+    value: "3rem",
+  },
+  "14": {
+    value: "3.5rem",
+  },
+  "16": {
+    value: "4rem",
+  },
+  "20": {
+    value: "5rem",
+  },
+  "24": {
+    value: "6rem",
+  },
+  "28": {
+    value: "7rem",
+  },
+  "32": {
+    value: "8rem",
+  },
+  "36": {
+    value: "9rem",
+  },
+  "40": {
+    value: "10rem",
+  },
+  "44": {
+    value: "11rem",
+  },
+  "48": {
+    value: "12rem",
+  },
+  "52": {
+    value: "13rem",
+  },
+  "56": {
+    value: "14rem",
+  },
+  "60": {
+    value: "15rem",
+  },
+  "64": {
+    value: "16rem",
+  },
+  "72": {
+    value: "18rem",
+  },
+  "80": {
+    value: "20rem",
+  },
+  "96": {
+    value: "24rem",
+  },
+  px: {
+    value: "1px",
+  },
+  "0.5": {
+    value: "0.125rem",
+  },
+  "1.5": {
+    value: "0.375rem",
+  },
+  "2.5": {
+    value: "0.625rem",
+  },
+  "3.5": {
+    value: "0.875rem",
+  },
+} as const;
+export const sizes = {
+  "1": {
+    value: "0.25rem",
+  },
+  "2": {
+    value: "0.5rem",
+  },
+  "3": {
+    value: "0.75rem",
+  },
+  "4": {
+    value: "1rem",
+  },
+  "5": {
+    value: "1.25rem",
+  },
+  "6": {
+    value: "1.5rem",
+  },
+  "7": {
+    value: "1.75rem",
+  },
+  "8": {
+    value: "2rem",
+  },
+  "9": {
+    value: "2.25rem",
+  },
+  "10": {
+    value: "2.5rem",
+  },
+  "12": {
+    value: "3rem",
+  },
+  "14": {
+    value: "3.5rem",
+  },
+  "16": {
+    value: "4rem",
+  },
+  "20": {
+    value: "5rem",
+  },
+  "24": {
+    value: "6rem",
+  },
+  "28": {
+    value: "7rem",
+  },
+  "32": {
+    value: "8rem",
+  },
+  "36": {
+    value: "9rem",
+  },
+  "40": {
+    value: "10rem",
+  },
+  "44": {
+    value: "11rem",
+  },
+  "48": {
+    value: "12rem",
+  },
+  "52": {
+    value: "13rem",
+  },
+  "56": {
+    value: "14rem",
+  },
+  "60": {
+    value: "15rem",
+  },
+  "64": {
+    value: "16rem",
+  },
+  "72": {
+    value: "18rem",
+  },
+  "80": {
+    value: "20rem",
+  },
+  "96": {
+    value: "24rem",
+  },
+  px: {
+    value: "1px",
+  },
+  "0.5": {
+    value: "0.125rem",
+  },
+  "1.5": {
+    value: "0.375rem",
+  },
+  "2.5": {
+    value: "0.625rem",
+  },
+  "3.5": {
+    value: "0.875rem",
+  },
+  max: {
+    value: "max-content",
+  },
+  min: {
+    value: "min-content",
+  },
+  full: {
+    value: "100%",
+  },
+  "3xs": {
+    value: "14rem",
+  },
+  "2xs": {
+    value: "16rem",
+  },
+  xs: {
+    value: "20rem",
+  },
+  sm: {
+    value: "24rem",
+  },
+  md: {
+    value: "28rem",
+  },
+  lg: {
+    value: "32rem",
+  },
+  xl: {
+    value: "36rem",
+  },
+  "2xl": {
+    value: "42rem",
+  },
+  "3xl": {
+    value: "48rem",
+  },
+  "4xl": {
+    value: "56rem",
+  },
+  "5xl": {
+    value: "64rem",
+  },
+  "6xl": {
+    value: "72rem",
+  },
+  "7xl": {
+    value: "80rem",
+  },
+  "8xl": {
+    value: "90rem",
+  },
+  prose: {
+    value: "60ch",
+  },
+  container: {
+    sm: {
+      value: "640px",
+    },
+    md: {
+      value: "768px",
+    },
+    lg: {
+      value: "1024px",
+    },
+    xl: {
+      value: "1280px",
+    },
+  },
+} as const;
+export const radii = {
+  none: {
+    value: "0",
+  },
+  sm: {
+    value: "0.125rem",
+  },
+  base: {
+    value: "0.25rem",
+  },
+  md: {
+    value: "0.375rem",
+  },
+  lg: {
+    value: "0.5rem",
+  },
+  xl: {
+    value: "0.75rem",
+  },
+  "2xl": {
+    value: "1rem",
+  },
+  "3xl": {
+    value: "1.5rem",
+  },
+  full: {
+    value: "9999px",
+  },
+} as const;
+export const fontSizes = {
+  "3xs": {
+    value: "0.45rem",
+  },
+  "2xs": {
+    value: "0.625rem",
+  },
+  xs: {
+    value: "0.75rem",
+  },
+  sm: {
+    value: "0.875rem",
+  },
+  md: {
+    value: "1rem",
+  },
+  lg: {
+    value: "1.125rem",
+  },
+  xl: {
+    value: "1.25rem",
+  },
+  "2xl": {
+    value: "1.5rem",
+  },
+  "3xl": {
+    value: "1.875rem",
+  },
+  "4xl": {
+    value: "2.25rem",
+  },
+  "5xl": {
+    value: "3rem",
+  },
+  "6xl": {
+    value: "3.75rem",
+  },
+  "7xl": {
+    value: "4.5rem",
+  },
+  "8xl": {
+    value: "6rem",
+  },
+  "9xl": {
+    value: "8rem",
+  },
+} as const;
+export const fontWeights = {
+  hairline: {
+    value: "100",
+  },
+  thin: {
+    value: "200",
+  },
+  light: {
+    value: "300",
+  },
+  normal: {
+    value: "400",
+  },
+  medium: {
+    value: "500",
+  },
+  semibold: {
+    value: "600",
+  },
+  bold: {
+    value: "700",
+  },
+  extrabold: {
+    value: "800",
+  },
+  black: {
+    value: "900",
+  },
+} as const;
+export const lineHeights = {
+  "3": {
+    value: ".75rem",
+  },
+  "4": {
+    value: "1rem",
+  },
+  "5": {
+    value: "1.25rem",
+  },
+  "6": {
+    value: "1.5rem",
+  },
+  "7": {
+    value: "1.75rem",
+  },
+  "8": {
+    value: "2rem",
+  },
+  "9": {
+    value: "2.25rem",
+  },
+  "10": {
+    value: "2.5rem",
+  },
+  normal: {
+    value: "normal",
+  },
+  none: {
+    value: "1",
+  },
+  shorter: {
+    value: "1.25",
+  },
+  short: {
+    value: "1.375",
+  },
+  base: {
+    value: "1.5",
+  },
+  tall: {
+    value: "1.625",
+  },
+  taller: {
+    value: "2",
+  },
+} as const;
+export const letterSpacings = {
+  tighter: {
+    value: "-0.05em",
+  },
+  tight: {
+    value: "-0.025em",
+  },
+  normal: {
+    value: "0",
+  },
+  wide: {
+    value: "0.025em",
+  },
+  wider: {
+    value: "0.05em",
+  },
+  widest: {
+    value: "0.1em",
+  },
+} as const;
+export const zIndex = {
+  hide: {
+    value: "-1",
+  },
+  auto: {
+    value: "auto",
+  },
+  base: {
+    value: "0",
+  },
+  docked: {
+    value: "10",
+  },
+  dropdown: {
+    value: "1000",
+  },
+  sticky: {
+    value: "1100",
+  },
+  banner: {
+    value: "1200",
+  },
+  overlay: {
+    value: "1300",
+  },
+  modal: {
+    value: "1400",
+  },
+  popover: {
+    value: "1500",
+  },
+  skipLink: {
+    value: "1600",
+  },
+  toast: {
+    value: "1700",
+  },
+  tooltip: {
+    value: "1800",
+  },
+} as const;
+export const blurs = {
+  none: {
+    value: "0",
+  },
+  sm: {
+    value: "4px",
+  },
+  base: {
+    value: "8px",
+  },
+  md: {
+    value: "12px",
+  },
+  lg: {
+    value: "16px",
+  },
+  xl: {
+    value: "24px",
+  },
+  "2xl": {
+    value: "40px",
+  },
+  "3xl": {
+    value: "64px",
+  },
+} as const;
+export const borders = {
+  none: {
+    value: "0",
+  },
+  "1px": {
+    value: "1px solid",
+  },
+  "2px": {
+    value: "2px solid",
+  },
+  "4px": {
+    value: "4px solid",
+  },
+  "8px": {
+    value: "8px solid",
+  },
+} as const;
+export const shadows = {
+  xs: {
+    value: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+  },
+  sm: {
+    value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  },
+  base: {
+    value: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+  },
+  md: {
+    value:
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  },
+  lg: {
+    value:
+      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  },
+  xl: {
+    value:
+      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+  },
+  "2xl": {
+    value: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  },
+  outline: {
+    value: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+  },
+  inner: {
+    value: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
+  },
+  none: {
+    value: "none",
+  },
+  "dark-lg": {
+    value:
+      "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px",
+  },
+} as const;
+export const durations = {
+  "ultra-fast": {
+    value: "50ms",
+  },
+  faster: {
+    value: "100ms",
+  },
+  fast: {
+    value: "150ms",
+  },
+  normal: {
+    value: "200ms",
+  },
+  slow: {
+    value: "300ms",
+  },
+  slower: {
+    value: "400ms",
+  },
+  "ultra-slow": {
+    value: "500ms",
+  },
+} as const;
+export const easings = {
+  "ease-in": {
+    value: "cubic-bezier(0.4, 0, 1, 1)",
+  },
+  "ease-out": {
+    value: "cubic-bezier(0, 0, 0.2, 1)",
+  },
+  "ease-in-out": {
+    value: "cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+} as const;
+export const breakpoints = {
+  sm: "30em",
+  md: "48em",
+  lg: "62em",
+  xl: "80em",
+  "2xl": "96em",
+} as const;