Feature/newtokens

.github/agents/composant-design-system.agent.md

@@ -644,7 +644,7 @@ packages/canopee-css/src/prospect-client/MonComposant/
   - Utiliser exclusivement les tokens primitifs du thème concerné (ex : `--axa-blue-100`, `--color-blue-1`, etc.)
   - Ces tokens sont définis dans :
     - Prospect : `packages/canopee-css/src/prospect-client/common/tokens.css`
-    - Client : `packages/canopee-css/src/prospect-client/common/tokensLF.css`
+    - Client : `packages/canopee-css/src/prospect-client/common/tokens.css`
     - Distributeur : `packages/canopee-css/src/distributeur/common/tokens.css`
   - **Interdiction d'utiliser des tokens fonctionnels ou des tokens primitifs d'un autre thème dans un fichier de thème**
   - le nommage du nom de token de surcharge doit toujours commencer par `--af-`, contenir le nom du composant, puis le nom de la propriété css et le tout doit être en kebab-case (ex : `--af-range-accent-color`)

README.md

@@ -198,7 +198,7 @@ Il suffit d'importer le fichier des tokens dans votre application.
 Pour Univers Client :
 
 ```typescript
-import '@axa-fr/canopee-css/client/common/tokensLF.css';
+import '@axa-fr/canopee-css/client/common/tokens.css';
 ```
 
 Pour Univers Prospect :

client/apollo/css/src/common/tokensLF.css

@@ -1 +1 @@
-@import "@axa-fr/canopee-css/client/common/tokensLF.css";
+@import '@axa-fr/canopee-css/client/common/tokens.css';

packages/canopee-css/postcss.config.js

@@ -4,7 +4,7 @@ module.exports = (ctx) => {
   const [universe, env] = ctx.env.split("-");
 
   const globalFiles = {
-    client: "./src/prospect-client/common/tokensLF.css",
+    client: "./src/prospect-client/common/tokens.css",
     prospect: "./src/prospect-client/common/tokens.css",
     distributeur: "./src/distributeur/common/tokens.css",
   };

packages/canopee-css/src/prospect-client/Accordion/AccordionApollo.css

@@ -1,48 +1,40 @@
 @import "./AccordionCommon.css";
 
 .af-apollo-accordion {
-  --accordion-info1-text-color: var(--neutral-80);
-  --accordion-info2-text-color: var(--green-100);
-  --accordion-title-text-color: var(--axa-blue-100);
-  --accordion-subtitle-text-color: var(--neutral-80);
-  --accordion-title-font-size: calc(16 / var(--font-size-base) * 1rem);
-  --accordion-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);
-  --accordion-info2-font-size: calc(16 / var(--font-size-base) * 1rem);
-  --accordion-info1-font-size: calc(14 / var(--font-size-base) * 1rem);
+  --accordion-info1-text-color: var(--gray-800);
+  --accordion-info2-text-color: var(--green-1000);
+  --accordion-title-text-color: var(--blue-1000);
+  --accordion-subtitle-text-color: var(--gray-800);
+  --accordion-title-font-size: var(--rem-16);
+  --accordion-subtitle-font-size: var(--rem-14);
+  --accordion-info2-font-size: var(--rem-16);
+  --accordion-info1-font-size: var(--rem-14);
   --accordion-line-height: 1.25;
-  --accordion-column-gap: calc(12 / var(--font-size-base) * 1rem);
+  --accordion-column-gap: var(--rem-12);
 
   @media (--desktop-small) {
-    --accordion-column-gap: calc(16 / var(--font-size-base) * 1rem);
-    --accordion-info1-font-size: calc(16 / var(--font-size-base) * 1rem);
+    --accordion-column-gap: var(--rem-16);
+    --accordion-info1-font-size: var(--rem-16);
   }
 
   .af-accordion__date {
-    --accordion-secondary-date-font-size: calc(
-      16 / var(--font-size-base) * 1rem
-    );
+    --accordion-secondary-date-font-size: var(--rem-16);
     @media (--desktop-small) {
-      --accordion-secondary-date-font-size: calc(
-        16 / var(--font-size-base) * 1rem
-      );
+      --accordion-secondary-date-font-size: var(--rem-16);
     }
   }
 }
 
 .af-apollo-accordion--primary {
-  --accordion-title-text-color: var(--axa-blue-100);
+  --accordion-title-text-color: var(--blue-1000);
 }
 
 .af-apollo-accordion--secondary {
-  --accordion-date-text-color: var(--neutral-80);
-  --accordion-title-text-color: var(--neutral-100);
+  --accordion-date-text-color: var(--gray-800);
+  --accordion-title-text-color: var(--gray-1000);
 
   @media (--desktop-small) {
-    --accordion-info1-font-size-secondary: calc(
-      16 / var(--font-size-base) * 1rem
-    );
-    --accordion-secondary-date-font-size: calc(
-      16 / var(--font-size-base) * 1rem
-    );
+    --accordion-info1-font-size-secondary: var(--rem-16);
+    --accordion-secondary-date-font-size: var(--rem-16);
   }
 }

packages/canopee-css/src/prospect-client/Accordion/AccordionCommon.css

@@ -1,7 +1,7 @@
 .af-apollo-accordion__summary {
-  --accordion-column-gap: calc(12 / var(--font-size-base) * 1rem);
-  --accordion-gap: calc(4 / var(--font-size-base) * 1rem);
-  --accordion-row-gap: calc(2 / var(--font-size-base) * 1rem);
+  --accordion-column-gap: var(--rem-12);
+  --accordion-gap: var(--rem-4);
+  --accordion-row-gap: var(--rem-2);
 
   grid-template-areas: var(--summary-areas);
   grid-template-columns: var(--summary-columns);
@@ -10,7 +10,7 @@
   font-family: var(--font-family-base);
 
   @media (--desktop-small) {
-    --accordion-column-gap: calc(16 / var(--font-size-base) * 1rem);
+    --accordion-column-gap: var(--rem-16);
   }
 
   .af-icon:first-child {
@@ -64,7 +64,7 @@
   --summary-areas: "icon title arrow" "icon subtitle arrow"
     "icon tag-container arrow" "icon info1 arrow" "icon info2 arrow";
   --summary-columns: min-content 1fr min-content;
-  --accordion-info1-font-size: calc(14 / var(--font-size-base) * 1rem);
+  --accordion-info1-font-size: var(--rem-14);
 
   .af-apollo-accordion__summary .af-accordion__date {
     display: none;
@@ -74,7 +74,7 @@
     --summary-areas: "icon title tag-container info1 info2 arrow"
       "icon subtitle tag-container info1 info2 arrow";
     --summary-columns: min-content 1fr 1fr 1fr max-content max-content;
-    --accordion-info1-font-size: calc(16 / var(--font-size-base) * 1rem);
+    --accordion-info1-font-size: var(--rem-16);
   }
 }
 

packages/canopee-css/src/prospect-client/Accordion/AccordionLF.css

@@ -1,67 +1,55 @@
 @import "./AccordionCommon.css";
 
 .af-apollo-accordion {
-  --accordion-info1-text-color: var(--color-gray-700);
-  --accordion-info2-text-color: var(--color-green-600);
-  --accordion-title-text-color: var(--color-gray-900);
-  --accordion-subtitle-text-color: var(--color-gray-700);
-  --accordion-title-font-size: calc(16 / var(--font-size-base) * 1rem);
-  --accordion-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);
-  --accordion-info2-font-size: calc(16 / var(--font-size-base) * 1rem);
-  --accordion-info1-font-size-secondary: calc(
-    14 / var(--font-size-base) * 1rem
-  );
+  --accordion-info1-text-color: var(--gray-800);
+  --accordion-info2-text-color: var(--green-1000);
+  --accordion-title-text-color: var(--gray-1000);
+  --accordion-subtitle-text-color: var(--gray-800);
+  --accordion-title-font-size: var(--rem-16);
+  --accordion-subtitle-font-size: var(--rem-14);
+  --accordion-info2-font-size: var(--rem-16);
+  --accordion-info1-font-size-secondary: var(--rem-14);
   --accordion-line-height: 1.25;
-  --accordion-gap: calc(4 / var(--font-size-base) * 1rem);
+  --accordion-gap: var(--rem-4);
 
   @media (--desktop-small) {
-    --accordion-column-gap: calc(16 / var(--font-size-base) * 1rem);
-    --accordion-title-font-size: calc(18 / var(--font-size-base) * 1rem);
-    --accordion-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);
-    --accordion-info2-font-size: calc(18 / var(--font-size-base) * 1rem);
+    --accordion-column-gap: var(--rem-16);
+    --accordion-title-font-size: var(--rem-18);
+    --accordion-subtitle-font-size: var(--rem-16);
+    --accordion-info2-font-size: var(--rem-18);
   }
 
   .af-accordion__date {
-    --accordion-secondary-date-font-size: calc(
-      16 / var(--font-size-base) * 1rem
-    );
+    --accordion-secondary-date-font-size: var(--rem-16);
     @media (--desktop-small) {
-      --accordion-secondary-date-font-size: calc(
-        16 / var(--font-size-base) * 1rem
-      );
+      --accordion-secondary-date-font-size: var(--rem-16);
     }
   }
 }
 
 .af-apollo-accordion--primary {
-  --accordion-title-text-color: var(--color-gray-900);
+  --accordion-title-text-color: var(--gray-1000);
 
   .af-apollo-accordion__info1 {
-    --accordion-info1-text-size: calc(14 / var(--font-size-base) * 1rem);
+    --accordion-info1-text-size: var(--rem-14);
   }
 }
 
 .af-apollo-accordion--secondary {
-  --accordion-title-text-color: var(--color-gray-900);
-  --accordion-date-text-color: var(--color-gray-700);
-  --accordion-secondary-date-font-size: calc(14 / var(--font-size-base) * 1rem);
+  --accordion-title-text-color: var(--gray-1000);
+  --accordion-date-text-color: var(--gray-800);
+  --accordion-secondary-date-font-size: var(--rem-14);
 
   .af-apollo-accordion__summary .af-accordion {
     @media (--desktop-small) {
-      --accordion-secondary-date-font-size: calc(
-        18 / var(--font-size-base) * 1rem
-      );
+      --accordion-secondary-date-font-size: var(--rem-18);
     }
   }
 
   .af-apollo-accordion__summary .af-accordion__date {
-    --accordion-secondary-date-font-size: calc(
-      16 / var(--font-size-base) * 1rem
-    );
+    --accordion-secondary-date-font-size: var(--rem-16);
     @media (--desktop-small) {
-      --accordion-secondary-date-font-size: calc(
-        18 / var(--font-size-base) * 1rem
-      );
+      --accordion-secondary-date-font-size: var(--rem-18);
     }
   }
 }

packages/canopee-css/src/prospect-client/AccordionContextual/AccordionContextualApollo.css

@@ -1,15 +1,13 @@
 @import "./AccordionContextualCommon.css";
 
 .af-apollo-accordion {
-  --accordion-contextual-title-font-size: calc(
-    16 / var(--font-size-base) * 1rem
-  );
+  --accordion-contextual-title-font-size: var(--rem-16);
 }
 
 .af-apollo-accordion-contextual--info {
-  --accordion-contextual-title-text-color: var(--axa-blue-100);
+  --accordion-contextual-title-text-color: var(--blue-1000);
 }
 
 .af-apollo-accordion-contextual--warning {
-  --accordion-contextual-title-text-color: var(--red-alert-100);
+  --accordion-contextual-title-text-color: var(--red-alert-1000);
 }

packages/canopee-css/src/prospect-client/AccordionContextual/AccordionContextualCommon.css

@@ -1,8 +1,8 @@
 .af-apollo-accordion-contextual .af-apollo-accordion__summary {
-  --accordion-contextual-column-gap: calc(16 / var(--font-size-base) * 1rem);
-  --accordion-contextual-gap: calc(4 / var(--font-size-base) * 1rem);
-  --accordion-contextual-row-gap: calc(2 / var(--font-size-base) * 1rem);
-  --spacing-summary-inline: calc(12 / var(--font-size-base) * 1rem);
+  --accordion-contextual-column-gap: var(--rem-16);
+  --accordion-contextual-gap: var(--rem-4);
+  --accordion-contextual-row-gap: var(--rem-2);
+  --spacing-summary-inline: var(--rem-12);
 
   display: grid;
   padding: var(--spacing-summary-block) var(--spacing-summary-inline);
@@ -20,7 +20,7 @@
     grid-area: title;
     font-size: var(--accordion-contextual-title-font-size);
     font-weight: 600;
-    line-height: calc(20 / var(--font-size-base) * 1rem);
+    line-height: var(--rem-20);
     color: var(--accordion-contextual-title-text-color);
   }
 }
@@ -42,7 +42,7 @@
 
   &[open]::details-content {
     display: grid;
-    padding: calc(16 / var(--font-size-base) * 1rem);
+    padding: var(--rem-16);
   }
 }
 

packages/canopee-css/src/prospect-client/AccordionContextual/AccordionContextualLF.css

@@ -1,20 +1,16 @@
 @import "./AccordionContextualCommon.css";
 
 .af-apollo-accordion {
-  --accordion-contextual-title-font-size: calc(
-    16 / var(--font-size-base) * 1rem
-  );
+  --accordion-contextual-title-font-size: var(--rem-16);
   @media (--desktop-small) {
-    --accordion-contextual-title-font-size: calc(
-      18 / var(--font-size-base) * 1rem
-    );
+    --accordion-contextual-title-font-size: var(--rem-18);
   }
 }
 
 .af-apollo-accordion-contextual--info {
-  --accordion-contextual-title-text-color: var(--color-axa);
+  --accordion-contextual-title-text-color: var(--blue-1000);
 }
 
 .af-apollo-accordion-contextual--warning {
-  --accordion-contextual-title-text-color: var(--color-red-700);
+  --accordion-contextual-title-text-color: var(--red-alert-1200);
 }

packages/canopee-css/src/prospect-client/AccordionCore/AccordionCoreApollo.css

@@ -1,5 +1,5 @@
 @import "./AccordionCoreCommon.css";
 
 .af-apollo-accordion {
-  --accordion-border-color: var(--axa-blue-20);
+  --accordion-border-color: var(--blue-200);
 }

packages/canopee-css/src/prospect-client/AccordionCore/AccordionCoreCommon.css

@@ -1,6 +1,6 @@
 .af-apollo-accordion {
-  --spacing-summary-inline: calc(16 / var(--font-size-base) * 1rem);
-  --spacing-summary-block: calc(16 / var(--font-size-base) * 1rem);
+  --spacing-summary-inline: var(--rem-16);
+  --spacing-summary-block: var(--rem-16);
   --summary-areas: "summary arrow";
   --summary-columns: 1fr auto;
 
@@ -13,7 +13,7 @@
   }
 
   @media (--desktop-small) {
-    --spacing-summary-inline: calc(24 / var(--font-size-base) * 1rem);
+    --spacing-summary-inline: var(--rem-24);
   }
 }
 

packages/canopee-css/src/prospect-client/AccordionCore/AccordionCoreLF.css

@@ -1,5 +1,5 @@
 @import "./AccordionCoreCommon.css";
 
 .af-apollo-accordion {
-  --accordion-border-color: var(--color-blue-400);
+  --accordion-border-color: var(--blue-200);
 }

packages/canopee-css/src/prospect-client/BasePicture/BasePictureAll.css

@@ -1,5 +1,5 @@
 .af-basepicture {
-  width: calc(48 / var(--font-size-base) * 1rem);
-  height: calc(48 / var(--font-size-base) * 1rem);
+  width: var(--rem-48);
+  height: var(--rem-48);
   border-radius: 100%;
 }