@cityway/design-tokens 1.0.1-beta001

package/_functions.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "primitives" as p;
+
+@function size($key) {
+  @return map.get(p.$sizing, $key);
+}
+
+@function color($type, $variant) {
+  @return map.get(p.$colors, $type, $variant);
+}
+
+@function border($type, $variant) {
+  @return map.get(p.$border, $type, $variant);
+}
+
+@function font($type, $variant) {
+  @return map.get(p.$font, $type, $variant);
+}
+
+@function hex-to-rgb($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
+@function grid($type, $variant) {
+  @return map.get(p.$grid, $type, $variant);
+}

package/_index.scss

@@ -0,0 +1,3 @@
+@forward "primitives";
+@forward "functions";
+@forward "theme-mapping";

package/_primitives.scss

@@ -0,0 +1,239 @@
+@use "sass:map";
+
+$prefix: cw;
+
+$dropshadow-blur: (
+  none: 0rem,
+  xs: 0.125rem,
+  sm: 0.25rem,
+  md: 0.5rem
+);
+
+$dropshadow-spread: (
+  none: 0rem,
+  xs: 0.125rem
+);
+
+$dropshadow-position: (
+  xs: 0.0625rem,
+  sm: 0.125rem,
+  md: 0.25rem
+);
+
+// Grid
+$grid: (
+  breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+  ),
+  columns: (
+    number: 12,
+    gutter: 1rem
+  )
+);
+
+// On récupère la gouttière de la map pour le calcul SASS
+$current-gutter: map.get($grid, "columns", "gutter");
+
+// On génère dynamiquement les max-widths
+$calculated-container-widths: ();
+@each $bp, $value in map.get($grid, "breakpoints") {
+  @if $value > 0 {
+    // Calcul : Breakpoint - (Gouttière * 2)
+    $calc-width: $value - ($current-gutter * 2);
+    $calculated-container-widths: map.merge($calculated-container-widths, ($bp: $calc-width));
+  }
+}
+
+// On met à jour la map globale pour ton mixin generate-grid-vars
+$grid: map.merge($grid, ("container-max-widths": $calculated-container-widths));
+
+// Colors
+// ---------------------------------
+$colors: (
+  base: (
+    dark: #1A1A1A,
+    "black": #000000,
+    "white": #ffffff,
+    disabled: #696969,
+    w-overlay: rgba(#ffffff, 0),
+    w-overlay-90: rgba(#ffffff, 0.9)
+  ),
+  "grey": (
+    b-overlay-10: rgba(#000000, 0.1),
+    b-overlay-15: rgba(#000000, 0.15),
+    b-overlay-20: rgba(#000000, 0.2),
+    b-overlay-35: rgba(#000000, 0.35),
+    b-overlay-40: rgba(#000000, 0.4),
+    b-overlay-50: rgba(#000000, 0.5),
+    50: #F9F9F9,
+    100: #F2F2F2,
+    200: #E6E6E6,
+    250: #DFDFDF,
+    300: #CCCCCC,
+    400: #B5B5B5,
+    500: #939393,
+    600: #828282,
+    700: #696969,
+    800: #444444,
+    900: #313131,
+    950: #1A1A1A
+  ),
+  primary: (
+    p-overlay-25: rgba(#107099, 0.25),
+    p-overlay-50: rgba(#107099, 0.5),
+    500: #107099,
+    600: #0D5878
+  ),
+  info: (
+    50: #DEE8FD,
+    400: #0F58E0,
+    500: #0B40A2
+  ),
+  success: (
+    s-overlay-50: rgba(#44853C, 0.5),
+    50: #EBF5EA,
+    500: #44853C,
+    600: #366930
+  ),
+  warning: (
+    w-overlay-50: rgba(#E8580C, 0.5),
+    50: #FFF9E6,
+    500: #E8580C,
+    600: #DF3603
+  ),
+  danger: (
+    d-overlay-50: rgba(#E1001A, 0.5),
+    50: #FFE5E8,
+    500: #E1001A,
+    600: #B30015
+  ),
+  disruption: (
+    50: #FFE5E8,
+    500: #E1001A
+  ),
+  accessibility: (
+    500: #387DA2
+  ),
+  carbon: (
+    success: #44853C,
+    warning: #E8580C,
+    danger: #E1001A
+  ),
+  loyalty: (
+    500: #FDCC55
+  ),
+  poi: (
+    black-500: #1A1A1A,
+    black-overlay-50: rgba(#000000, 0.5),
+    blue-500: #115FC5,
+    blue-overlay-50: rgba(#115FC5, 0.5),
+    green-500: #007575,
+    green-overlay-50: rgba(#007575, 0.5),
+    purple-500: #9B51E0,
+    purple-overlay-50: rgba(#9B51E0, 0.5),
+    red-500: #B04A5A,
+    red-overlay-50: rgba(#B04A5A, 0.5),
+  ),
+  real-time: (
+    success: #7C9E71,
+    warning: #D97C4A,
+    danger: #E47185,
+    disabled: rgba(#696969, 0.5)
+  ),
+);
+
+// Colors
+// ---------------------------------
+$sizing: (
+  none: 0rem,
+  5xs: 0.125rem,
+  4xs: 0.25rem,
+  3xs: 0.375rem,
+  2xs: 0.5rem,
+  xs: 0.625rem,
+  sm: 0.75rem,
+  md: 1rem,
+  lg: 1.25rem,
+  xl: 1.5rem,
+  2xl: 2rem,
+  3xl: 2.5rem,
+  4xl: 3rem,
+  5xl: 3.5rem,
+  6xl: 3.75rem,
+  7xl: 5rem,
+  8xl: 6.25rem
+);
+
+$border: (
+  br: ( // border-radius
+    none: map.get($sizing, none),
+    round: map.get($sizing, 8xl),
+    xs: map.get($sizing, 4xs),
+    md: map.get($sizing, 2xs),
+    xl: map.get($sizing, sm),
+    2xl: map.get($sizing, md),
+    3xl: map.get($sizing, lg),
+    4xl: map.get($sizing, xl),
+  ),
+  bw: ( //border-width
+    none: map.get($sizing, none),
+    xs: 0.0625rem,
+    sm: map.get($sizing, 5xs),
+    md: 0.1875rem,
+    lg: map.get($sizing, 4xs)
+  ),
+  bs: ( // box-shadow
+    md: 0 0.25rem 1rem -0.063rem rgba(#000000, 0.1)
+  )
+);
+
+$font: (
+  ff: ( //font-family
+    nunito: "Nunito",
+    opensans: "Open Sans",
+    poppins: "Poppins",
+    helvetica: "Helvetica"
+  ),
+  fs: ( // font-size
+    6xl: map.get($sizing, 7xl),
+    5xl: map.get($sizing, 5xl),
+    4xl: map.get($sizing, 3xl),
+    3xl: map.get($sizing, 2xl),
+    2xl: map.get($sizing, xl),
+    xl: map.get($sizing, lg),
+    lg: 1.125rem,
+    md: map.get($sizing, md),
+    md-rwd: map.get($sizing, md),
+    sm: 0.875rem,
+    xs: map.get($sizing, sm),
+    2xs: map.get($sizing, xs),
+    3xs: map.get($sizing, 2xs),
+  ),
+  fw: ( // font weight
+    light: 300,
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800
+  ),
+  lh: ( // line-height
+    6xl: 1.15,
+    5xl: 1.25,
+    4xl: 1.2,
+    3xl: 1.25,
+    2xl: 1.333,
+    xl: 1.4,
+    lg: 1.5,
+    md: 1.5,
+    md-rwd: 1.5,
+    sm: 1.43,
+    xs: 1.333,
+    2xs: 1.4,
+    3xs: 1.2
+  )
+);

package/_theme-mapping.scss

@@ -0,0 +1,231 @@
+@use "sass:map";
+@use "primitives" as *;
+@use "functions" as *;
+
+
+// THEME FO
+////////////////////////////////////////////////////////////////
+
+$theme-fo-colors: (
+  base: (
+    dark: #1A1A1A,
+    "black": #000000,
+    "white": #ffffff,
+    disabled: #696969
+  ),
+  primary: (
+    base: color(primary, 500),
+    hover: color(primary, 600),
+    contrasted: color(base, "white")
+  ),
+  secondary: (
+    base: color(primary, 500),
+    hover: color(primary, 600),
+    contrasted: color(base, "white")
+  ),
+  success: (
+    base: color(success, 500),
+    hover: color(success, 600),
+    contrasted: color(base, "white"),
+    light: color(success, 50)
+  ),
+  info: (
+    base: color(info, 500),
+    hover: color(info, 400),
+    contrasted: color(base, "white"),
+    light: color(info, 50)
+  ),
+  warning: (
+    base: color(warning, 500),
+    hover: color(warning, 600),
+    contrasted: color("grey", 950),
+    light: color(warning, 50)
+  ),
+  danger: (
+    base: color(danger, 500),
+    hover: color(danger, 600),
+    contrasted: color(base, "white"),
+    light: color(danger, 50)
+  ),
+  light: (
+    base: color("grey", 50),
+    hover: color("grey", 100),
+    contrasted: color("grey", 900)
+  ),
+  dark: (
+    base: color(base, dark),
+    hover: color("grey", 950),
+    contrasted: color(base, "white")
+  ),
+  disabled: (
+    base: color(base, disabled),
+    contrasted: color(base, "white")
+  ),
+  body: (
+    bg: color(base, "white"),
+    color: color("grey", 950)
+  ),
+  link: (
+    color: color(primary, 500),
+    hover: color(primary, 600)
+  ),
+);
+
+$theme-fo-props: (
+  body: (
+    fs: 1rem,
+    fw: 400,
+    lh: 1.5,
+    ff-heading: ('"#{font(ff, nunito)}"', sans-serif),
+    ff-text: ('"#{font(ff, nunito)}"', sans-serif)
+  ),
+  link: (
+    decoration: underline
+  ),
+  border: (
+    radius: border(br, 2xl),
+    radius-input: border(br, round)
+  ),
+  shadow: (
+    default: 0 0.25rem 1rem -0.063rem rgba(#000000, 0.1),
+    hover: 0 0.25rem 1rem -0.063rem rgba(#000000, 0.35),
+  )
+);
+
+// THEME BO
+////////////////////////////////////////////////////////////////
+
+$theme-bo-colors: (
+  base: (
+    dark: #1A1A1A,
+    "black": #000000,
+    "white": #ffffff,
+    disabled: #696969
+  ),
+  primary: (
+    base: #02c0ce,
+    hover: #02aeba,
+    contrasted: color(base, "white")
+  ),
+  secondary: (
+    base: #777edd,
+    hover: #6c72c8,
+    contrasted: color(base, "white")
+  ),
+  success: (
+    base: #0acf97,
+    hover: #09bb89,
+    contrasted: color(base, "white"),
+    light: #daf8ef
+  ),
+  info: (
+    base: #45bbe0,
+    hover: #3ea9cb,
+    contrasted: color(base, "white"),
+    light: #e3f5fa
+  ),
+  warning: (
+    base: #f9bc0b,
+    hover: #e1aa0a,
+    contrasted: color("grey", 950),
+    light: #fef5da
+  ),
+  danger: (
+    base: #f1556c,
+    hover: #da4d62,
+    contrasted: color(base, "white"),
+    light:  #fde6e9
+  ),
+  light: (
+    base: #eef2f7,
+    hover: color("grey", 100),
+    contrasted: color("grey", 900)
+  ),
+  dark: (
+    base: #313a46,
+    hover: color("grey", 950),
+    contrasted: color(base, "white")
+  ),
+  disabled: (
+    base: color(base, disabled),
+    contrasted: color(base, "white")
+  ),
+  body: (
+    bg: #f3f6f8,
+    color: #4c4c5c
+  ),
+  link: (
+    color: #02c0ce,
+    hover: color(primary, 600)
+  ),
+);
+
+
+$theme-bo-props: (
+  body: (
+    fs: 1rem,
+    fw: 400,
+    lh: 1.5,
+    ff-heading: ('"#{font(ff, nunito)}"', sans-serif),
+    ff-text: ('"#{font(ff, nunito)}"', sans-serif)
+  ),
+  link: (
+    decoration: underline
+  ),
+  border: (
+    radius: border(br, md),
+    radius-input: border(br, xs)
+  ),
+  shadow: (
+    default: 0 0 35px 0 rgba(154, 161, 171, .15),
+    hover: 0 0 35px 0 rgba(154, 161, 171, .35)
+  )
+);
+
+// MIXINS
+////////////////////////////////////////////////////////////////
+
+@mixin color-with-rgb($name, $color) {
+  --#{$name}: #{$color};
+
+  // On génère la version RGB seulement si c'est une couleur sans alpha
+  @if type-of($color) == 'color' and alpha($color) == 1 {
+    --#{$name}-rgb: #{hex-to-rgb($color)};
+  }
+}
+
+@mixin generate-theme-colors($color-mapping) {
+  @each $color-name, $variants in $color-mapping {
+    @each $variant-name, $value in $variants {
+      @if $variant-name == 'base' {
+        @include color-with-rgb(#{$prefix}-#{$color-name}, $value);
+      } @else {
+        @include color-with-rgb(#{$prefix}-#{$color-name}-#{$variant-name}, $value);
+      }
+    }
+  }
+}
+
+@mixin generate-theme-props($props-mapping) {
+  @each $component-name, $properties in $props-mapping {
+    @each $prop-name, $value in $properties {
+        @if type-of($value) == 'list' {
+        // Pour les listes (comme font-family), on les joint avec des virgules
+        --#{$prefix}-#{$component-name}-#{$prop-name}: #{$value};
+      } @else {
+        --#{$prefix}-#{$component-name}-#{$prop-name}: #{$value};
+      }
+    }
+  }
+}
+
+// MIXINS FOR COMMON ELEMENTS
+////////////////////////////////////////////////////////////////
+
+@mixin generate-grid-vars($map) {
+  @each $group-name, $group-values in $map {
+    @each $key, $value in $group-values {
+      --#{$group-name}-#{$key}: #{$value};
+    }
+  }
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@cityway/design-tokens",
+  "version": "1.0.1-beta001",
+  "style": "_index.scss",
+  "files": [
+    "_index.scss",
+    "_primitives.scss",
+    "_functions.scss",
+    "_theme-mapping.scss"
+  ]
+}