@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/DS1/0-face/translations-format.ts

@@ -0,0 +1,216 @@
+/**
+ * The one translations file format every 0001 product writes its words in.
+ *
+ *   { "<language>": { "<key>": "<text>" } }
+ *
+ * - `<language>` is a code from the language list (`da`, `pt-BR`).
+ * - `<key>` is any string. Ezo, the 0001 site and Peer key by the English
+ *   sentence (`"Send": "Send"`); Link and Consistency key by a dotted id
+ *   (`"settings.language": "Language"`). Both are the same format.
+ * - English (`en`) is the fallback table. When a key is missing from `en`
+ *   too, the key itself is the English text, so a sentence key needs no
+ *   English entry and an id key needs one.
+ * - Placeholders are `{name}` and `{{name}}` alike; `fillPlaceholders` (and
+ *   `translate(key, params)`) fill both.
+ * - A per-language file (`/translations/da.json`) holds one language's table,
+ *   wrapped as `{ "da": { … } }` (or bare, `{ … }`, which `readLanguageFile`
+ *   wraps).
+ * - A product can ship the same shape as a TypeScript module and pass it to
+ *   `loadTranslations`.
+ *
+ * A word is looked up in the language, its primary subtag (`ja-JP` reads
+ * `ja`), its relatives (`nn` reads `nb`, `pt-BR` reads `pt`), then English,
+ * then the key itself. See `resolveText`.
+ */
+import { DEFAULT_LANGUAGE, LANGUAGES, fallbackLanguages } from "./languages";
+
+/** One language's words, key to text. Values may be absent (a `Partial` table). */
+export type TranslationTable = { readonly [key: string]: string | undefined };
+
+/** Every language's words, keyed by language code. */
+export type TranslationsFile = { readonly [language: string]: TranslationTable | undefined };
+
+/** Values for a text's placeholders, by name. */
+export type TranslationParams = { readonly [name: string]: string | number | boolean };
+
+/** The language whose table is the fallback. */
+export const FALLBACK_LANGUAGE = DEFAULT_LANGUAGE;
+
+const PLACEHOLDER = /\{\{\s*([\w.-]+)\s*\}\}|\{([\w.-]+)\}/g;
+
+/** The names of a text's placeholders, `{name}` and `{{name}}` alike, each once. */
+export function placeholdersIn(text: string): string[] {
+  const names: string[] = [];
+  for (const match of String(text ?? "").matchAll(PLACEHOLDER)) {
+    const name = match[1] ?? match[2];
+    if (name && !names.includes(name)) {
+      names.push(name);
+    }
+  }
+  return names;
+}
+
+/**
+ * Fill a text's placeholders, `{name}` and `{{name}}` alike. A placeholder
+ * with no value is left as written, so it shows rather than vanishing.
+ */
+export function fillPlaceholders(text: string, params?: TranslationParams): string {
+  if (!params) {
+    return text;
+  }
+  return text.replace(PLACEHOLDER, (whole, double: string | undefined, single: string | undefined) => {
+    const name = (double ?? single) as string;
+    return Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : whole;
+  });
+}
+
+/** A key's English text: the `en` table's, else the key itself. */
+export function englishText(file: TranslationsFile, key: string): string {
+  return file[FALLBACK_LANGUAGE]?.[key] || key;
+}
+
+export type ResolvedText = {
+  text: string;
+  /** The language the text was found in, or null when the key itself was used */
+  language: string | null;
+};
+
+/**
+ * A key's text in `language`, from several sets of words: for each language
+ * in the fallback order (the language, its primary subtag, its relatives,
+ * English), the first set that has the key wins. With no text anywhere, the
+ * key itself. Placeholders are filled from `params`.
+ */
+export function resolveText(
+  key: string,
+  language: string,
+  sources: readonly (TranslationsFile | undefined)[],
+  params?: TranslationParams
+): ResolvedText {
+  const order = fallbackLanguages(language);
+  if (!order.includes(FALLBACK_LANGUAGE)) {
+    order.push(FALLBACK_LANGUAGE);
+  }
+
+  for (const code of order) {
+    for (const source of sources) {
+      const text = source?.[code]?.[key];
+      if (text) {
+        return { text: fillPlaceholders(text, params), language: code };
+      }
+    }
+  }
+  return { text: fillPlaceholders(key, params), language: null };
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * A per-language file's words as a translations file: `{ "da": { … } }` as it
+ * is, a bare `{ … }` table wrapped under `language`. Null when it is neither.
+ */
+export function readLanguageFile(language: string, value: unknown): TranslationsFile | null {
+  if (!isPlainObject(value)) {
+    return null;
+  }
+  const wrapped = value[language];
+  if (isPlainObject(wrapped)) {
+    return value as TranslationsFile;
+  }
+  const values = Object.values(value);
+  if (values.length > 0 && values.every((text) => typeof text === "string")) {
+    return { [language]: value as TranslationTable };
+  }
+  if (values.length > 0 && values.every(isPlainObject)) {
+    return value as TranslationsFile;
+  }
+  return null;
+}
+
+export type TranslationsCheck = {
+  /** True when the value is a translations file a product can load */
+  valid: boolean;
+  /** What makes it unloadable */
+  errors: string[];
+  /** What loads but is likely a mistake */
+  warnings: string[];
+};
+
+export type TranslationsCheckOptions = {
+  /** The languages the file may hold. Defaults to the language list. */
+  languages?: readonly string[];
+};
+
+const ID_KEY = /^[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)+$/;
+
+/**
+ * Check a value against the format. Errors: it is not an object of language
+ * tables, or a text is not a string. Warnings: a language outside the list,
+ * an id key (`settings.language`) with no English text, a translation whose
+ * placeholders differ from its English text's.
+ */
+export function validateTranslations(
+  value: unknown,
+  options: TranslationsCheckOptions = {}
+): TranslationsCheck {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  if (!isPlainObject(value)) {
+    return {
+      valid: false,
+      errors: ["Expected an object keyed by language code."],
+      warnings,
+    };
+  }
+
+  const known = new Set((options.languages ?? LANGUAGES).map((code) => code.toLowerCase()));
+  const file = value as Record<string, unknown>;
+  const english = isPlainObject(file[FALLBACK_LANGUAGE])
+    ? (file[FALLBACK_LANGUAGE] as Record<string, unknown>)
+    : {};
+
+  for (const [language, table] of Object.entries(file)) {
+    if (!isPlainObject(table)) {
+      errors.push(`"${language}" should hold an object of words.`);
+      continue;
+    }
+    if (!known.has(language.toLowerCase())) {
+      warnings.push(`"${language}" is not in the language list.`);
+    }
+
+    for (const [key, text] of Object.entries(table)) {
+      if (text === undefined) {
+        continue;
+      }
+      if (typeof text !== "string") {
+        errors.push(`"${language}" → "${key}" should be a string.`);
+        continue;
+      }
+      if (language === FALLBACK_LANGUAGE) {
+        continue;
+      }
+
+      const source = typeof english[key] === "string" ? (english[key] as string) : undefined;
+      if (source === undefined && ID_KEY.test(key)) {
+        warnings.push(`"${key}" has no English text, so English readers see the key.`);
+      }
+      const expected = placeholdersIn(source ?? key).sort().join(", ");
+      const found = placeholdersIn(text).sort().join(", ");
+      if (expected !== found) {
+        warnings.push(
+          `"${language}" → "${key}" has placeholders [${found}] where English has [${expected}].`
+        );
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors, warnings: [...new Set(warnings)] };
+}
+
+/** Whether a value is a translations file a product can load. */
+export function isTranslationsFile(value: unknown): value is TranslationsFile {
+  return validateTranslations(value).valid;
+}

package/DS1/1-root/component-appearance.css

@@ -0,0 +1,32 @@
+/* Shape is a surface preference. Keep these base lengths unscaled: each
+ * component resolves them with its own --ds-sf in component-metrics.css. */
+[data-ds-shape="square"],
+:host([data-ds-shape="square"]) {
+  --ds-corner-size: 0px;
+  --ds-corner-shape: round;
+  --ds-button-inset: 0.5px;
+}
+
+[data-ds-shape="rounded"],
+:host([data-ds-shape="rounded"]) {
+  --ds-corner-size: 4px;
+  --ds-corner-shape: round;
+  --ds-button-inset: 2.5px;
+}
+
+[data-ds-shape="circular"],
+:host([data-ds-shape="circular"]) {
+  --ds-corner-size: 999px;
+  --ds-corner-shape: round;
+  --ds-button-inset: 5px;
+}
+
+/* A squircle needs twice an arc's radius for the same apparent corner.
+ * Circular controls keep true semicircles even in a squircle browser. */
+@supports (corner-shape: squircle) {
+  [data-ds-shape="rounded"],
+  :host([data-ds-shape="rounded"]) {
+    --ds-corner-size: 8px;
+    --ds-corner-shape: squircle;
+  }
+}

package/DS1/1-root/component-metrics.css

@@ -0,0 +1,21 @@
+@import "./component-appearance.css";
+
+/* Resolve dimensions where a component is drawn. Inherited calc() values have
+ * already used their ancestor's scale. Base tokens stay unscaled and inherit;
+ * resolved tokens can still be overridden directly on a component.
+ * data-ds-surface gives ordinary layout elements the same scaled measures.
+ */
+:root,
+:host,
+:where([data-ds-surface]) {
+  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));
+  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));
+  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));
+  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));
+  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));
+  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));
+  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));
+  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));
+  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));
+  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));
+}

package/DS1/1-root/component-tokens.css

@@ -0,0 +1,90 @@
+@import "./component-metrics.css";
+
+/* Shared component tokens. Scoped names keep embedded documents independent.
+ * Products may set tokens at their surface; component implementations stay shared.
+ */
+:root {
+  /* Component scale is independent of an embedded document. */
+  --ds-sf: 1;
+
+  /* ----------------------------------------------------------
+   SIZING SCALE
+   One base unit and its multipliers, as in DS one.
+   ---------------------------------------------------------- */
+
+  --ds-1: 20px;
+  --ds-01: calc(var(--ds-1) * 0.1);
+  --ds-025: calc(var(--ds-1) * 0.25);
+  --ds-05: calc(var(--ds-1) * 0.5);
+  --ds-08: calc(var(--ds-1) * 0.8);
+  --ds-2: calc(var(--ds-1) * 2);
+  --ds-3: calc(var(--ds-1) * 3);
+  --ds-4: calc(var(--ds-1) * 4);
+
+  /* ----------------------------------------------------------
+   PALETTE
+   ---------------------------------------------------------- */
+
+  --ds-white: #ffffff;
+  --ds-black: #1f1f1f;
+  --ds-slate: #1e1e1e;
+  --ds-slate-light: #ececec;
+  --ds-slate-dark: #363636;
+  --ds-grey: #7a7a7a;
+
+  --ds-tuned-red: #ff5f5f;
+  --ds-pink: #f5aad1;
+  --ds-sharp-blue: #594dff;
+  --ds-zenith-blue: #ccccff;
+  --ds-apple-green: #99ff73;
+  --ds-yellow: #eaff00;
+  --ds-orange: #fec20d;
+
+  --ds-accent-color: light-dark(var(--ds-yellow), #bbcc00);
+
+  /* ----------------------------------------------------------
+   TYPE
+   ---------------------------------------------------------- */
+
+  --ds-typeface-regular:
+    "Inter Arrows", "GT America", "GT-America-Standard-Regular", Inter, system-ui, -apple-system, sans-serif;
+  --ds-typeface-compressed: "Inter Arrows", "GT-America-Compressed-Regular", var(--ds-typeface-regular);
+  --ds-typeface-regular-jp: "Inter Arrows", "GT America", "Noto Sans JP", sans-serif;
+  /* GT America exposes circular dots as stylistic set 05. */
+  --ds-font-features: "ss05" 1;
+
+  --ds-type-weight-default: 400;
+  --ds-type-weight-bold: 500;
+
+  /* ----------------------------------------------------------
+   SURFACES
+   The chrome's `--chrome-panel-*` tokens read these.
+   ---------------------------------------------------------- */
+
+  --ds-paper: light-dark(#f4f4f4, #2c2c2c);
+  --ds-text-color: light-dark(var(--ds-black), var(--ds-white));
+  --ds-text-color-muted: light-dark(#5f5f5f, #cacaca);
+  --ds-title-color: light-dark(var(--ds-grey), #9a9a9a);
+  --ds-border-color: light-dark(#d8d8d8, #3d3d3d);
+  --ds-fill: light-dark(var(--ds-slate-light), var(--ds-slate-dark));
+  --ds-fill-hover: light-dark(#e2e2e2, #404040);
+  --ds-focus-ring: var(--ds-sharp-blue);
+
+  --ds-button-text-color: var(--ds-text-color);
+  --ds-button-background-color-primary: var(--ds-accent-color);
+  --ds-button-text-color-on-accent: var(--ds-black);
+  --ds-button-background-color-secondary: var(--ds-fill);
+  --ds-icon-color: currentColor;
+
+  /* Shared fields, including the row treatment carried over from Ezo's forms. */
+  --ds-input-background: light-dark(#e8e8e8, #303030);
+  --ds-input-color: light-dark(#2a2a2a, #f5f5f5);
+  --ds-input-placeholder-color: light-dark(#797979, #ababab);
+  --ds-input-disabled-color: light-dark(#555555, #d0d0d0);
+  --ds-input-reveal-color: light-dark(#1e1e1e, #f5f5f5);
+}
+
+/* A page written in Japanese sets its labels in the Japanese face. */
+:root:lang(ja) {
+  --ds-typeface-regular: var(--ds-typeface-regular-jp);
+}

package/DS1/1-root/controls.css

@@ -0,0 +1,261 @@
+@import "./component-metrics.css";
+
+/*
+ * Native controls in shared dress.
+ *
+ * DS one keeps a few components as plain classes on native elements. shared does
+ * the same for everything a person types into or picks from: text fields,
+ * selects and checkboxes stay `<input>` and `<select>`, so labels, form
+ * semantics and React's controlled inputs work as they always have.
+ *
+ * `.ds-button` is the `ds-button` element's look on a native `<button>`,
+ * for a button inside a drag handle. The drag library recognises only native
+ * controls: inside a handle it would lift the row on Space where a
+ * `ds-button` was meant to be pressed. Both read the same custom properties.
+ */
+
+.ds-button {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: var(--ds-button-align, flex-start);
+  gap: var(--ds-button-gap, calc(4px * var(--ds-sf)));
+  height: var(--ds-button-height, var(--ds-control-height));
+  margin: 0;
+  padding: var(--ds-button-padding, 0);
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: var(--ds-button-background, transparent);
+  color: var(--ds-button-color, var(--ds-button-text-color));
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-button--icon {
+  justify-content: center;
+  width: var(--ds-button-height, var(--ds-control-height));
+  padding: 0;
+  color: var(--ds-button-color, var(--ds-text-color-muted));
+}
+
+.ds-button--icon:hover:not(:disabled) {
+  --ds-button-color: var(--ds-text-color);
+}
+
+.ds-button:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ds-input,
+.ds-select {
+  box-sizing: border-box;
+  min-width: 0;
+  height: var(--ds-input-height, var(--ds-control-height));
+  margin: 0;
+  padding: 0 calc(4px * var(--ds-sf));
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: var(--ds-fill);
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  outline: none;
+}
+
+.ds-input::placeholder {
+  color: var(--ds-title-color);
+}
+
+.ds-input:focus-visible,
+.ds-select:focus-visible,
+.ds-checkbox:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-input:disabled,
+.ds-select:disabled,
+.ds-checkbox:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ds-select {
+  appearance: none;
+  padding-right: calc(16px * var(--ds-sf));
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 9px) 50%,
+    calc(100% - 6px) 50%;
+  background-size:
+    3px 3px,
+    3px 3px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.ds-checkbox {
+  width: calc(12px * var(--ds-sf));
+  height: calc(12px * var(--ds-sf));
+  margin: 0;
+  accent-color: var(--ds-text-color);
+  cursor: pointer;
+}
+
+/*
+ * `.ds-button--primary` and `--secondary` are the element's variants on a
+ * native button: a form's submit button stays native so Enter in a field
+ * submits the form.
+ */
+
+.ds-button--primary,
+.ds-button--secondary {
+  --ds-button-padding: 0 calc(4px * var(--ds-sf));
+}
+
+.ds-button--primary {
+  --ds-button-background: var(--ds-button-background-color-primary);
+  --ds-button-color: var(--ds-button-text-color-on-accent);
+}
+
+.ds-button--secondary {
+  --ds-button-background: var(--ds-button-background-color-secondary);
+}
+
+.ds-button--secondary:hover:not(:disabled) {
+  --ds-button-background: var(--ds-fill-hover);
+}
+
+.ds-button--wide {
+  justify-content: center;
+  width: 100%;
+}
+
+/*
+ * `.ds-menu` is the `ds-menu` element's look on a menu a library draws:
+ * the context menu's items come from Radix, which owns their roles, focus and
+ * keys, so they stay Radix's and take shared's paper, rows and type.
+ */
+
+.ds-menu {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: calc(8 * var(--ds-unit));
+  max-width: calc(12 * var(--ds-unit));
+  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));
+  overflow-y: auto;
+  padding: calc(4px * var(--ds-sf));
+  border: 1px solid var(--ds-border-color);
+  border-radius: var(--ds-radius-card);
+  background: var(--ds-paper);
+  color: var(--ds-text-color);
+  box-shadow: 0 8px 24px color-mix(in srgb, #000000 18%, transparent);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+.ds-menu__item {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: calc(4px * var(--ds-sf));
+  width: 100%;
+  min-height: var(--ds-row-height);
+  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));
+  border-radius: calc(4px * var(--ds-sf));
+  color: var(--ds-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+  user-select: none;
+  outline: none;
+}
+
+.ds-menu__item--inset {
+  padding-left: calc(var(--ds-unit) + calc(4px * var(--ds-sf)));
+}
+
+.ds-menu__item:hover,
+.ds-menu__item:focus-visible,
+.ds-menu__item[data-highlighted] {
+  background: var(--ds-fill);
+}
+
+.ds-menu__item[data-variant="destructive"] {
+  color: var(--ds-tuned-red);
+}
+
+.ds-menu__item[data-disabled],
+.ds-menu__item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ds-menu__indicator {
+  position: absolute;
+  left: calc(6px * var(--ds-sf));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(12px * var(--ds-sf));
+  height: calc(12px * var(--ds-sf));
+  pointer-events: none;
+}
+
+.ds-menu__indicator svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ds-menu__chevron {
+  width: calc(12px * var(--ds-sf));
+  height: calc(12px * var(--ds-sf));
+  margin-left: auto;
+  color: var(--ds-text-color-muted);
+}
+
+.ds-menu__label {
+  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+}
+
+.ds-menu__separator {
+  height: 1px;
+  margin: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));
+  background: var(--ds-border-color);
+}
+
+.ds-menu__shortcut {
+  margin-left: auto;
+  padding-left: var(--ds-unit);
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+}

package/DS1/1-root/fonts/Inter-LICENSE.md

@@ -0,0 +1,7 @@
+# Inter
+
+`Inter-Arrows.woff2` is Inter Regular 4.1, cut down to its arrows (U+2190–21FF, U+27F0–27FF, U+2900–297F, U+2B00–2BFF). It is loaded as "Inter Arrows" and leads every typeface token, so an arrow is drawn in Inter whatever the text around it is set in.
+
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter).
+
+This font software is licensed under the SIL Open Font License, Version 1.1, available with a FAQ at https://openfontlicense.org.

package/DS1/1-root/fonts/Iosevka-LICENSE.md

@@ -0,0 +1,7 @@
+# Iosevka
+
+`Iosevka-Regular.woff2` is Iosevka Regular 33.3.6, cut down to the characters code uses (Latin, punctuation, arrows, maths, box drawing). It is the font of `--typeface-mono`.
+
+Copyright 2015-2025, Renzhi Li (aka. Belleve Invis, belleve@typeof.net).
+
+This font software is licensed under the SIL Open Font License, Version 1.1, available with a FAQ at https://openfontlicense.org. Iosevka: https://github.com/be5invis/Iosevka

package/DS1/1-root/grid.css

@@ -0,0 +1,31 @@
+/* Design system 1 shared sizing foundation */
+:root {
+  --sf: 1;
+  --01: calc(var(--1) * 0.1);
+  --025: calc(var(--1) * 0.25);
+  --05: calc(var(--1) * 0.5);
+  --08: calc(var(--1) * 0.8);
+  --1: 20px; /* SET BASE UNIT HERE FOR EXAMPLE 20px */
+  --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
+  --4: calc(var(--1) * 4);
+  --8: calc(var(--1) * 8);
+  --12: calc(var(--1) * 12);
+  --20: calc(var(--1) * 20);
+
+  /* Semantic sizing units */
+
+  --tenth: var(--01);
+  --quarter: var(--025);
+  --half: var(--05);
+  --eight-tenth: var(--08);
+  --unit: var(--1);
+  --double: var(--2);
+  --triple: var(--3);
+  --quad: var(--4);
+  --oct: var(--8);
+  --dozen: var(--12);
+  --twenty: var(--20);
+
+  --ds-grid-unit: calc(var(--unit) * var(--sf));
+}