@design-system-rte/core 0.1.2 → 0.2.0-rc2

package/components/button/button.interface.d.ts

@@ -1,4 +1,4 @@
-export type ButtonVariant = 'filled' | 'outlined' | 'text' | 'transparent' | 'danger'
+export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'transparent' | 'danger'
 export type ButtonSize = 's' | 'm' | 'l';
 export type ButtonIconPosition = 'left' | 'right';
 

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@design-system-rte/core",
-  "version": "0.1.2",
+  "version": "0.2.0-rc2",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run build:css-themes",
+    "build:css-themes": "ts-node css-theme-generator.ts",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [],
   "author": "",
@@ -14,5 +17,10 @@
   },
   "peerDependencies": {
     "sass": "^1.85.1"
+  },
+  "devDependencies": {
+    "sass": "^1.89.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
   }
 }

package/tokens/_mixins.scss

@@ -16,7 +16,7 @@ $themes: (
 }
 
 
-@mixin theme-selector($targetTheme: violet, $mode: light) {
+@mixin theme-selector($targetTheme: bleu_iceberg, $mode: light) {
     $theme: map.get($themes, $targetTheme, $mode);
 
     [data-theme="#{$targetTheme}"][data-mode="#{$mode}"] {

package/tokens/_themes.scss

@@ -1,4 +1,5 @@
 @use 'primitives/colors' as *;
+@use 'primitives/devColors' as *;
 
 $bleu_iceberg: (
     "light": (
@@ -63,6 +64,9 @@ $bleu_iceberg: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-700,
+        "background-hover-opacity-50": $greyscale-50-opacity-50,
+        "background-brand-hover-opacity-20": $bleu-iceberg-700-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
     ),
     "dark": (
         "content-primary": $core-white,
@@ -126,6 +130,9 @@ $bleu_iceberg: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-500,
+        "background-hover-opacity-50": $greyscale-800-opacity-50,
+        "background-brand-hover-opacity-20": $bleu-iceberg-200-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,
     )
 );
 
@@ -192,6 +199,9 @@ $violet: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-700,
+        "background-hover-opacity-50": $greyscale-50-opacity-50,
+        "background-brand-hover-opacity-20": $violet-700-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
     ),
     "dark": (
         "content-primary": $core-white,
@@ -255,6 +265,9 @@ $violet: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-500,
+        "background-hover-opacity-50": $greyscale-800-opacity-50,
+        "background-brand-hover-opacity-20": $violet-200-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,
     )    
 );
 
@@ -321,6 +334,9 @@ $vert_foret: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-700,
+        "background-hover-opacity-50": $greyscale-50-opacity-50,
+        "background-brand-hover-opacity-20": $vert-foret-700-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
     ),
     "dark": (
         "content-primary": $core-white,
@@ -384,5 +400,8 @@ $vert_foret: (
         "content-success": $vert-digital-600,
         "content-success-inverse": $core-white,
         "content-success-bold": $vert-digital-500,
+        "background-hover-opacity-50": $greyscale-800-opacity-50,
+        "background-brand-hover-opacity-20": $vert-foret-200-opacity-20,
+        "background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,
     )
 );

package/tokens/primitives/_devColors.scss

@@ -0,0 +1,12 @@
+@use 'colors' as *;
+
+$greyscale-50-opacity-50: rgba($greyscale-50, 0.5);
+$greyscale-800-opacity-50: rgba($greyscale-800, 0.5);
+$bleu-iceberg-700-opacity-20: rgba($bleu-iceberg-700, 0.2);
+$bleu-iceberg-200-opacity-20: rgba($bleu-iceberg-200, 0.2);
+$violet-700-opacity-20: rgba($violet-700, 0.2);
+$violet-200-opacity-20: rgba($violet-200, 0.2);
+$vert-foret-700-opacity-20: rgba($vert-foret-700, 0.2);
+$vert-foret-200-opacity-20: rgba($vert-foret-200, 0.2);
+$rouge-indications-700-opacity-20: rgba($rouge-indications-700, 0.2);
+$rouge-indications-500-opacity-20: rgba($rouge-indications-500, 0.2);

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "target": "es2019",
+      "module": "commonjs",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "strict": true
+    },
+    "include": ["scripts/**/*"],
+    "exclude": ["node_modules"]
+  }