@cityway/design-tokens 1.1.8

package/_functions.scss

@@ -0,0 +1,107 @@
+@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);
+}
+
+[data-cw-theme="cw-fo"] {
+    --cw-base-dark: #1a1a1a;
+    --cw-base-dark-rgb: 26, 26, 26;
+    --cw-base-black: #000000;
+    --cw-base-black-rgb: 0, 0, 0;
+    --cw-base-white: #ffffff;
+    --cw-base-white-rgb: 255, 255, 255;
+    --cw-base-disabled: #696969;
+    --cw-base-disabled-rgb: 105, 105, 105;
+    --cw-primary: #107099;
+    --cw-primary-rgb: 16, 112, 153;
+    --cw-primary-hover: #0d5878;
+    --cw-primary-hover-rgb: 13, 88, 120;
+    --cw-primary-contrasted: #ffffff;
+    --cw-primary-contrasted-rgb: 255, 255, 255;
+    --cw-secondary: #107099;
+    --cw-secondary-rgb: 16, 112, 153;
+    --cw-secondary-hover: #0d5878;
+    --cw-secondary-hover-rgb: 13, 88, 120;
+    --cw-secondary-contrasted: #ffffff;
+    --cw-secondary-contrasted-rgb: 255, 255, 255;
+    --cw-success: #44853c;
+    --cw-success-rgb: 68, 133, 60;
+    --cw-success-hover: #366930;
+    --cw-success-hover-rgb: 54, 105, 48;
+    --cw-success-contrasted: #ffffff;
+    --cw-success-contrasted-rgb: 255, 255, 255;
+    --cw-success-light: #ebf5ea;
+    --cw-success-light-rgb: 235, 245, 234;
+    --cw-info: #0b40a2;
+    --cw-info-rgb: 11, 64, 162;
+    --cw-info-hover: #0f58e0;
+    --cw-info-hover-rgb: 15, 88, 224;
+    --cw-info-contrasted: #ffffff;
+    --cw-info-contrasted-rgb: 255, 255, 255;
+    --cw-info-light: #dee8fd;
+    --cw-info-light-rgb: 222, 232, 253;
+    --cw-warning: #e8580c;
+    --cw-warning-rgb: 232, 88, 12;
+    --cw-warning-hover: #df3603;
+    --cw-warning-hover-rgb: 223, 54, 3;
+    --cw-warning-contrasted: #1a1a1a;
+    --cw-warning-contrasted-rgb: 26, 26, 26;
+    --cw-warning-light: #fff9e6;
+    --cw-warning-light-rgb: 255, 249, 230;
+    --cw-danger: #e1001a;
+    --cw-danger-rgb: 225, 0, 26;
+    --cw-danger-hover: #b30015;
+    --cw-danger-hover-rgb: 179, 0, 21;
+    --cw-danger-contrasted: #ffffff;
+    --cw-danger-contrasted-rgb: 255, 255, 255;
+    --cw-danger-light: #ffe5e8;
+    --cw-danger-light-rgb: 255, 229, 232;
+    --cw-light: #f9f9f9;
+    --cw-light-rgb: 249, 249, 249;
+    --cw-light-hover: #f2f2f2;
+    --cw-light-hover-rgb: 242, 242, 242;
+    --cw-light-contrasted: #313131;
+    --cw-light-contrasted-rgb: 49, 49, 49;
+    --cw-dark: #1a1a1a;
+    --cw-dark-rgb: 26, 26, 26;
+    --cw-dark-hover: #1a1a1a;
+    --cw-dark-hover-rgb: 26, 26, 26;
+    --cw-dark-contrasted: #ffffff;
+    --cw-dark-contrasted-rgb: 255, 255, 255;
+    --cw-body-bg: #ffffff;
+    --cw-body-bg-rgb: 255, 255, 255;
+    --cw-body-color: #1a1a1a;
+    --cw-body-color-rgb: 26, 26, 26;
+    --cw-link-color: #107099;
+    --cw-link-color-rgb: 16, 112, 153;
+    --cw-link-hover: #0d5878;
+    --cw-link-hover-rgb: 13, 88, 120;
+    --cw-body-fs: 1rem;
+    --cw-body-fw: 400;
+    --cw-body-lh: 1.5;
+    --cw-body-ff-heading: Nunito, sans-serif;
+    --cw-body-ff-text: Nunito, sans-serif;
+    --cw-link-decoration: underline;
+    --cw-border-radius: 0.5rem;
+    --cw-border-radius-input: 6.25rem;
+    --cw-shadow-default: 0 0.25rem 1rem -0.063rem rgba(0, 0, 0, 0.1);
+    --cw-shadow-hover: 0 0.25rem 1rem -0.063rem rgba(0, 0, 0, 0.35);
+}

package/_index.scss

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

package/_primitives.scss

@@ -0,0 +1,207 @@
+@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
+);
+
+// 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,220 @@
+@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, md),
+    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: 0.3rem,
+    radius-input: 0.3rem
+  ),
+  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};
+      }
+    }
+  }
+}

package/package.json

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