@vector-im/compound-design-tokens 10.2.2 → 10.2.4

package/src/colors/styles.css

@@ -0,0 +1,258 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap");
+
+/*
+Inter Dynamic Metrics 
+https://rsms.me/inter/dynmetrics/
+*/
+:root {
+  --f-ls-14: -0.006em;
+  --f-ls-16: -0.011em;
+  --f-ls-24: -0.019em;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: Inter, system-ui;
+  font-size: 1rem;
+  color: var(--color-gray-1400-light);
+  margin: 16px;
+}
+
+summary:hover {
+  cursor: pointer;
+}
+
+details[open] summary {
+  margin-bottom: 8px;
+}
+
+pre {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.gap-0_5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.m-b-1 {
+  margin-block-end: 1rem;
+}
+
+.tokens-studio {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.key-colors {
+  border-radius: 8px;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+}
+
+.key-colors__swatch {
+  height: 24px;
+  width: 40px;
+}
+
+.key-colors__picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.key-colors__picker input[type="color"] {
+  width: 40px;
+  height: 24px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+}
+
+.themes,
+.themes-alpha {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.theme {
+  border-radius: 8px;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+}
+
+.theme__action {
+  transition: transform 250ms ease;
+}
+
+.theme__action:hover {
+  transform: scale(1.1);
+}
+
+.theme__swatch {
+  height: 24px;
+  width: 40px;
+}
+
+.tests__case {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.bg {
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.bg--light {
+  background-color: var(--color-bg-light);
+}
+
+.bg--lightHc {
+  background-color: var(--color-bg-lightHc);
+}
+
+.bg--dark {
+  background-color: var(--color-bg-dark);
+}
+
+.bg--darkHc {
+  background-color: var(--color-bg-darkHc);
+}
+
+.button {
+  align-items: center;
+  border-radius: 9999px;
+  display: inline-flex;
+  font-size: 1rem;
+  font-weight: 500;
+  height: 44px;
+  letter-spacing: var(--f-ls-16);
+  padding: 8px 24px;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+/*
+.button--{colorName}-{themeName} {
+  background-color: var(--color-{colorName}-900-{themeName});
+  color: var(--color-bg-{themeName});
+}`;
+*/
+
+.button--gray-light {
+  background-color: var(--color-gray-1400-light);
+  color: var(--color-bg-light);
+}
+
+.button--gray-lightHc {
+  background-color: var(--color-gray-1400-lightHc);
+  color: var(--color-bg-lightHc);
+}
+
+.button--gray-dark {
+  background-color: var(--color-gray-1400-dark);
+  color: var(--color-bg-dark);
+}
+
+.button--gray-darkHc {
+  background-color: var(--color-gray-1400-darkHc);
+  color: var(--color-bg-darkHc);
+}
+
+.label {
+  align-items: center;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px;
+  display: inline-flex;
+  font-size: 0.875rem;
+  font-weight: 400;
+  height: 32px;
+  letter-spacing: var(--f-ls-14);
+  padding: 4px 12px;
+}
+
+.label:hover {
+  cursor: pointer;
+}
+
+/*
+.label--{colorName}-{themeName} {
+  background-color: var(--color-{colorName}-300-{themeName});
+  border-color: var(--color-{colorName}-700-{themeName});
+  color: var(--color-{colorName}-900-{themeName});
+}
+*/
+
+.text-heading {
+  font-size: 1.5rem;
+  letter-spacing: var(--f-ls-24);
+  margin-top: 0;
+}
+
+.text-body-md {
+  font-size: 1rem;
+  letter-spacing: var(--f-ls-16);
+}
+
+.text-body-sm {
+  font-size: 0.875rem;
+  letter-spacing: var(--f-ls-14);
+}
+
+/*
+.text--primary-{themeName} {
+  color: var(--color-{colorName}-1400-light);
+}
+.text--secondary-{themeName} {
+  color: var(--color-{colorName}-900-light);
+}
+*/

package/src/colors/theme.js

@@ -0,0 +1,239 @@
+import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
+import chroma from "chroma-js";
+import { getAlphaColor, hslaToHex } from "./alphredo.js";
+
+// Color spaces for color interpolation
+// CAM02, CAM02p, LCH, LAB, HSL, HSLuv, HSV, RGB, OKLAB, OKLCH
+
+// OKLCH, false
+// CAM02p, true
+// LAB, true
+// RGB, true
+
+export const leonardoConfig = {
+  backgroundColor: "gray",
+  colorSpace: "OKLCH",
+  colorSmoothing: false,
+  formula: "wcag2",
+  output: "HEX",
+  colors: {
+    gray: [hslToHex(215, 20, 90), hslToHex(215, 8, 50), hslToHex(215, 6, 25)],
+    red: [hslToHex(358, 100, 58), hslToHex(350, 100, 30)],
+    orange: [hslToHex(32, 100, 48), hslToHex(12, 100, 30)],
+    yellow: [hslToHex(50, 100, 50), hslToHex(25, 100, 20)],
+    lime: [hslToHex(100, 68, 50), hslToHex(115, 86, 25)],
+    green: [hslToHex(163, 87, 42), hslToHex(168, 100, 25)],
+    cyan: [hslToHex(185, 80, 45), hslToHex(200, 98, 35)],
+    blue: [hslToHex(212, 98, 46), hslToHex(222, 95, 25)],
+    purple: [hslToHex(258, 94, 64), hslToHex(265, 100, 35)],
+    fuchsia: [hslToHex(295, 56, 50), hslToHex(285, 80, 25)],
+    pink: [hslToHex(334, 90, 50), hslToHex(330, 91, 25)],
+  },
+  themes: {
+    light: {
+      ratios: [
+        1.03, 1.06, 1.12, 1.25, 1.5, 1.75, 2.25, 3.5, 5.25, 6.5, 8, 10.5, 13.75,
+        16.75,
+      ],
+      contrast: 1,
+      lightness: 100,
+      saturation: 100,
+    },
+    dark: {
+      ratios: [
+        1.03, 1.06, 1.12, 1.25, 1.5, 1.75, 2.25, 3.5, 5.25, 6.5, 8, 10.5, 13.75,
+        16,
+      ],
+      contrast: 1,
+      lightness: 6,
+      saturation: 97,
+    },
+    lightHc: {
+      ratios: [
+        1.06, 1.12, 1.25, 1.37, 1.75, 2.25, 3.25, 4.75, 8.87, 10, 11.75, 13.25,
+        16, 17,
+      ],
+      contrast: 1,
+      lightness: 100,
+      saturation: 100,
+    },
+    darkHc: {
+      ratios: [
+        1.06, 1.12, 1.25, 1.37, 1.75, 2.25, 3.25, 4.75, 8.87, 10, 11.75, 13.25,
+        16, 17,
+      ],
+      contrast: 1,
+      lightness: 6,
+      saturation: 97,
+    },
+  },
+};
+
+export function hslToHex(h, s, l) {
+  return chroma.hsl(h, s / 100, l / 100).hex();
+}
+
+function generateThemeJson(leonardoConfig, theme) {
+  const colorSpace = leonardoConfig.colorSpace;
+  const colorSmoothing = leonardoConfig.colorSmoothing;
+  const contrastRatios = leonardoConfig.themes[theme].ratios;
+
+  const gray = new BackgroundColor({
+    name: "gray",
+    colorKeys: leonardoConfig.colors.gray,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const blue = new Color({
+    name: "blue",
+    colorKeys: leonardoConfig.colors.blue,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const cyan = new Color({
+    name: "cyan",
+    colorKeys: leonardoConfig.colors.cyan,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const fuchsia = new Color({
+    name: "fuchsia",
+    colorKeys: leonardoConfig.colors.fuchsia,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const green = new Color({
+    name: "green",
+    colorKeys: leonardoConfig.colors.green,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const lime = new Color({
+    name: "lime",
+    colorKeys: leonardoConfig.colors.lime,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const orange = new Color({
+    name: "orange",
+    colorKeys: leonardoConfig.colors.orange,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const pink = new Color({
+    name: "pink",
+    colorKeys: leonardoConfig.colors.pink,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const purple = new Color({
+    name: "purple",
+    colorKeys: leonardoConfig.colors.purple,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const red = new Color({
+    name: "red",
+    colorKeys: leonardoConfig.colors.red,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const yellow = new Color({
+    name: "yellow",
+    colorKeys: leonardoConfig.colors.yellow,
+    colorspace: colorSpace,
+    ratios: contrastRatios,
+    smooth: colorSmoothing,
+  });
+
+  const colorMap = {
+    gray,
+    red,
+    orange,
+    yellow,
+    lime,
+    green,
+    cyan,
+    blue,
+    purple,
+    fuchsia,
+    pink,
+  };
+
+  // Add in the custom colour at the end if it has been set.
+  if (leonardoConfig.colors.custom) {
+    colorMap.custom = new Color({
+      name: "custom",
+      colorKeys: leonardoConfig.colors.custom,
+      colorspace: colorSpace,
+      ratios: contrastRatios,
+      smooth: colorSmoothing,
+    });
+  }
+
+  const leonardoTheme = new Theme({
+    colors: Object.values(colorMap),
+    backgroundColor: colorMap[leonardoConfig.backgroundColor],
+    contrast: leonardoConfig.themes[theme].contrast,
+    lightness: leonardoConfig.themes[theme].lightness,
+    saturation: leonardoConfig.themes[theme].saturation,
+    output: leonardoConfig.output,
+    formula: leonardoConfig.formula,
+  });
+
+  return leonardoTheme.contrastColors;
+}
+
+export function generateThemesJson(leonardoConfig) {
+  const output = {};
+  for (const theme of Object.keys(leonardoConfig.themes)) {
+    output[theme] = generateThemeJson(leonardoConfig, theme);
+  }
+  return output;
+}
+
+export function generateCustomColors(customColorHex) {
+  leonardoConfig.colors.custom = [customColorHex];
+  const themes = generateThemesJson(leonardoConfig);
+
+  return Object.fromEntries(
+    Object.entries(themes).map(([theme, contrastColors]) => {
+      const customColors = contrastColors.find(
+        (item) => item && item.name === "custom",
+      );
+
+      const baseMap = Object.fromEntries(
+        customColors.values.map(({ name, value }) => [name, value]),
+      );
+
+      // include the alpha variants too
+      for (const [name, value] of Object.entries(baseMap)) {
+        const alphaColor = getAlphaColor(value, contrastColors[0].background);
+        baseMap[`alpha${name.charAt(0).toUpperCase() + name.slice(1)}`] =
+          hslaToHex(alphaColor.h, alphaColor.s, alphaColor.l, alphaColor.a);
+      }
+
+      return [theme, baseMap];
+    }),
+  );
+}