refactor(style): put back css variables to fix dependency issues

ovh · Jul 29, 2024 · ea41376 · ea41376
1 parent 08f070d
commit ea41376
Show file tree

Hide file tree

Showing 28 changed files with 463 additions and 422 deletions.
diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -4,7 +4,7 @@ import { OdsSpinner } from '@ovhcloud/ods-components/react';
 // import { ODS_THEME } from '@ovhcloud/ods-themes';
 import styles from './app.scss';
 
-// const fontWeights = [200, 300, 400, 500, 600, 700, 800, 900];
+const fontWeights = [200, 300, 400, 500, 600, 700, 800, 900];
 
 const App = () => {
   const [theme, setTheme] = useState<string>()
@@ -32,19 +32,19 @@ const App = () => {
         Headline with ODS mixin
       </h1>
 
-      {/*<div className={ styles['app__code'] }>*/}
-      {/*  {*/}
-      {/*    fontWeights.map((fontWeight, idx) => (*/}
-      {/*      <p style={{ fontWeight, fontStyle: 'italic' }} key={ idx }>Code { fontWeight } italic</p>*/}
-      {/*    ))*/}
-      {/*  }*/}
+      <div className={ styles['app__code'] }>
+        {
+          fontWeights.map((fontWeight, idx) => (
+            <p style={{ fontWeight, fontStyle: 'italic' }} key={ idx }>Code { fontWeight } italic</p>
+          ))
+        }
 
-      {/*  {*/}
-      {/*    fontWeights.map((fontWeight, idx) => (*/}
-      {/*      <p style={{ fontWeight }} key={ idx }>Code { fontWeight } normal</p>*/}
-      {/*    ))*/}
-      {/*  }*/}
-      {/*</div>*/}
+        {
+          fontWeights.map((fontWeight, idx) => (
+            <p style={{ fontWeight }} key={ idx }>Code { fontWeight } normal</p>
+          ))
+        }
+      </div>
 
       <OdsSpinner size={ ODS_SPINNER_SIZE.sm } />
       <OdsSpinner />

diff --git a/packages/examples/react-webpack/src/app/app.scss b/packages/examples/react-webpack/src/app/app.scss
@@ -1,14 +1,12 @@
 //@use '@ovhcloud/ods-components/style' as ods;
 @import '@ovhcloud/ods-components/style';
-@import '@ovhcloud/ods-themes/default';
 
 .app {
   font-family: var(--ods-font-family-default);
 
    &__title {
      //@include ods.ods-text-heading-1();
      @include ods-text-heading-1();
-     background-color: $ods-color-primary-400;
    }
 
   &__code {

diff --git a/packages/ods/package.json b/packages/ods/package.json
@@ -27,7 +27,6 @@
   },
   "devDependencies": {
     "@jest/types": "29.6.3",
-    "@ovhcloud/ods-themes": "17.1.0",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.9",

diff --git a/packages/ods/src/components/button/src/components/ods-button/ods-button.scss b/packages/ods/src/components/button/src/components/ods-button/ods-button.scss
@@ -1,4 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use '../../../../../style/button';
 
 .ods-button {
@@ -53,7 +52,7 @@
       inset: 0;
       align-items: center;
       justify-content: center;
-      background-color: theme.$ods-color-neutral-100;
+      background-color: var(--ods-color-neutral-100);
     }
   }
 }
diff --git a/packages/ods/src/components/link/src/components/ods-link/ods-link.scss b/packages/ods/src/components/link/src/components/ods-link/ods-link.scss
@@ -1,4 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use '../../../../../style/link';
 
 .ods-link {
@@ -9,22 +8,22 @@
 
     &:not(&#{$current}--disabled) {
       &#{$current}--primary {
-        color: theme.$ods-color-primary-500;
+        color: var(--ods-color-primary-500);
 
         &:hover {
-          color: theme.$ods-color-primary-700;
+          color: var(--ods-color-primary-700);
         }
 
         &:visited {
-          color: theme.$ods-color-primary-800;
+          color: var(--ods-color-primary-800);
         }
       }
     }
 
     &--disabled {
       opacity: .5;
       cursor: not-allowed;
-      color: theme.$ods-color-neutral-400;
+      color: var(--ods-color-neutral-400);
 
       &:focus-visible,
       &:hover {

diff --git a/packages/ods/src/components/spinner/src/components/ods-spinner/ods-spinner.scss b/packages/ods/src/components/spinner/src/components/ods-spinner/ods-spinner.scss
@@ -1,5 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
-
 $spinner-size-sm: 24px;
 $spinner-size-md: 48px;
 $spinner-size-lg: 80px;
@@ -26,15 +24,15 @@ $spinner-size-lg: 80px;
     }
 
     &--neutral {
-      fill: theme.$ods-color-neutral-500;
+      fill: var(--ods-color-neutral-500);
     }
 
     &--primary {
-      fill: theme.$ods-color-primary-500;
+      fill: var(--ods-color-primary-500);
     }
 
     &--white {
-      fill: theme.$ods-color-primary-000;
+      fill: var(--ods-color-primary-000);
     }
 
     > svg {

diff --git a/packages/ods/src/components/table/src/components/ods-table/ods-table.scss b/packages/ods/src/components/table/src/components/ods-table/ods-table.scss
@@ -1,4 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use '../../../../../style/table';
 
 .ods-table {
@@ -26,7 +25,7 @@
         tr:nth-child(2n) {
           th,
           td {
-            background-color: theme.$ods-color-neutral-050;
+            background-color: var(--ods-color-neutral-050);
           }
         }
       }

diff --git a/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.scss b/packages/ods/src/components/tag/src/components/ods-tag/ods-tag.scss
@@ -1,4 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use '../../../../../style/font';
 @use '../../../../../style/tag';
 
@@ -59,10 +58,10 @@
     }
 
     &--disabled {
-      border-color: theme.$ods-color-neutral-300;
-      background-color: theme.$ods-color-neutral-300;
+      border-color: var(--ods-color-neutral-300);
+      background-color: var(--ods-color-neutral-300);
       cursor: not-allowed;
-      color: theme.$ods-color-neutral-600;
+      color: var(--ods-color-neutral-600);
     }
 
     &--round {

diff --git a/packages/ods/src/style/_badge.scss b/packages/ods/src/style/_badge.scss
@@ -1,5 +1,3 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
-
 $ods-badge-height-sm: 19px;
 $ods-badge-height-md: 26px;
 $ods-badge-height-lg: 28px;
@@ -10,24 +8,24 @@ $ods-badge-height-lg: 28px;
   flex-flow: row;
   grid-gap: 1px;
   align-items: center;
-  color: theme.$ods-color-primary-900;
+  color: var(--ods-color-primary-900);
 }
 
 @mixin ods-badge-color($color) {
   @if $color == 'information' {
-    background-color: theme.$ods-color-new;
+    background-color: var(--ods-color-new);
   } @else if $color == 'success' {
-    background-color: theme.$ods-color-beta;
+    background-color: var(--ods-color-beta);
   } @else if $color == 'warning' {
-    background-color: theme.$ods-color-alpha;
+    background-color: var(--ods-color-alpha);
   }
 }
 
 @mixin ods-badge-shape($shape) {
   @if $shape == 'round' {
-    border-radius: theme.$ods-border-radius-lg;
+    border-radius: var(--ods-border-radius-lg);
   } @else if $shape == 'square' {
-    border-radius: theme.$ods-border-radius-sm;
+    border-radius: var(--ods-border-radius-sm);
   }
 }
 

diff --git a/packages/ods/src/style/_breakpoint.scss b/packages/ods/src/style/_breakpoint.scss
@@ -0,0 +1,6 @@
+$ods-breakpoint-sub-mobile: 360px;
+$ods-breakpoint-mobile: 576px;
+$ods-breakpoint-tablet: 768px;
+$ods-breakpoint-desktop: 992px;
+$ods-breakpoint-large-screen: 1200px;
+$ods-breakpoint-widescreen: 1400px;
diff --git a/packages/ods/src/style/_button.scss b/packages/ods/src/style/_button.scss
@@ -1,21 +1,20 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
 @use './focus';
 
 @mixin ods-button() {
   display: inline-flex;
   align-items: center;
-  border-radius: theme.$ods-border-radius-md;
+  border-radius: var(--ods-border-radius-md);
   cursor: pointer;
   overflow: hidden;
   font-size: 1rem;
   font-weight: 600;
   font-style: normal;
 
   &:disabled {
-    border-color: theme.$ods-color-neutral-100;
-    background-color: theme.$ods-color-neutral-100;
+    border-color: var(--ods-color-neutral-100);
+    background-color: var(--ods-color-neutral-100);
     cursor: not-allowed;
-    color: theme.$ods-color-neutral-600;
+    color: var(--ods-color-neutral-600);
   }
 
   &:focus-visible {
@@ -41,32 +40,32 @@
 
   &:not(:disabled) {
     @if $color == 'critical' {
-      border-color: theme.$ods-color-critical-500;
-      background-color: theme.$ods-color-critical-500;
-      color: theme.$ods-color-primary-000;
+      border-color: var(--ods-color-critical-500);
+      background-color: var(--ods-color-critical-500);
+      color: var(--ods-color-primary-000);
 
       &:hover {
-        border-color: theme.$ods-color-critical-700;
-        background-color: theme.$ods-color-critical-700;
+        border-color: var(--ods-color-critical-700);
+        background-color: var(--ods-color-critical-700);
       }
 
       &:active {
-        border-color: theme.$ods-color-critical-800;
-        background-color: theme.$ods-color-critical-800;
+        border-color: var(--ods-color-critical-800);
+        background-color: var(--ods-color-critical-800);
       }
     } @else if $color == 'primary' {
-      border-color: theme.$ods-color-primary-500;
-      background-color: theme.$ods-color-primary-500;
-      color: theme.$ods-color-primary-000;
+      border-color: var(--ods-color-primary-500);
+      background-color: var(--ods-color-primary-500);
+      color: var(--ods-color-primary-000);
 
       &:hover {
-        border-color: theme.$ods-color-primary-700;
-        background-color: theme.$ods-color-primary-700;
+        border-color: var(--ods-color-primary-700);
+        background-color: var(--ods-color-primary-700);
       }
 
       &:active {
-        border-color: theme.$ods-color-primary-800;
-        background-color: theme.$ods-color-primary-800;
+        border-color: var(--ods-color-primary-800);
+        background-color: var(--ods-color-primary-800);
       }
     }
   }
@@ -82,29 +81,29 @@
   &:not(:disabled) {
     @if $color == 'critical' {
       background-color: inherit;
-      color: theme.$ods-color-critical-500;
+      color: var(--ods-color-critical-500);
 
       &:hover {
-        background-color: theme.$ods-color-critical-100;
-        color: theme.$ods-color-critical-700;
+        background-color: var(--ods-color-critical-100);
+        color: var(--ods-color-critical-700);
       }
 
       &:active {
-        background-color: theme.$ods-color-critical-200;
-        color: theme.$ods-color-critical-800;
+        background-color: var(--ods-color-critical-200);
+        color: var(--ods-color-critical-800);
       }
     } @else if $color == 'primary' {
       background-color: inherit;
-      color: theme.$ods-color-primary-500;
+      color: var(--ods-color-primary-500);
 
       &:hover {
-        background-color: theme.$ods-color-primary-100;
-        color: theme.$ods-color-primary-700;
+        background-color: var(--ods-color-primary-100);
+        color: var(--ods-color-primary-700);
       }
 
       &:active {
-        background-color: theme.$ods-color-primary-200;
-        color: theme.$ods-color-primary-800;
+        background-color: var(--ods-color-primary-200);
+        color: var(--ods-color-primary-800);
       }
     }
   }
@@ -115,41 +114,41 @@
   border-style: solid;
 
   &:disabled {
-    border-color: theme.$ods-color-neutral-300;
+    border-color: var(--ods-color-neutral-300);
   }
 
   &:not(:disabled) {
     @if $color == 'critical' {
-      border-color: theme.$ods-color-critical-500;
-      background-color: theme.$ods-color-primary-000;
-      color: theme.$ods-color-critical-500;
+      border-color: var(--ods-color-critical-500);
+      background-color: var(--ods-color-primary-000);
+      color: var(--ods-color-critical-500);
 
       &:hover {
-        border-color: theme.$ods-color-critical-700;
-        background-color: theme.$ods-color-critical-100;
-        color: theme.$ods-color-critical-700;
+        border-color: var(--ods-color-critical-700);
+        background-color: var(--ods-color-critical-100);
+        color: var(--ods-color-critical-700);
       }
 
       &:active {
-        border-color: theme.$ods-color-critical-800;
-        background-color: theme.$ods-color-critical-200;
-        color: theme.$ods-color-critical-800;
+        border-color: var(--ods-color-critical-800);
+        background-color: var(--ods-color-critical-200);
+        color: var(--ods-color-critical-800);
       }
     } @else if $color == 'primary' {
-      border-color: theme.$ods-color-primary-500;
-      background-color: theme.$ods-color-primary-000;
-      color: theme.$ods-color-primary-500;
+      border-color: var(--ods-color-primary-500);
+      background-color: var(--ods-color-primary-000);
+      color: var(--ods-color-primary-500);
 
       &:hover {
-        border-color: theme.$ods-color-primary-700;
-        background-color: theme.$ods-color-primary-100;
-        color: theme.$ods-color-primary-700;
+        border-color: var(--ods-color-primary-700);
+        background-color: var(--ods-color-primary-100);
+        color: var(--ods-color-primary-700);
       }
 
       &:active {
-        border-color: theme.$ods-color-primary-800;
-        background-color: theme.$ods-color-primary-200;
-        color: theme.$ods-color-primary-800;
+        border-color: var(--ods-color-primary-800);
+        background-color: var(--ods-color-primary-200);
+        color: var(--ods-color-primary-800);
       }
     }
   }

diff --git a/packages/ods/src/style/_focus.scss b/packages/ods/src/style/_focus.scss
@@ -1,6 +1,4 @@
-@use '~@ovhcloud/ods-themes/src/default/variables' as theme;
-
 @mixin ods-focus() {
-  outline: theme.$ods-outline-style theme.$ods-outline-width theme.$ods-color-primary-700;
-  outline-offset: theme.$ods-outline-offset;
+  outline: var(--ods-outline-style) var(--ods-outline-width) var(--ods-color-primary-700);
+  outline-offset: var(--ods-outline-offset);
 }