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

package/src/sdg/scss/settings/_tokens.scss

@@ -1,9 +1,11 @@
-@use "settings/settings" as *;
-@use "functions/utils" as *;
-@use "functions/tokens" as *;
+@use "base" as *;
+@use "sass:color";
+@use "lib/functions" as *;
 
-$dark-blue: #223654;
-$xl-tokens: (
+
+// TODO remplacer les clés avec tirets par un souligné foo-bar -> foo_bar
+// TODO générer ce fichier à partir d'un json, afin d'avoir les tokens en js
+$lg-tokens: (
     font : (
         family : (
             roboto: google-font(roboto),
@@ -65,43 +67,50 @@ $xl-tokens: (
         xl: token-value(line-height, 200),
         content: token-value(line-height, md),
     ),
-    max-content-width: rem(825),
+    max-content-width: 825px, //TODO faire une clé max_width : (content:…, component1:…, )
     color: (
-        white : white,
-        blue : (
-            pale : #dae6f0,
-            light : #4a98d9,
-            regular : #1472bf,
-            piv: #095797,
-            medium : #19406C,
-            dark: $dark-blue,
-        ),
-        purple: #6b4fa1,
-        grey : (
-            pale : #f1f1f2,
-            light : #c5cad2,
-            regular: #8893a2,
-            medium : #6b778a,
-            dark: #4e5662,
-        ),
-        pink : (
-            pale: #ffdbd6,
-            regular: #e58271,
-        ),
-        red: (
-            regular: #cb381f,
-            dark: #692519,
-        ),
-        green: (
-            pale: #d7f0bb,
-            regular: #4f813d,
-            dark: #2c4024,
-        ),
-        yellow : (
-            pale : #f8e69a,
-            regular: #e0ad03,
-            dark: #ad781c,
-        ),
+          white : #ffffff,
+          blue : (
+              extra-pale: token-value(color blue pale),
+              pale : #dae6f0,
+              light : #4a98d9,
+              regular_light: #2586d6,
+              regular : #1472bf,
+              piv: #095797,
+              medium : #19406C,
+              dark: #223654,
+          ),
+          purple: #6b4fa1,
+          grey : (
+              extra-pale: token-value(color grey pale),
+              pale : #f1f1f2,
+              light : #c5cad2,
+              regular: #8893a2,
+              medium : #6b778a,
+              dark: #4e5662,
+          ),
+          pink : (
+              pale: #ffdbd6,
+              regular: #e58271,
+          ),
+          red: (
+              pale: token-value(color pink pale),
+              light: token-value(color pink regular),
+              regular: #cb381f,
+              dark: #692519,
+          ),
+          green: (
+              pale: #d7f0bb,
+              regular: #4f813d,
+              dark: #2c4024,
+          ),
+          yellow : (
+              pale : #f8e69a,
+              regular: #e0ad03,
+              dark: #ad781c,
+          ),
+
+        background : token-value(color white),
         text : (
             primary : token-value(color blue dark)
         ),
@@ -114,23 +123,42 @@ $xl-tokens: (
             hover: token-value(color blue piv),
             visited: token-value(color purple),
             active: token-value(color red regular),
+            // TODO ajouter le focus cf https://www.figma.com/design/p5kWdGvZk0BvkEGIrdvXL6/%5BSDG-OFFICIEL%5D-Bases-et-composants?node-id=1070-628&node-type=canvas&t=eIMD5cFp9Jq5vMNt-0
+            focus: (
+              outline: token-value(color blue light),
+            )
+        ),
+        formfield: (
+            border: token-value(color grey medium ),
+            focus: (
+                border: token-value(color blue dark),
+                outline: token-value(color blue light)
+            )
+        ),
+        searchinput: (
+          icon: token-value(color blue piv),
         ),
+        box_shadow: rgba(var(--qc-color-blue-dark-rgb), .24)
     ),
-    box-shadow: (
-        color: rgba($dark-blue, .24),
-        blur: (
-            0: 0,
-            1: 4px,
-            2: 8px,
-            3: 16px,
-            4: 24px,
-        ),
-        offset: (
-            0: 0,
-            1: 1px,
-            2: 2px,
-            3: 4px,
-            4: 6px,
+    box_shadow: (
+        0: (
+          color: token-value(color grey light)
+        ),
+        1: (
+          blur: 4px,
+          offset: 1px,
+        ),
+        2: (
+            blur: 8px,
+            offset: 2px,
+        ),
+        3: (
+            blur: 16px,
+            offset: 4px,
+        ),
+        4: (
+            blur: 24px,
+            offset: 6px,
         ),
     ),
     spacer: (
@@ -173,43 +201,32 @@ $xl-tokens: (
         ),
         list : (
             pl: token-value(spacer sm),
-            mb: token-value(spacer content-block mb),
-            embedded-mb : token-value(spacer sm),
         ),
         list-item : (
             mb: token-value(spacer sm),
-
         ),
-        notice: (
-            my: token-value(spacer, md),
-            mx: rem(4 * $base-spacer),
-        )
     ),
     grid: (
         gutter: 32px,
         breakpoint: (
             xs: 0,
-            sm: 576px,
-            md: 768px,
-            lg: 992px,
-            xl: 1200px,
+            sm: 768px,
+            md: 992px,
+            lg: 1200px,
         ),
         container-max-width: (
-            sm: 576px,
-            md: 768px,
-            lg: 992px,
-            xl: 1200px,
+            sm: 768px,
+            md: 992px,
+            lg: 1200px
         )
     ),
 ) !default;
 
+// legacy
+$xl-tokens : $lg-tokens;
+
 $breakpoints-tokens: (
-    xl : $xl-tokens,
-    lg : (
-        grid: (
-            gutter: 24px,
-        )
-    ),
+    lg : $lg-tokens,
     md : (
         font-size: (
             h3: rem(25),
@@ -228,6 +245,9 @@ $breakpoints-tokens: (
                 mb: rem(1 * $base-spacer),
             )
         ),
+        grid: (
+            gutter: 24px,
+        )
     ),
     sm : (
         grid: (
@@ -236,6 +256,54 @@ $breakpoints-tokens: (
     ),
 ) !default;
 
+$themes-tokens: (
+  light: $breakpoints-tokens,
+  dark: (
+    lg: (
+      color: (
+        white : #121519,
+        blue : (
+            pale : #162B47,
+            light : #0078CC,
+            regular : #3B95E1,
+            piv: #72B2EB,
+            medium : #ADCDEB,
+            dark: #C6DBEE,
+        ),
+        purple: #B3A5D4,
+        grey : (
+            pale : #1C2025,
+            light : #3B424C,
+            regular: #6A7688,
+            medium : #8590A8,
+            dark: #A7ACBC,
+        ),
+        pink : (
+            pale: #4F180E,
+            regular: #BB3A23,
+        ),
+        red: (
+            regular: #F26049,
+            dark: #F3BCB6,
+        ),
+        green: (
+            pale: #1E2F17,
+            regular: #6E9C57,
+            dark: #B0D493,
+        ),
+        yellow : (
+            pale : #3F240C,
+            regular: #6D4512,
+            dark: #AC7900,
+        ),
+        text : (
+            primary : #D7D8DD
+        ),
+        accent: #F17B6C,
+      )
+    )
+  )
+) !default;
 
 
 

package/src/sdg/scss/utilities/_display.scss

@@ -1,4 +1,44 @@
-@import "settings/grid";
-@import "vendor/bootstrap-rewrite/utilities/display";
-//@import "vendor/bootstrap-rewrite/mixins/deprecate";
+// retrait de ces utilitaires pour alléger la css
+@use "sass:map";
+@use "lib/gridless-lib" as *;
+@use "grid/grid-lib" as *;
 
+$spacers : (
+    0: 0,
+    1: token-value(spacer sm),
+    2: token-value(spacer md),
+    3: token-value(spacer lg),
+    4: token-value(spacer xl),
+);
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+
+// stylelint-disable declaration-no-important
+
+// equivalent à @import(src/sdg/scss/vendor/bootstrap-rewrite/utilities/_display.scss)
+// Utilities for common `display` values
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $value in $displays {
+      .qc-d#{$infix}-#{$value} { display: $value !important; }
+    }
+  }
+}
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+@media print {
+  @each $value in $displays {
+    .qc-d-print-#{$value} { display: $value !important; }
+  }
+}
+
+.qc-nowrap {
+  white-space: nowrap;
+}

package/src/sdg/scss/utilities/_themes.scss

@@ -0,0 +1,17 @@
+@use "qc-sdg-lib" as *;
+
+:root {
+  --qc-light-theme-display: block;
+  --qc-dark-theme-display: none;
+  &.qc-dark-theme {
+    --qc-light-theme-display: none;
+    --qc-dark-theme-display: block;
+  }
+}
+
+.qc-light-theme-show {
+  display: var(--qc-light-theme-display);
+}
+.qc-dark-theme-show {
+  display: var(--qc-dark-theme-display);
+}

package/src/sdg/scss/vendor/modern-css-reset/src/reset.css

@@ -1,4 +1,5 @@
-/* Box sizing rules */
+ /*Box sizing rules */
+
 *,
 *::before,
 *::after {
@@ -49,13 +50,13 @@ picture {
   display: block;
 }
 
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
 
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {

package/src/doc/components/code.svelte

@@ -1,54 +0,0 @@
-<svelte:options customElement="{{
-    tag: 'qc-code'
-    , props: {
-        targetId : {attribute: 'target-id'}
-    }
-}}" />
-
-<script>
-
-  import {HighlightJS} from "highlight.js"
-  import 'highlight.js/styles/default.css';
-  import pretty from "pretty";
-  import { onMount } from "svelte";
-  import { Utils } from "../../sdg/components/utils"
-
-  export let
-      targetId = ''
-      , language = 'html'
-  ;
-
-  let
-    rawCode = ''
-    , hlCode
-    , prettyCode
-  ;
-
-  onMount(() => {
-      rawCode =
-          ( document.getElementById(targetId)?.outerHTML
-            ?? ''
-          ) . replace('class="mounted"', '')
-        ;
-      prettyCode = pretty(rawCode, {wrap_attributes: 'force-aligned'});
-      hlCode = HighlightJS.highlight(prettyCode, {language:language}).value;
-  })
-
-  function copy() {
-      navigator.clipboard.writeText(prettyCode);
-      this.classList.add('copied')
-      setTimeout(() => {this.classList.remove('copied')}, 500)
-  }
-
-</script>
-
-<pre
-    ><code class="hljs"><button class="btn btn-sm btn-primary" on:click={copy}>
-            <span class="copy">copier</span>
-            <span class="copied">copié !</span>
-        </button
-        >{@html hlCode}</code
-></pre>
-<link rel='stylesheet'
-      href='{Utils.cssRelativePath}{Utils.cssFileName}'>
-

package/src/sdg/scss/base/_grid.scss

@@ -1,9 +0,0 @@
-@use "modules/grid" as *;
-@import "vendor/bootstrap-rewrite/grid";
-
-// Décommenter ces lignes pour ajouter les classes utilitaires bootstrap précédées de « qc- »,
-// selon le même principe que pour la grille.
-// ex: mt-lg-4 -> qc-mt-lg-4, d-sm-flex -> qc-d-sm-flex, d-md-none, qc-d-md-none
-//@import "build/bootstrap/scss/utilities/display";
-//@import "build/bootstrap/scss/utilities/flex";
-//@import "build/bootstrap/scss/utilities/spacing";

package/src/sdg/scss/functions/_tokens.scss

@@ -1,12 +0,0 @@
-@use "utils" as *;
-// functions
-
-// Return css var corresponding to this token
-// token-value("foo","bar"); // var(--qc-foo-bar);
-@function token-value($args...) {
-  @return var(#{token-name($args...)});
-}
-
-@function token-name($args...) {
-  @return --qc-#{deep-implode($args, '-')};
-}

package/src/sdg/scss/functions/_utils.scss

@@ -1,44 +0,0 @@
-@use "settings/settings" as *;
-@use "sass:math";
-@use "sass:map";
-@use "sass:list";
-@use "sass:string";
-
-/*
-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; }
-*/
-@function rem($px-size) {
-  @return math.div($px-size, 16 * $percent-root-font-size * .01) * 1rem;
-}
-
-// implode a list (and flatten inner list : implode( (foo, (bar baz)), '-'); => foo-bar-baz
-@function deep-implode($list, $glue: '-') {
-  $separator : '';
-  $result : '';
-  @each $item in $list {
-    $part : $item;
-    @if type-of($item) == 'list' {
-      $part : deep-implode($item, $glue);
-    }
-    $result : '#{$result}#{$separator}#{$part}';
-    $separator: $glue;
-  }
-  @return $result;
-}
-
-@function google-font($font) {
-  @return string.unquote(deep-implode(map.get($google-fonts, $font), ','));
-}
-

package/src/sdg/scss/modules/_grid.scss

@@ -1,19 +0,0 @@
-@import "settings/grid";
-@import "vendor/bootstrap-rewrite/mixins/breakpoints";
-@import "vendor/bootstrap-rewrite/mixins/deprecate";
-@import "vendor/bootstrap-rewrite/mixins/grid";
-@import "vendor/bootstrap-rewrite/mixins/grid-framework";
-
-@mixin media-tablet() {
-  @include media-breakpoint-down(sm) {
-    @content;
-  }
-}
-
-@mixin media-mobile() {
-  @include media-breakpoint-down(xs) {
-    @content;
-  }
-}
-
-

package/src/sdg/scss/modules/_map.scss

@@ -1,14 +0,0 @@
-@use "sass:list";
-//
-@mixin map-deep-parse($map, $parents: ()) {
-  @each $key, $value in $map {
-    $path: list.append($parents, $key);
-    @if type-of($value) == 'map' {
-      @include map-deep-parse($value, $path) using($path,$value) {
-        @content($path, $value);
-      }
-    } @else {
-      @content($path, $value);
-    }
-  }
-}

package/src/sdg/scss/modules/_tokens.scss

@@ -1,3 +0,0 @@
-@forward "functions/tokens";
-@use "settings/tokens" as *;
-@forward "settings/tokens";

package/src/sdg/scss/modules/_utils.scss

@@ -1,55 +0,0 @@
-@use "functions/utils" as *;
-@use "tokens" as *;
-@forward "settings/settings";
-@forward "functions/utils";
-
-// typography
-
-// toujours utiliser ces mixins pour la déclarations des tailles de police:
-// cela garantit que la taille police est conforme aux exigences du SDG
-// et ajoute automatiquement le bon interlignage
-@mixin content-font($scale: 'md', $weight: 'regular', $include-family: 0) {
-  font-size: token-value(font size $scale);
-  line-height: token-value(line-height $scale);
-  font-weight: token-value(font weight $weight);
-  @if $include-family == 1 {
-    font-family: token-value(font family content);
-  }
-}
-
-@mixin header-font($header) {
-  font-family:  token-value(font, family, header) ;
-  font-size: token-value(font, size, $header) ;
-  line-height:  token-value(line-height, $header) ;
-  font-weight: token-value(font, weight, header, bold);
-}
-
-// links
-
-@mixin hover-link() {
-  color: token-value(color, link, hover);
-  text-decoration: none;
-}
-
-@mixin active-link() {
-  color: token-value(color, link, active);
-}
-
-@mixin external-link-img() {
-  max-height: rem(11);
-  max-width: rem(11);
-  margin-bottom: rem(1.6);
-  display: inline-block;
-}
-
-@mixin sr-only() {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/src/sdg/scss/settings/_grid.scss

@@ -1,24 +0,0 @@
-@use "modules/utils" as utils;
-@use "modules/map" as *;
-@use "modules/tokens";
-@use "sass:map";
-// Merci ! / ty Bootstrap
-@import "vendor/bootstrap-rewrite/functions";
-@import "vendor/bootstrap-rewrite/variables";
-
-$enable-grid-classes: utils.$enable-grid-classes;
-$enable-deprecation-messages : false;
-$grid-breakpoints: map.get(tokens.$xl-tokens, grid, breakpoint);
-$grid-gutter-width: tokens.token-value(grid gutter);
-$container-max-widths: map.get(tokens.$xl-tokens, grid, container-max-width);
-
-$spacers : (
-    0: 0,
-    1: tokens.token-value(spacer sm),
-    2: tokens.token-value(spacer md),
-    3: tokens.token-value(spacer lg),
-    4: tokens.token-value(spacer xl),
-);
-
-@import "vendor/bootstrap-rewrite/mixins/breakpoints";
-

package/src/sdg/scss/settings/_settings.scss

@@ -1,12 +0,0 @@
-$percent-root-font-size: 62.5 !default; // so 1.6rem == 16px
-$img-dir: "../img";
-$base-spacer: 8 !default;
-// for local fonts, cf https://google-webfonts-helper.herokuapp.com/fonts
-$google-api-font: true !default;
-$google-fonts : (
-  roboto: (Roboto, sans-serif),
-  open-sans: ('Open Sans', sans-serif),
-  roboto-mono: ('Roboto Mono', monospace)
-);
-
-$enable-grid-classes: true;