Feature: Optimizing SCSS and moving towards a design system... ...eventually 🦄

docs/STYLING.md

@@ -94,15 +94,15 @@ Let's see what kind of custom properties you can set and how to set them?
 
     --mynah-card-radius: var(--mynah-sizing-2);
     --mynah-input-radius: var(--mynah-sizing-1);
-    --mynah-card-radius-corner: 0;
+    --mynah-card-corner-radius: 0;
     --mynah-button-radius: var(--mynah-sizing-1);
 
     --mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
     --mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1);
     --mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1);
     --mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1);
-    --mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1);
-    --mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
+    --mynah-short-rev-transition: all 580ms cubic-bezier(0.35, 1, 0, 1);
+    --mynah-short-rev-opacity-transition: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
     --mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1),
         transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
 }

example/dev.js

@@ -1,2 +1,12 @@
-import open from 'open';
-await open('./dist/index.html');
+// Dynamic import handling
+const openFile = async () => {
+    try {
+        // Use dynamic import to load the ES module
+        const open = (await import('open')).default;
+        await open('./dist/index.html');
+    } catch (err) {
+        console.error('Error opening file:', err);
+    }
+};
+
+openFile();

example/src/theme-builder/base-theme-dark-config.json

@@ -370,7 +370,7 @@
         "unit": "",
         "value": "var(--mynah-sizing-5)"
     },
-    "--mynah-card-radius-corner": {
+    "--mynah-card-corner-radius": {
         "type": "measurement",
         "description": "Border radius used on all Chat card edge bottom corner",
         "category": "radius",
@@ -418,13 +418,13 @@
         "description": "This is a transition animation used in several places",
         "value": "all 550ms cubic-bezier(0.85, 0.15, 0, 1)"
     },
-    "--mynah-short-transition-rev": {
+    "--mynah-short-rev-transition": {
         "type": "text",
         "category": "transition",
         "description": "This is a transition animation used in several places",
         "value": "all 580ms cubic-bezier(0.35, 1, 0, 1)"
     },
-    "--mynah-short-transition-rev-opacity": {
+    "--mynah-short-rev-opacity-transition": {
         "type": "text",
         "category": "transition",
         "description": "This is a transition animation used in several places",

example/src/theme-builder/base-theme-light-config.json

@@ -370,7 +370,7 @@
         "unit": "",
         "value": "var(--mynah-sizing-5)"
     },
-    "--mynah-card-radius-corner": {
+    "--mynah-card-corner-radius": {
         "type": "measurement",
         "description": "Border radius used on all Chat card edge bottom corner",
         "category": "radius",
@@ -418,13 +418,13 @@
         "description": "This is a transition animation used in several places",
         "value": "all 550ms cubic-bezier(0.85, 0.15, 0, 1)"
     },
-    "--mynah-short-transition-rev": {
+    "--mynah-short-rev-transition": {
         "type": "text",
         "category": "transition",
         "description": "This is a transition animation used in several places",
         "value": "all 580ms cubic-bezier(0.35, 1, 0, 1)"
     },
-    "--mynah-short-transition-rev-opacity": {
+    "--mynah-short-rev-opacity-transition": {
         "type": "text",
         "category": "transition",
         "description": "This is a transition animation used in several places",

package.json

@@ -19,6 +19,8 @@
         "packdemo": "cd ./example && npm run pack",
         "watch": "webpack --config webpack.config.js --mode development --watch",
         "watch:example": "cd ./example && npm run watch",
+        "watch:web": "run-p watch watch:example serve:example",
+        "serve:example": "live-server --port=9000 example/dist",
         "start:example": "cd ./example && npm install && npm run build && npm run dev",
         "dev": "npm run clean && npm install && npm run build && npm run start:example",
         "lint-fix": "npx eslint \"./**\" --fix",

src/styles/_mixins.scss

@@ -61,10 +61,52 @@
 }
 
 /**
- * @param {string} $name - The name of the transition.
- * @param {number} $duration - The duration of the transition in milliseconds.
- * @param {string} $timing-function - The timing function of the transition.
+ * @param {String} $name - The name of the CSS variable.
+ * @param {String} $property - The CSS property to transition.
+ * @param {Number} $duration - The duration in milliseconds.
+ * @param {String} $timing-function - The timing function (e.g., cubic-bezier).
  */
-@mixin mynah-transition($name, $duration, $timing-function) {
-    --mynah-#{$name}-transition: all #{$duration}ms #{$timing-function};
+@mixin mynah-transition-var($name, $property, $duration, $timing-function) {
+    :root {
+        --mynah-#{$name}-transition: #{$property} #{$duration}ms #{$timing-function};
+    }
+}
+
+/**
+ * @param {Number} $base - The base value used to generate sizing variables.
+ */
+@mixin mynah-sizing-vars($base) {
+    :root {
+        --mynah-sizing-half: calc(var(--mynah-sizing-base) / 2);
+
+        @for $i from 1 through 18 {
+            --mynah-sizing-#{$i}: calc(var(--mynah-sizing-base) * #{$i});
+        }
+    }
+}
+
+/**
+ * @param {String} $name - The name of the CSS variable.
+ * @param {String | Number} $value - The value to assign to the CSS variable.
+ */
+@mixin mynah-css-var($name, $value) {
+    :root {
+        #{$name}: #{$value};
+    }
+}
+
+/**
+ * @param {String} $type - The type of CSS variable to generate.
+ * @param {String} $prefix - The prefix of the CSS variable.
+ * @param {String} $key - The key of the CSS variable.
+ * @param {String | Number} $value - The value to assign to the CSS variable.
+ */
+@mixin mynah-generate-css-var($type, $prefix, $key, $value) {
+    @if $type == 'prefix' {
+        @include mynah-css-var(#{$mynah}-#{$prefix}-#{$key}, $value);
+    } @else if $type == 'radius' {
+        @include mynah-css-var(#{$mynah}-#{$key}-radius, $value);
+    } @else if $type == 'shadow' {
+        @include mynah-css-var(#{$mynah}-shadow-#{$key}, $value);
+    }
 }

src/styles/_scss-variables.scss

@@ -15,4 +15,117 @@ $mynah-padding-sizes: (
     'large': 5,
 );
 
+/**
+ * Code block
+ */
 $mynah-code-blocks-wrap-under: 300px;
+
+/**
+ * Text colors
+ */
+$mynah-text-colors: (
+    'default': var(--vscode-foreground),
+    'alternate': var(--mynah-color-button-reverse),
+    'strong': var(--vscode-input-foreground),
+    'weak': var(--vscode-disabledForeground),
+    'link': var(--vscode-textLink-foreground),
+    'input': var(--vscode-input-foreground),
+);
+
+/**
+ * Colors
+ */
+$mynah-colors: (
+    'bg': var(--vscode-sideBar-background),
+    'tab-active': var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg))),
+    'light': rgba(0, 0, 0, 0.05),
+    'border-default': var(--vscode-panel-border, var(--vscode-tab-border, rgba(0, 0, 0, 0.1))),
+    'highlight': rgba(255, 179, 0, 0.25),
+    'highlight-text': #886411,
+    'toggle': var(--vscode-sideBar-background),
+    'toggle-reverse': rgba(0, 0, 0, 0.5),
+    'button': var(--vscode-button-background),
+    'button-reverse': var(--vscode-button-foreground),
+    'alternate': var(--vscode-button-secondaryBackground),
+    'alternate-reverse': var(--vscode-button-secondaryForeground),
+    'gradient-start': #7638fa,
+    'gradient-mid': #3e8dff,
+    'gradient-end': #8af3ff,
+);
+
+/**
+ * Syntax colors
+ */
+$mynah-syntax-colors: (
+    'bg': var(--vscode-terminal-dropBackground),
+    'variable': var(--vscode-debugTokenExpression-name),
+    'function': var(--vscode-gitDecoration-modifiedResourceForeground),
+    'operator': var(--vscode-debugTokenExpression-name),
+    'attr-value': var(--vscode-debugIcon-stepBackForeground),
+    'attr': var(--vscode-debugTokenExpression-string),
+    'property': var(--vscode-terminal-ansiCyan),
+    'comment': var(--vscode-debugConsole-sourceForeground),
+    'code': var(--vscode-editor-foreground, var(--mynah-color-text-default, inherit)),
+);
+
+/**
+ * Syntax code block
+ */
+$mynah-syntax-code: (
+    'font-family': var(--vscode-editor-font-family),
+    'line-height': 1.5rem,
+    'font-size': var(--vscode-editor-font-size, var(--mynah-font-size-medium)),
+);
+
+/**
+ * Status colors
+ */
+$mynah-status-colors: (
+    'info': #0971d3,
+    'success': #037f03,
+    'warning': #b2911c,
+    'error': #d91515,
+);
+
+/**
+ * Font sizes
+ */
+$mynah-font-sizes: (
+    'xxsmall': 0.8rem,
+    'xsmall': 0.9rem,
+    'small': 1rem,
+    'medium': 1.125rem,
+    'large': 1.25rem,
+);
+
+/**
+ * Transitions
+ */
+$mynah-transitions: (
+    ('bottom-panel', (all, 850, cubic-bezier(0.25, 1, 0, 1))),
+    ('short-rev', (all, 580, cubic-bezier(0.35, 1, 0, 1))),
+    ('very-short', (all, 600, cubic-bezier(0.25, 1, 0, 1))),
+    ('very-long', (all, 1650, cubic-bezier(0.25, 1, 0, 1))),
+    ('short', (all, 550, cubic-bezier(0.85, 0.15, 0, 1))),
+    ('short-rev-opacity', (opacity, 750, cubic-bezier(0.35, 1, 0, 1))),
+    ('text-flow', (all, 800, cubic-bezier(0.35, 1.2, 0, 1)), (transform, 800, cubic-bezier(0.2, 1.05, 0, 1)))
+);
+
+/**
+ * Radii
+ */
+$mynah-radii: (
+    'card': var(--mynah-sizing-2),
+    'input': var(--mynah-sizing-1),
+    'card-corner': 0,
+    'button': var(--mynah-sizing-1),
+);
+
+/**
+ * Shadows
+ */
+$mynah-shadows: (
+    'button': none,
+    'card': none,
+    'overlay': 0 0px 15px -5px rgba(0, 0, 0, 0.4),
+);