workflows file added

Typography

See merge request cellule-financiere-pmo/design-system/visua!1

.gitea/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish visua Package
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Configure .npmrc for Gitea registry
+        run: |
+          echo "@cellule-financiere-pmo:registry=https://dgfipntic.imfr.cgi.com/api/packages/Cellule-financiere-transverse-PMO/npm/" > ~/.npmrc
+          echo "//dgfipntic.imfr.cgi.com/api/packages/Cellule-financiere-transverse-PMO/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
+
+      - name: Publish to Gitea NPM registry
+        run: npm publish

.gitlab-ci.yml

@@ -1,14 +0,0 @@
-default:
-  image: node:latest
-
-stages:
-  - deploy
-
-publish-npm:
-  stage: deploy
-  script:
-    - echo "@cellule-financiere-pmo:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > .npmrc
-    - echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}" >> .npmrc
-    - npm publish
-  only:
-    - tags

CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.3] - 2025-07-18
+### Added
+- Added map css files.
+
+## [1.1.2] - 2025-07-18
+### Added
+- Fixed deployment failures.
+
+## [1.1.1] - 2025-07-18
+### Changed
+- CSS typography classes have been replaced by css module classes.
+
+
+
+## [1.1.0] - 2025-07-16
+### Added
+- CSS typography classes.
+
+
+## [1.0.0] - 2025-07-15
+### Initial
+- First project version published.

README.md

@@ -1,6 +1,6 @@
 # Summary
 
-**Current version : 1.0.0** 
+**Current version : 1.1.3** 
 
 This project defines the *visual foundations* of the **design system** and establishes a strategy for structuring styles to guarantee their *reusability* in the design of graphic interfaces.
 
@@ -20,7 +20,9 @@ The project is organized into three main modules:
 
 - [**output**](./output/)
 
-    Contains the Generated final [`variables.css`](./output/variables.css) file, containing all global CSS variables ready for integration into front-end projects.
+    * Contains [`variables.css`](./output/variables.css) file, containing all global CSS variables ready for integration into front-end projects.
+
+    * Contains [`typography.module.css`](./output/typography.module.css) file, containing the CSS classes defining the different typographic variants available.
 
 
 ## Important

output/typography.module.css

@@ -0,0 +1,241 @@
+.alternative-body-text-LG-article-text-Regular {
+  font-family: georgia, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 2rem;
+}
+
+.alternative-body-text-LG-article-text-Bold {
+  font-family: georgia, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 900;
+  line-height: 2rem;
+}
+
+.alternative-body-text-MD-article-text-Regular {
+  font-family: georgia, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.alternative-body-text-MD-article-text-Bold {
+  font-family: georgia, sans-serif;
+  font-size: 1rem;
+  font-weight: 900;
+  line-height: 1.5rem;
+}
+
+.alternative-body-text-SM-article-text-Regular {
+  font-family: georgia, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.alternative-body-text-SM-article-text-Bold {
+  font-family: georgia, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 900;
+  line-height: 1.5rem;
+}
+
+.alternative-body-text-XS-article-text-Regular {
+  font-family: georgia, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.alternative-titles-XL {
+  font-size: 5rem;
+  font-weight: 600;
+  line-height: 5.5rem;
+}
+
+.alternative-titles-LG {
+  font-size: 4.5rem;
+  font-weight: 400;
+  line-height: 5rem;
+}
+
+.alternative-titles-MD {
+  font-size: 4rem;
+  font-weight: 600;
+  line-height: 4.5rem;
+}
+
+.alternative-titles-SM {
+  font-size: 3.5rem;
+  font-weight: 600;
+  line-height: 4rem;
+}
+
+.alternative-titles-XS {
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 3.5rem;
+}
+
+.text-body-XL-chapo-Regular {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 2rem;
+}
+
+.text-body-XL-chapo-Bold {
+  font-size: 1.25rem;
+  font-weight: 900;
+  line-height: 2rem;
+}
+
+.text-body-LG-article-text-Regular {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+}
+
+.text-body-LG-article-text-Medium {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+}
+
+.text-body-LG-article-text-Bold {
+  font-size: 1.125rem;
+  font-weight: 900;
+  line-height: 1.75rem;
+}
+
+.text-body-MD-standard-text-Regular {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.text-body-MD-standard-text-Medium {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+}
+
+.text-body-MD-standard-text-Bold {
+  font-size: 1rem;
+  font-weight: 900;
+  line-height: 1.5rem;
+}
+
+.text-body-MD-standard-text-Italic {
+  font-size: 1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+}
+
+.text-body-SM-detail-text-Regular {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.text-body-SM-detail-text-Medium {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+}
+
+.text-body-SM-detail-text-Bold {
+  font-size: 0.875rem;
+  font-weight: 900;
+  line-height: 1.5rem;
+}
+
+.text-body-SM-detail-text-Italic {
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+}
+
+.text-body-SM-detail-text-Maj {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  text-transform: uppercase;
+}
+
+.text-body-XS-mention-text-Regular {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.text-body-XS-mention-text-Medium {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+.text-body-XS-mention-text-Bold {
+  font-size: 0.75rem;
+  font-weight: 900;
+  line-height: 1.25rem;
+}
+
+.text-body-XS-mention-text-Italic {
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.25rem;
+}
+
+.text-body-XS-mention-text-Maj {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+.text-body-XS-mention-text-Underlined {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  text-decoration: underline;
+}
+
+.titles-H1-XL {
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 3rem;
+}
+
+.titles-H2-LG {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 2.5rem;
+}
+
+.titles-H3-MD {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 2.25rem;
+}
+
+.titles-H4-SM {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2rem;
+}
+
+.titles-H5-XS {
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+}
+
+.titles-H6-XXS {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+}
+
+/*# sourceMappingURL=typography.module.css.map */

output/typography.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/functions/_mixins.scss","../src/tokens/typography/_alternative-body-text.scss","../src/tokens/typography/_alternative-titles.scss","../src/tokens/typography/_text-body.scss","../src/tokens/typography/_titles.scss"],"names":[],"mappings":"AAgBI;EAGY,aCdU;EDgBV,WChBU;EDkBV,aClBU;EDoBV,aCpBU;;;ADWtB;EAGY,aCPO;EDSP,WCTO;EDWP,aCXO;EDaP,aCbO;;;ADInB;EAGY;EAEA,WCFU;EDIV,aCJU;EDMV,aCNU;;;ADHtB;EAGY,aCOO;EDLP,WCKO;EDHP,aCGO;EDDP,aCCO;;;ADVnB;EAGY,aCcU;EDZV,WCYU;EDVV,aCUU;EDRV,aCQU;;;ADjBtB;EAGY,aCqBO;EDnBP,WCmBO;EDjBP,aCiBO;EDfP,aCeO;;;ADxBnB;EAGY,aC4BU;ED1BV,WC0BU;EDxBV,aCwBU;EDtBV,aCsBU;;;AD/BtB;EAKY,WEjBX;EFmBW,aEnBX;EFqBW,aErBX;;;AFYD;EAKY,WEXX;EFaW,aEbX;EFeW,aEfX;;;AFMD;EAKY,WELX;EFOW,aEPX;EFSW,aETX;;;AFAD;EAKY,WECX;EFCW,aEDX;EFGW,aEHX;;;AFND;EAKY,WEOX;EFLW,aEKX;EFHW,aEGX;;;AFZD;EAKY,WGjBE;EHmBF,aGnBE;EHqBF,aGrBE;;;AHYd;EAKY,WGXD;EHaC,aGbD;EHeC,aGfD;;;AHMX;EAKY,WGLU;EHOV,aGPU;EHSV,aGTU;;;AHAtB;EAKY,WGCS;EHCT,aGDS;EHGT,aGHS;;;AHNrB;EAKY,WGOO;EHLP,aGKO;EHHP,aGGO;;;AHZnB;EAKY,WGaW;EHXX,aGWW;EHTX,aGSW;;;AHlBvB;EAKY,WGmBU;EHjBV,aGiBU;EHfV,aGeU;;;AHxBtB;EAKY,WGyBQ;EHvBR,aGuBQ;EHrBR,aGqBQ;;;AH9BpB;EAKY,WG+BU;EH7BV,aG6BU;EHzBV,YGyBU;EH3BV,aG2BU;;;AHpCtB;EAKY,WGsCS;EHpCT,aGoCS;EHlCT,aGkCS;;;AH3CrB;EAKY,WG4CQ;EH1CR,aG0CQ;EHxCR,aGwCQ;;;AHjDpB;EAKY,WGkDM;EHhDN,aGgDM;EH9CN,aG8CM;;;AHvDlB;EAKY,WGwDQ;EHtDR,aGsDQ;EHlDR,YGkDQ;EHpDR,aGoDQ;;;AH7DpB;EAKY,WG+DK;EH7DL,aG6DK;EH3DL,aG2DK;EHvDL,gBGuDK;;;AHpEjB;EAKY,WGsEU;EHpEV,aGoEU;EHlEV,aGkEU;;;AH3EtB;EAKY,WG4ES;EH1ET,aG0ES;EHxET,aGwES;;;AHjFrB;EAKY,WGkFO;EHhFP,aGgFO;EH9EP,aG8EO;;;AHvFnB;EAKY,WGwFS;EHtFT,aGsFS;EHlFT,YGkFS;EHpFT,aGoFS;;;AH7FrB;EAKY,WG+FM;EH7FN,aG6FM;EH3FN,aG2FM;;;AHpGlB;EAKY,WGqGa;EHnGb,aGmGa;EHjGb,aGiGa;EH3Fb,iBG2Fa;;;AH1GzB;EAKY,WIjBR;EJmBQ,aInBR;EJqBQ,aIrBR;;;AJYJ;EAKY,WIXR;EJaQ,aIbR;EJeQ,aIfR;;;AJMJ;EAKY,WILR;EJOQ,aIPR;EJSQ,aITR;;;AJAJ;EAKY,WICR;EJCQ,aIDR;EJGQ,aIHR;;;AJNJ;EAKY,WIOR;EJLQ,aIKR;EJHQ,aIGR;;;AJZJ;EAKY,WIaP;EJXO,aIWP;EJTO,aISP","file":"typography.module.css"}

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "visua",
-  "version": "1.0.0",
+  "name": "@cellule-financiere-pmo/visua",
+  "version": "1.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "visua",
-      "version": "1.0.0",
+      "name": "@cellule-financiere-pmo/visua",
+      "version": "1.1.4",
       "license": "UNLICENSED",
       "devDependencies": {
         "sass": "^1.89.2"
@@ -475,9 +475,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.89.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
-      "integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
+      "version": "1.90.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz",
+      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,33 +1,37 @@
 {
   "name": "@cellule-financiere-pmo/visua",
-  "version": "1.0.0",
-  "description": "This project defines the visual foundations of the design system and establishes a strategy for structuring styles to guarantee their reusability in the design of graphic interfaces.",
+  "version": "1.1.4",
+  "description": "Defines the visual foundations of the design system and establishes a strategy for structuring styles to guarantee their reusability in graphic interfaces.",
+  "main": "output/variables.css",
+  "files": [
+    "output/*"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/cellule-financiere-pmo/design-system/visua.git"
+    "url": "git+https://dgfipntic.imfr.cgi.com/Cellule-financiere-transverse-PMO/visua.git"
   },
+  "bugs": {
+    "url": "https://dgfipntic.imfr.cgi.com/Cellule-financiere-transverse-PMO/visua/issues"
+  },
+  "homepage": "https://dgfipntic.imfr.cgi.com/Cellule-financiere-transverse-PMO/visua#readme",
   "keywords": [
     "scss",
     "css",
-    "design system"
+    "design system",
+    "design tokens",
+    "DSFR",
+    "typography",
+    "variables"
   ],
   "author": "CGI",
   "license": "UNLICENSED",
-  "bugs": {
-    "url": "https://gitlab.com/cellule-financiere-pmo/design-system/visua/issues"
-  },
-  "homepage": "https://gitlab.com/cellule-financiere-pmo/design-system/visua#readme",
   "devDependencies": {
     "sass": "^1.89.2"
   },
-  "main": "output/variables.css",
-  "files": [
-    "output/variables.css"
-  ],
   "publishConfig": {
-    "registry": "https://gitlab.com/api/v4/projects/71595796/packages/npm/"
+    "registry": "https://dgfipntic.imfr.cgi.com/api/packages/Cellule-financiere-transverse-PMO/npm/"
   }
 }

src/_typography.module.scss

@@ -0,0 +1,44 @@
+@use '../src/functions/mixins';
+@use '../src/tokens/typography/alternative-body-text';
+@use '../src/tokens/typography/alternative-titles';
+@use '../src/tokens/typography/text-body';
+@use '../src/tokens/typography/titles';
+
+@include mixins.generate-typo-class(alternative-body-text.$LG-article-text-Regular, "alternative-body-text-LG-article-text-Regular");
+@include mixins.generate-typo-class(alternative-body-text.$LG-article-text-Bold, "alternative-body-text-LG-article-text-Bold");
+@include mixins.generate-typo-class(alternative-body-text.$MD-article-text-Regular, "alternative-body-text-MD-article-text-Regular");
+@include mixins.generate-typo-class(alternative-body-text.$MD-article-text-Bold, "alternative-body-text-MD-article-text-Bold");
+@include mixins.generate-typo-class(alternative-body-text.$SM-article-text-Regular, "alternative-body-text-SM-article-text-Regular");
+@include mixins.generate-typo-class(alternative-body-text.$SM-article-text-Bold, "alternative-body-text-SM-article-text-Bold");
+@include mixins.generate-typo-class(alternative-body-text.$XS-article-text-Regular, "alternative-body-text-XS-article-text-Regular");
+@include mixins.generate-typo-class(alternative-titles.$XL, "alternative-titles-XL");
+@include mixins.generate-typo-class(alternative-titles.$LG, "alternative-titles-LG");
+@include mixins.generate-typo-class(alternative-titles.$MD, "alternative-titles-MD");
+@include mixins.generate-typo-class(alternative-titles.$SM, "alternative-titles-SM");
+@include mixins.generate-typo-class(alternative-titles.$XS, "alternative-titles-XS");
+@include mixins.generate-typo-class(text-body.$XL-chapo-Regular, "text-body-XL-chapo-Regular");
+@include mixins.generate-typo-class(text-body.$XL-chapo-Bold, "text-body-XL-chapo-Bold");
+@include mixins.generate-typo-class(text-body.$LG-article-text-Regular, "text-body-LG-article-text-Regular");
+@include mixins.generate-typo-class(text-body.$LG-article-text-Medium, "text-body-LG-article-text-Medium");
+@include mixins.generate-typo-class(text-body.$LG-article-text-Bold, "text-body-LG-article-text-Bold");
+@include mixins.generate-typo-class(text-body.$MD-standard-text-Regular, "text-body-MD-standard-text-Regular");
+@include mixins.generate-typo-class(text-body.$MD-standard-text-Medium, "text-body-MD-standard-text-Medium");
+@include mixins.generate-typo-class(text-body.$MD-standard-text-Bold, "text-body-MD-standard-text-Bold");
+@include mixins.generate-typo-class(text-body.$MD-standard-text-Italic, "text-body-MD-standard-text-Italic");
+@include mixins.generate-typo-class(text-body.$SM-detail-text-Regular, "text-body-SM-detail-text-Regular");
+@include mixins.generate-typo-class(text-body.$SM-detail-text-Medium, "text-body-SM-detail-text-Medium");
+@include mixins.generate-typo-class(text-body.$SM-detail-text-Bold, "text-body-SM-detail-text-Bold");
+@include mixins.generate-typo-class(text-body.$SM-detail-text-Italic, "text-body-SM-detail-text-Italic");
+@include mixins.generate-typo-class(text-body.$SM-detail-text-Maj, "text-body-SM-detail-text-Maj");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Regular, "text-body-XS-mention-text-Regular");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Medium, "text-body-XS-mention-text-Medium");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Bold, "text-body-XS-mention-text-Bold");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Italic, "text-body-XS-mention-text-Italic");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Maj, "text-body-XS-mention-text-Maj");
+@include mixins.generate-typo-class(text-body.$XS-mention-text-Underlined, "text-body-XS-mention-text-Underlined");
+@include mixins.generate-typo-class(titles.$H1-XL, "titles-H1-XL");
+@include mixins.generate-typo-class(titles.$H2-LG, "titles-H2-LG");
+@include mixins.generate-typo-class(titles.$H3-MD, "titles-H3-MD");
+@include mixins.generate-typo-class(titles.$H4-SM, "titles-H4-SM");
+@include mixins.generate-typo-class(titles.$H5-XS, "titles-H5-XS");
+@include mixins.generate-typo-class(titles.$H6-XXS, "titles-H6-XXS");

src/functions/_mixins.scss

@@ -1,4 +1,4 @@
-// Mixin that generates css variables 
+// Mixin to generate css variables 
 // If the variable has no prefix, don't assign anything to the $prefix attribute, leave its default value: “”
 @mixin generate-css-variables($map, $prefix: "") {
     @if $prefix == "" {
@@ -11,3 +11,26 @@
         }
     } 
 }
+
+// Mixin to generate typography css classes
+@mixin generate-typo-class($map, $name) {
+    .#{$name} {
+        @each $key, $value in $map {
+            @if $key == "family" {
+                font-family: $value;
+            }   @else if $key == "size" {
+                font-size: $value;
+            }   @else if $key == "weight" {
+                font-weight: $value;
+            }   @else if $key == "line-height" {
+                line-height: $value;
+            }   @else if $key == "style" {
+                font-style: $value;
+            }   @else if $key == "text-transform" {
+                text-transform: $value;
+            }   @else if $key == "text-decoration" {
+                text-decoration: $value;
+            }
+        }
+    }
+}