@design-system-rte/core 0.2.0 → 0.6.0

package/design-tokens/scripts/tokens-generator.ts

@@ -0,0 +1,128 @@
+import fs from "fs";
+import path from "path";
+
+import { buildScssVariable, generateScssFile, themesOutputDir, tokensOutputDir, TokenValue, UNIT } from "./common";
+import { ColorMode, ColorToken, extractColors } from "./tokens-generators/colors";
+import { extractLayout, LayoutToken } from "./tokens-generators/layout";
+import { extractOpacity, OpacityToken } from "./tokens-generators/opacity";
+import { extractShadows, ShadowToken } from "./tokens-generators/shadows";
+import { extractTypography, TypographyToken } from "./tokens-generators/typography";
+
+export enum Collection {
+  COLORS = "Semantic : Colors",
+  TYPOGRAPHY = "Semantic : Type",
+  SPACING = "Spacing",
+  BORDER = "Border",
+  SHADOWS = "Shadows",
+  LAYOUT = "Layout",
+  OPACITY = "Opacity",
+  SIZE = "Size",
+}
+
+export interface DefaultToken {
+  [category: string]: {
+    [subCategory: string]: TokenValue;
+  };
+}
+
+export type TokenVariables = TypographyToken | ShadowToken | LayoutToken | DefaultToken | OpacityToken | ColorToken;
+
+export interface TokenItem {
+  collection: Collection;
+  mode: string | ColorMode;
+  variables: TokenVariables;
+}
+
+if (!fs.existsSync(tokensOutputDir)) {
+  fs.mkdirSync(tokensOutputDir);
+}
+
+if (!fs.existsSync(themesOutputDir)) {
+  fs.mkdirSync(themesOutputDir);
+}
+
+export function generateTokensScssFiles(json: TokenItem[]): void {
+  for (const tokenItem of json) {
+    let scss = "";
+    let filename = "";
+    switch (tokenItem.collection) {
+      case Collection.COLORS:
+        {
+          const mode = tokenItem.mode as ColorMode;
+          filename = buildScssFileName(mode);
+          const filePath = path.join(themesOutputDir, filename);
+
+          scss = extractColors(tokenItem.variables as ColorToken, mode);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.TYPOGRAPHY:
+        if (tokenItem.mode === "desktop") {
+          filename = `_typography.scss`;
+          const filePath = path.join(tokensOutputDir, filename);
+
+          scss += extractTypography(tokenItem.variables as TypographyToken);
+          generateScssFile(scss, filePath);
+        } else {
+          console.log("Skipping typography : " + tokenItem.mode);
+        }
+        break;
+
+      case Collection.OPACITY:
+        {
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, filename);
+
+          scss += extractOpacity(tokenItem.variables as OpacityToken, tokenItem.collection);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.SHADOWS:
+        {
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, filename);
+
+          scss += extractShadows(tokenItem.variables as ShadowToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.LAYOUT:
+        {
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, filename);
+
+          scss += extractLayout(tokenItem.variables as LayoutToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      default:
+        {
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, filename);
+
+          scss += extractDefault(tokenItem.variables as DefaultToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+    }
+  }
+}
+
+function extractDefault(variables: DefaultToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const subCategory in variables[category]) {
+      const token = variables[category][subCategory];
+      scss += buildScssVariable([category, subCategory], `${token.$value}${UNIT}`);
+    }
+  }
+  return scss;
+}
+
+function buildScssFileName(collection: string): string {
+  return `_${collection.toLowerCase()}.scss`;
+}

package/design-tokens/scripts/tokens-generators/colors.ts

@@ -0,0 +1,133 @@
+import path from "path";
+
+import { generateScssFile, INDENT, themesOutputDir, tokensOutputDir } from "../common";
+
+export enum ColorTheme {
+  BLEU_ICEBERG = "bleu-iceberg",
+  VIOLET = "violet",
+  VERT_FORET = "vert-foret",
+}
+
+export enum ColorMode {
+  BLEU_ICEBERG_LIGHT = "bleu-iceberg-light",
+  BLEU_ICEBERG_DARK = "bleu-iceberg-dark",
+  VIOLET_LIGHT = "violet-light",
+  VIOLET_DARK = "violet-dark",
+  VERT_FORET_LIGHT = "vert-foret-light",
+  VERT_FORET_DARK = "vert-foret-dark",
+}
+
+export interface ColorTokenValue {
+  $type: string;
+  $scopes: string[];
+  $value: string;
+}
+
+export interface ColorToken {
+  [category: string]:
+    | {
+        [colorTokenName: string]: ColorTokenValue;
+      }
+    | ColorTokenValue;
+}
+
+const rawColorCategories = ["gradient", "elevation"];
+
+export function extractColors(variables: ColorToken, mode: ColorMode): string {
+  let scss = `@use '../../primitives/colors' as *;\n`;
+  scss += `@use '../../primitives/devColors' as *;\n\n`;
+  scss += `$${mode}: (\n`;
+  for (const category in variables) {
+    const categoryTokens = variables[category];
+    if ((categoryTokens as ColorTokenValue).$value) {
+      scss += extractTokenValue(categoryTokens as ColorTokenValue, mode, [category]);
+    } else {
+      scss += processSubTokens(categoryTokens as Record<string, ColorTokenValue>, mode, category, [category]);
+    }
+  }
+  scss += addDevColors(mode);
+  scss += ");\n";
+  return scss;
+}
+
+export function generateThemeMainScssFile() {
+  let scss = "";
+  Object.values(ColorMode).forEach((mode) => {
+    scss += `@forward "${mode}";\n`;
+  });
+  const pathFile = path.join(themesOutputDir, "_main.scss");
+  generateScssFile(scss, pathFile);
+}
+
+export function generateThemesFile() {
+  let scss = `@use "./themes/main" as *;\n\n`;
+  Object.values(ColorTheme).forEach((theme) => {
+    scss += `$${theme}: (\n`;
+    scss += `${INDENT.repeat(1)}"light": $${theme}-light,\n`;
+    scss += `${INDENT.repeat(1)}"dark": $${theme}-dark,\n`;
+    scss += `);\n`;
+  });
+  const filePath = path.join(tokensOutputDir, "_themes.scss");
+  generateScssFile(scss, filePath);
+}
+
+function extractTokenValue(token: ColorTokenValue, mode: ColorMode, path: string[]): string {
+  const tokenValue = buildColorsScssVariableValue(token.$value, mode);
+  if (rawColorCategories.includes(path[0])) {
+    return buildColorScssVariable(path, `${tokenValue}`);
+  } else {
+    return buildColorScssVariable(path, `$${tokenValue}`);
+  }
+}
+
+function processSubTokens(
+  tokens: Record<string, ColorTokenValue>,
+  mode: ColorMode,
+  category: string,
+  path: string[] = [],
+): string {
+  let scss = "";
+  for (const subCategory in tokens) {
+    const token = tokens[subCategory];
+    if (token.$value) {
+      scss += extractTokenValue(token, mode, [...path, subCategory]);
+    } else {
+      scss += processSubTokens(token as unknown as Record<string, ColorTokenValue>, mode, category, [
+        ...path,
+        subCategory,
+      ]);
+    }
+  }
+  return scss;
+}
+
+function buildColorScssVariable(variableName: string[], value: string): string {
+  return `${INDENT.repeat(1)}"${variableName.join("-")}": ${value},\n`.toLowerCase();
+}
+
+function buildColorsScssVariableValue(rawValue: string, mode: ColorMode): string {
+  const value = rawValue.split(`.${mode}.`)[1];
+  return value ? value.replace(/\./g, "-") : rawValue;
+}
+
+function addDevColors(mode: ColorMode): string {
+  const isLightMode = mode.includes("light");
+  let scss = "";
+  if (isLightMode) {
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-brand-hover-opacity-20": $${mode.replace("-light", "")}-700-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-hover-opacity-50": $greyscale-50-opacity-50,\n`;
+  } else {
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-brand-hover-opacity-20": $${mode.replace("-dark", "")}-200-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-hover-opacity-50": $greyscale-800-opacity-50,\n`;
+  }
+
+  return scss;
+}

package/design-tokens/scripts/tokens-generators/layout.ts

@@ -0,0 +1,22 @@
+import { buildScssVariable, TokenValue, UNIT } from "../common";
+
+export interface LayoutToken {
+  [category: string]: {
+    [size: string]: TokenValue;
+  };
+}
+
+export function extractLayout(variables: LayoutToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const size in variables[category]) {
+      const layoutToken = variables[category][size];
+      if (category === "column-number") {
+        scss += buildScssVariable([category, size], String(layoutToken.$value));
+      } else {
+        scss += buildScssVariable([category, size], `${layoutToken.$value}${UNIT}`);
+      }
+    }
+  }
+  return scss;
+}

package/design-tokens/scripts/tokens-generators/opacity.ts

@@ -0,0 +1,14 @@
+import { buildScssVariable, TokenValue } from "../common";
+
+export interface OpacityToken {
+  [percentage: string]: TokenValue;
+}
+
+export function extractOpacity(variables: OpacityToken, collection: string): string {
+  let scss = "";
+  for (const percentage in variables) {
+    const value = percentage.replace(/%$/, "");
+    scss += buildScssVariable([collection, value], percentage);
+  }
+  return scss;
+}

package/design-tokens/scripts/tokens-generators/shadows.ts

@@ -0,0 +1,18 @@
+import { buildScssVariable, TokenValue, UNIT } from "../common";
+
+export interface ShadowToken {
+  [category: string]: {
+    [shadowTokenName: string]: TokenValue;
+  };
+}
+
+export function extractShadows(variables: ShadowToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const shadowTokenName in variables[category]) {
+      const shadowToken = variables[category][shadowTokenName];
+      scss += buildScssVariable([category, shadowTokenName], `${String(shadowToken.$value)}${UNIT}`);
+    }
+  }
+  return scss;
+}

package/design-tokens/scripts/tokens-generators/typography.ts

@@ -0,0 +1,58 @@
+import { buildScssVariable, TokenValue } from "../common";
+
+export interface TypographyToken {
+  [category: string]: {
+    [size: string]: {
+      [weight: string]: {
+        [typographyTokenName: string]: TokenValue;
+      };
+    };
+  };
+}
+
+export function extractTypography(variables: TypographyToken): string {
+  let scss = "";
+  scss += `@use '../primitives/typography' as *;\n\n`;
+  for (const category in variables) {
+    scss += extractFromTypographyCategory(category, variables[category]);
+  }
+  return scss;
+}
+
+function extractFromTypographyCategory(category: string, categoryObj: TypographyToken[string]): string {
+  let scss = "";
+  for (const size in categoryObj) {
+    scss += extractFromTypographySize(category, size, categoryObj[size]);
+  }
+  return scss;
+}
+
+function extractFromTypographySize(category: string, size: string, sizeObj: TypographyToken[string][string]): string {
+  let scss = "";
+  for (const weight in sizeObj) {
+    scss += extractFromTypographyWeight(category, size, weight, sizeObj[weight]);
+  }
+  return scss;
+}
+
+function extractFromTypographyWeight(
+  category: string,
+  size: string,
+  weight: string,
+  weightObj: TypographyToken[string][string][string],
+): string {
+  let scss = "";
+  for (const typographyTokenName in weightObj) {
+    const typographyToken = weightObj[typographyTokenName];
+    const rawTypographyTokenValue =
+      typeof typographyToken.$value === "string"
+        ? typographyToken.$value.split("Type.desktop.")[1]
+        : typographyToken.$value;
+    const typographyTokenValue =
+      typeof rawTypographyTokenValue === "string"
+        ? rawTypographyTokenValue.replace(/\./g, "-")
+        : rawTypographyTokenValue;
+    scss += buildScssVariable([category, size, weight, typographyTokenName], `$${typographyTokenValue}`);
+  }
+  return scss;
+}

package/{tokens/_radius.scss → design-tokens/tokens/_border.scss}

@@ -9,4 +9,4 @@ $radius-pill: 999px;
 $width-xs: 1px;
 $width-s: 2px;
 $width-m: 4px;
-$width-l: 8px;
+$width-l: 8px;

package/design-tokens/tokens/_elevation.scss

@@ -0,0 +1,144 @@
+@use "shadows" as *;
+
+@mixin neutral-inner-shadow {
+  box-shadow: inset $inner-shadow-key-position-x $inner-shadow-key-position-y $inner-shadow-key-blur $inner-shadow-key-spread var(--elevation-shadow-key);
+}
+
+@mixin elevation-neutral-inner-shadow {
+  @include neutral-inner-shadow;
+  background: linear-gradient(0deg, var(--elevation-surface-inner-shadow) 0%, var(--elevation-surface-inner-shadow) 100%);
+}
+
+@mixin neutral-shadow-1 {
+  box-shadow: $shadow-1-key-position-x $shadow-1-key-position-y $shadow-1-key-blur $shadow-1-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-1 {
+  @include neutral-shadow-1;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-1) 0%, var(--elevation-surface-shadow-1) 100%);
+}
+
+@mixin neutral-shadow-2 {
+  box-shadow: $shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur $shadow-2-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-2 {
+  @include neutral-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
+@mixin neutral-shadow-3 {
+  box-shadow: $shadow-3-key-position-x $shadow-3-key-position-y $shadow-3-key-blur $shadow-3-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-3 {
+  @include neutral-shadow-3;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-3) 0%, var(--elevation-surface-shadow-3) 100%);
+}
+
+@mixin neutral-shadow-4 {
+  box-shadow: $shadow-4-key-position-x $shadow-4-key-position-y $shadow-4-key-blur $shadow-4-key-spread var(--elevation-shadow-key),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);
+}
+
+@mixin elevation-neutral-shadow-4 {
+  @include neutral-shadow-4;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-4) 0%, var(--elevation-surface-shadow-4) 100%);
+}
+
+@mixin neutral-shadow-5 {
+  box-shadow: $shadow-5-key-position-x $shadow-5-key-position-y $shadow-5-key-blur $shadow-5-key-spread var(--elevation-shadow-key-darker),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-darker);
+}
+
+@mixin elevation-neutral-shadow-5 {
+  @include neutral-shadow-5;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-5) 0%, var(--elevation-surface-shadow-5) 100%);
+}
+
+@mixin neutral-shadow-6 {
+  box-shadow: $shadow-6-key-position-x $shadow-6-key-position-y $shadow-6-key-blur $shadow-6-key-spread var(--elevation-shadow-key-darker),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-darker);
+}
+
+@mixin elevation-neutral-shadow-6 {
+  @include neutral-shadow-6;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-6) 0%, var(--elevation-surface-shadow-6) 100%);
+}
+
+@mixin brand-inner-shadow {
+  box-shadow: inset $inner-shadow-key-position-x $inner-shadow-key-position-y $inner-shadow-key-blur $inner-shadow-key-spread var(--elevation-shadow-key-brand);
+}
+
+@mixin elevation-brand-inner-shadow {
+  @include brand-inner-shadow;
+}
+
+@mixin brand-shadow-1 {
+  box-shadow:
+    $shadow-1-key-position-x $shadow-1-key-position-y $shadow-1-key-blur $shadow-1-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-1 {
+  @include brand-shadow-1;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-1) 0%, var(--elevation-surface-shadow-1) 100%);
+}
+
+@mixin brand-shadow-2 {
+  box-shadow:
+    $shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur $shadow-2-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-2 {
+  @include brand-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
+@mixin brand-shadow-3 {
+  box-shadow:
+    $shadow-3-key-position-x $shadow-3-key-position-y $shadow-3-key-blur $shadow-3-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-3 {
+  @include brand-shadow-3;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-3) 0%, var(--elevation-surface-shadow-3) 100%);
+}
+
+@mixin brand-shadow-4 {
+  box-shadow:
+    $shadow-4-key-position-x $shadow-4-key-position-y $shadow-4-key-blur $shadow-4-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-4 {
+  @include brand-shadow-4;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-4) 0%, var(--elevation-surface-shadow-4) 100%);
+}
+
+@mixin brand-shadow-5 {
+  box-shadow:
+    $shadow-5-key-position-x $shadow-5-key-position-y $shadow-5-key-blur $shadow-5-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-5 {
+  @include brand-shadow-5;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-5) 0%, var(--elevation-surface-shadow-5) 100%);
+}
+
+@mixin brand-shadow-6 {
+  box-shadow:
+    $shadow-6-key-position-x $shadow-6-key-position-y $shadow-6-key-blur $shadow-6-key-spread var(--elevation-shadow-key-brand),
+    $ambient-shadow-darker-position-x $ambient-shadow-darker-position-y $ambient-shadow-darker-blur $ambient-shadow-darker-spread var(--elevation-shadow-ambient-brand);
+}
+
+@mixin elevation-brand-shadow-6 {
+  @include brand-shadow-6;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-6) 0%, var(--elevation-surface-shadow-6) 100%);
+}

package/{tokens → design-tokens/tokens}/_layout.scss

@@ -11,4 +11,4 @@ $column-number-l: 12;
 $panel-width-xs: 56px;
 $panel-width-s: 320px;
 $panel-width-m: 400px;
-$panel-width-l: 504px;
+$panel-width-l: 504px;