qc-trousse-sdg 1.2.5-dev → 1.3.0-develop.0

package/public/css/qc-sdg-design-tokens.css

@@ -1,34 +1,4 @@
-/*
-Return rem size from pixel size according to root font-size as define in settings
-Always use this function for rem values
-// root font-size : 100 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1rem; }
-
-// root font-size : 62.5 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1.6rem; }
-*/
-/*
-Return rem size from pixel size according to root font-size as define in settings
-Always use this function for rem values
-// root font-size : 100 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1rem; }
-
-// root font-size : 62.5 %,
-// foo.scss
-.foo { font-size: rem(16); }
-// foo.css
-.foo { font-size: 1.6rem; }
-*/
-:root, :host {
+:root {
   --qc-font-family-roboto: Roboto,sans-serif;
   --qc-font-family-open-sans: Open Sans,sans-serif;
   --qc-font-family-roboto-mono: Roboto Mono,monospace;
@@ -76,30 +46,60 @@ Always use this function for rem values
   --qc-line-height-lg: var(--qc-line-height-120);
   --qc-line-height-xl: var(--qc-line-height-200);
   --qc-line-height-content: var(--qc-line-height-md);
-  --qc-max-content-width: 82.5rem;
-  --qc-color-white: white;
+  --qc-max-content-width: 825px;
+  --qc-color-white: #ffffff;
+  --qc-color-white-rgb: 255, 255, 255;
+  --qc-color-blue-extra-pale: var(--qc-color-blue-pale);
   --qc-color-blue-pale: #dae6f0;
+  --qc-color-blue-pale-rgb: 218, 230, 240;
   --qc-color-blue-light: #4a98d9;
+  --qc-color-blue-light-rgb: 74, 152, 217;
+  --qc-color-blue-regular_light: #2586d6;
+  --qc-color-blue-regular_light-rgb: 37, 134, 214;
   --qc-color-blue-regular: #1472bf;
+  --qc-color-blue-regular-rgb: 20, 114, 191;
   --qc-color-blue-piv: #095797;
+  --qc-color-blue-piv-rgb: 9, 87, 151;
   --qc-color-blue-medium: #19406C;
+  --qc-color-blue-medium-rgb: 25, 64, 108;
   --qc-color-blue-dark: #223654;
+  --qc-color-blue-dark-rgb: 34, 54, 84;
   --qc-color-purple: #6b4fa1;
+  --qc-color-purple-rgb: 107, 79, 161;
+  --qc-color-grey-extra-pale: var(--qc-color-grey-pale);
   --qc-color-grey-pale: #f1f1f2;
+  --qc-color-grey-pale-rgb: 241, 241, 242;
   --qc-color-grey-light: #c5cad2;
+  --qc-color-grey-light-rgb: 197, 202, 210;
   --qc-color-grey-regular: #8893a2;
+  --qc-color-grey-regular-rgb: 136, 147, 162;
   --qc-color-grey-medium: #6b778a;
+  --qc-color-grey-medium-rgb: 107, 119, 138;
   --qc-color-grey-dark: #4e5662;
+  --qc-color-grey-dark-rgb: 78, 86, 98;
   --qc-color-pink-pale: #ffdbd6;
+  --qc-color-pink-pale-rgb: 255, 219, 214;
   --qc-color-pink-regular: #e58271;
+  --qc-color-pink-regular-rgb: 229, 130, 113;
+  --qc-color-red-pale: var(--qc-color-pink-pale);
+  --qc-color-red-light: var(--qc-color-pink-regular);
   --qc-color-red-regular: #cb381f;
+  --qc-color-red-regular-rgb: 203, 56, 31;
   --qc-color-red-dark: #692519;
+  --qc-color-red-dark-rgb: 105, 37, 25;
   --qc-color-green-pale: #d7f0bb;
+  --qc-color-green-pale-rgb: 215, 240, 187;
   --qc-color-green-regular: #4f813d;
+  --qc-color-green-regular-rgb: 79, 129, 61;
   --qc-color-green-dark: #2c4024;
+  --qc-color-green-dark-rgb: 44, 64, 36;
   --qc-color-yellow-pale: #f8e69a;
+  --qc-color-yellow-pale-rgb: 248, 230, 154;
   --qc-color-yellow-regular: #e0ad03;
+  --qc-color-yellow-regular-rgb: 224, 173, 3;
   --qc-color-yellow-dark: #ad781c;
+  --qc-color-yellow-dark-rgb: 173, 120, 28;
+  --qc-color-background: var(--qc-color-white);
   --qc-color-text-primary: var(--qc-color-blue-dark);
   --qc-color-accent: var(--qc-color-pink-regular);
   --qc-color-success: var(--qc-color-green-regular);
@@ -109,17 +109,21 @@ Always use this function for rem values
   --qc-color-link-hover: var(--qc-color-blue-piv);
   --qc-color-link-visited: var(--qc-color-purple);
   --qc-color-link-active: var(--qc-color-red-regular);
-  --qc-box-shadow-color: rgba(34, 54, 84, 0.24);
-  --qc-box-shadow-blur-0: 0;
-  --qc-box-shadow-blur-1: 4px;
-  --qc-box-shadow-blur-2: 8px;
-  --qc-box-shadow-blur-3: 16px;
-  --qc-box-shadow-blur-4: 24px;
-  --qc-box-shadow-offset-0: 0;
-  --qc-box-shadow-offset-1: 1px;
-  --qc-box-shadow-offset-2: 2px;
-  --qc-box-shadow-offset-3: 4px;
-  --qc-box-shadow-offset-4: 6px;
+  --qc-color-link-focus-outline: var(--qc-color-blue-light);
+  --qc-color-formfield-border: var(--qc-color-grey-medium);
+  --qc-color-formfield-focus-border: var(--qc-color-blue-dark);
+  --qc-color-formfield-focus-outline: var(--qc-color-blue-light);
+  --qc-color-searchinput-icon: var(--qc-color-blue-piv);
+  --qc-color-box_shadow: rgba(var(--qc-color-blue-dark-rgb), 0.24);
+  --qc-box_shadow-0-color: var(--qc-color-grey-light);
+  --qc-box_shadow-1-blur: 4px;
+  --qc-box_shadow-1-offset: 1px;
+  --qc-box_shadow-2-blur: 8px;
+  --qc-box_shadow-2-offset: 2px;
+  --qc-box_shadow-3-blur: 16px;
+  --qc-box_shadow-3-offset: 4px;
+  --qc-box_shadow-4-blur: 24px;
+  --qc-box_shadow-4-offset: 6px;
   --qc-spacer-xs: 0.8rem;
   --qc-spacer-sm: 1.6rem;
   --qc-spacer-md: 2.4rem;
@@ -140,29 +144,18 @@ Always use this function for rem values
   --qc-spacer-h6-mb: 0;
   --qc-spacer-content-block-mb: var(--qc-spacer-md);
   --qc-spacer-list-pl: var(--qc-spacer-sm);
-  --qc-spacer-list-mb: var(--qc-spacer-content-block-mb);
-  --qc-spacer-list-embedded-mb: var(--qc-spacer-sm);
   --qc-spacer-list-item-mb: var(--qc-spacer-sm);
-  --qc-spacer-notice-my: var(--qc-spacer-md);
-  --qc-spacer-notice-mx: 3.2rem;
   --qc-grid-gutter: 32px;
   --qc-grid-breakpoint-xs: 0;
-  --qc-grid-breakpoint-sm: 576px;
-  --qc-grid-breakpoint-md: 768px;
-  --qc-grid-breakpoint-lg: 992px;
-  --qc-grid-breakpoint-xl: 1200px;
-  --qc-grid-container-max-width-sm: 576px;
-  --qc-grid-container-max-width-md: 768px;
-  --qc-grid-container-max-width-lg: 992px;
-  --qc-grid-container-max-width-xl: 1200px;
+  --qc-grid-breakpoint-sm: 768px;
+  --qc-grid-breakpoint-md: 992px;
+  --qc-grid-breakpoint-lg: 1200px;
+  --qc-grid-container-max-width-sm: 768px;
+  --qc-grid-container-max-width-md: 992px;
+  --qc-grid-container-max-width-lg: 1200px;
 }
 @media (max-width: 1199.98px) {
-  :root, :host {
-    --qc-grid-gutter: 24px;
-  }
-}
-@media (max-width: 991.98px) {
-  :root, :host {
+  :root {
     --qc-font-size-h3: 2.5rem;
     --qc-font-size-h2: 2.8rem;
     --qc-font-size-h1: 3.6rem;
@@ -170,10 +163,64 @@ Always use this function for rem values
     --qc-line-height-h1: 4rem;
     --qc-spacer-h2-mt: 4.8rem;
     --qc-spacer-h2-mb: 0.8rem;
+    --qc-grid-gutter: 24px;
   }
 }
-@media (max-width: 767.98px) {
-  :root, :host {
+@media (max-width: 991.98px) {
+  :root {
     --qc-grid-gutter: 16px;
   }
+}
+
+.qc-dark-theme, :root.qc-dark-theme {
+  --qc-color-white: #121519;
+  --qc-color-white-rgb: 18, 21, 25;
+  --qc-color-blue-pale: #162B47;
+  --qc-color-blue-pale-rgb: 22, 43, 71;
+  --qc-color-blue-light: #0078CC;
+  --qc-color-blue-light-rgb: 0, 120, 204;
+  --qc-color-blue-regular: #3B95E1;
+  --qc-color-blue-regular-rgb: 59, 149, 225;
+  --qc-color-blue-piv: #72B2EB;
+  --qc-color-blue-piv-rgb: 114, 178, 235;
+  --qc-color-blue-medium: #ADCDEB;
+  --qc-color-blue-medium-rgb: 173, 205, 235;
+  --qc-color-blue-dark: #C6DBEE;
+  --qc-color-blue-dark-rgb: 198, 219, 238;
+  --qc-color-purple: #B3A5D4;
+  --qc-color-purple-rgb: 179, 165, 212;
+  --qc-color-grey-pale: #1C2025;
+  --qc-color-grey-pale-rgb: 28, 32, 37;
+  --qc-color-grey-light: #3B424C;
+  --qc-color-grey-light-rgb: 59, 66, 76;
+  --qc-color-grey-regular: #6A7688;
+  --qc-color-grey-regular-rgb: 106, 118, 136;
+  --qc-color-grey-medium: #8590A8;
+  --qc-color-grey-medium-rgb: 133, 144, 168;
+  --qc-color-grey-dark: #A7ACBC;
+  --qc-color-grey-dark-rgb: 167, 172, 188;
+  --qc-color-pink-pale: #4F180E;
+  --qc-color-pink-pale-rgb: 79, 24, 14;
+  --qc-color-pink-regular: #BB3A23;
+  --qc-color-pink-regular-rgb: 187, 58, 35;
+  --qc-color-red-regular: #F26049;
+  --qc-color-red-regular-rgb: 242, 96, 73;
+  --qc-color-red-dark: #F3BCB6;
+  --qc-color-red-dark-rgb: 243, 188, 182;
+  --qc-color-green-pale: #1E2F17;
+  --qc-color-green-pale-rgb: 30, 47, 23;
+  --qc-color-green-regular: #6E9C57;
+  --qc-color-green-regular-rgb: 110, 156, 87;
+  --qc-color-green-dark: #B0D493;
+  --qc-color-green-dark-rgb: 176, 212, 147;
+  --qc-color-yellow-pale: #3F240C;
+  --qc-color-yellow-pale-rgb: 63, 36, 12;
+  --qc-color-yellow-regular: #6D4512;
+  --qc-color-yellow-regular-rgb: 109, 69, 18;
+  --qc-color-yellow-dark: #AC7900;
+  --qc-color-yellow-dark-rgb: 172, 121, 0;
+  --qc-color-text-primary: #D7D8DD;
+  --qc-color-text-primary-rgb: 215, 216, 221;
+  --qc-color-accent: #F17B6C;
+  --qc-color-accent-rgb: 241, 123, 108;
 }