chore: update gitrepo file

storyblok · Feb 22, 2024 · 82d1897 · 82d1897
1 parent 338e568
commit 82d1897
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 158 deletions.
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
@@ -1,4 +1,4 @@
-@import '../src/assets/styles/helper-classes.scss';
+@import '../src/assets/styles/helper-classes';
 
 body {
   margin: 20px;

diff --git a/src/assets/styles/_old-colors.scss b/src/assets/styles/_old-colors.scss
diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/_typography.scss
@@ -37,32 +37,11 @@ $font-size: (
   '32': $font-32,
 );
 
-
 // -- Font weight helper classes
 // E.g. .font-thin, .font-light, ..
 $font-weight: (
-  'light':    $font-light,
-  'regular':  $font-regular,
-  'medium':   $font-medium,
-  'bold':     $font-bold,
+  'light': $font-light,
+  'regular': $font-regular,
+  'medium': $font-medium,
+  'bold': $font-bold,
 );
-
-
-// WILL BE REMOVED SOON
-$heading-2xl: 3.2rem; // will be removed, use font-32
-$heading-xl: 2.6rem; // will be removed, use font-26
-$heading-lg: 2rem; // will be removed, use $font-20
-$heading-md: 1.8rem; // will be removed, use $font-18
-$heading-base: 1.4rem; // will be removed, use font-14
-$heading-s: 1.2rem; // will be removed, use font-12
-$heading-xs: 1rem; // will be removed, use font-10
-$font-15: 1.4rem; // will be removed, use font-14
-$font-19: 1.8rem; // will be removed use font-18
-$font-21: 2rem; // will be removed, use font-20
-$font-25: 2.4rem; // will be removed, use font-24
-$font-36: 3.2rem; // will be removed, use font-32
-$font-weight-thin: 300; // use font-light
-$font-weight-light: 300; // use font-light
-$font-weight-regular: 400; // use font-regular
-$font-weight-medium: 500; // use font-medium
-$font-weight-bold: 700; // use font-bold
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
@@ -20,16 +20,6 @@ body {
   text-rendering: optimizelegibility;
 }
 
-@each $name, $pair in $colors {
-  .bg-#{$name} {
-    background-color: $pair !important;
-  }
-
-  .text-#{$name} {
-    color: $pair !important;
-  }
-}
-
 /*
   Typography
 */

diff --git a/src/assets/styles/helper-classes.scss b/src/assets/styles/helper-classes.scss
@@ -2,6 +2,29 @@
 @import './sizes';
 @import './colors';
 
+$bg-colors: (
+  'white': $bg-white,
+  'teal': $bg-teal,
+  'dark-blue': $bg-dark-blue,
+  'green': $bg-green,
+  'yellow': $bg-yellow,
+  'blue': $bg-blue,
+  'red': $bg-red,
+  'gray': $bg-gray,
+  'gray-50': $bg-gray-50,
+);
+$text-colors: (
+  'yellow': $text-yellow,
+  'white': $text-white,
+  'teal': $text-teal,
+  'red': $text-red,
+  'green': $text-green,
+  'gray-light': $text-gray-light,
+  'gray': $text-gray,
+  'blue': $text-blue,
+  'dark-blue': $text-dark-blue,
+);
+
 @each $name, $pair in $font-size {
   .font-#{$name} {
     font-size: $pair !important;
@@ -76,11 +99,13 @@
   }
 }
 
-@each $name, $pair in $colors {
+@each $name, $pair in $bg-colors {
   .bg-#{$name} {
     background-color: $pair !important;
   }
+}
 
+@each $name, $pair in $text-colors {
   .text-#{$name} {
     color: $pair !important;
   }

diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
@@ -1,4 +1,3 @@
-@import './old-colors';
 @import './colors';
 @import './animation';
 @import './border';

diff --git a/src/components/EditorHeader/components/HeaderTitle.vue b/src/components/EditorHeader/components/HeaderTitle.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="sb-editor-header__title">
     <SbButton
+      has-icon-only
       icon="arrow-left"
       variant="tertiary"
       size="small"

diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
@@ -451,10 +451,10 @@ export const EmitOption = (args) => ({
           style="max-width: 300px"
         />
 
-        <p class="font-medium text-ink font-size-lg">
+        <p class="font-medium text-dark-blue font-size-lg">
           Selected value {{ singleSelectValue }}
         </p>
-        <p class="font-medium text-ink font-size-lg">
+        <p class="font-medium text-dark-blue font-size-lg">
           Selected option {{ singleSelectOption }}
         </p>
       </div>
@@ -469,7 +469,7 @@ export const EmitOption = (args) => ({
         style="max-width: 300px"
       />
 
-      <p class="font-medium text-ink font-size-lg">
+      <p class="font-medium text-dark-blue font-size-lg">
         Selected value {{ multipleSelectValue }}
       </p>
     </div>

diff --git a/stories/Design/Typography/Typography.stories.js b/stories/Design/Typography/Typography.stories.js
@@ -33,41 +33,26 @@ export const AllTexts = () => ({
 
 
       <h2 class="sb-typography__subtitle">Text Color</h2>
-      <p class="text-primary">.text-primary</p>
-      <p class="text-primary-dark">.text-primary-dark</p>
-      <p class="text-secondary">.text-secondary</p>
-      <p class="text-positive">.text-positive</p>
-      <p class="text-negative">.text-negative</p>
-      <p class="text-warning">.text-warning</p>
-      <p class="text-white">.text-white</p>
+      <p class="text-yellow">.text-yellow</p>
+      <p class="text-white bg-dark-blue">.text-white</p>
       <p class="text-teal">.text-teal</p>
-      <p class="text-ink">.text-ink</p>
+      <p class="text-red">.text-red</p>
       <p class="text-green">.text-green</p>
-      <p class="text-yellow">.text-yellow</p>
+      <p class="text-gray-light">.text-gray-light</p>
+      <p class="text-gray">.text-gray</p>
       <p class="text-blue">.text-blue</p>
-      <p class="text-orange">.text-orange</p>
-      <p class="text-red">.text-red</p>
-      <p class="text-light">.text-light</p>
-      <p class="text-light-gray">.text-light-gray</p>
-
+      <p class="text-dark-blue">.text-dark-blue</p>
 
       <h2 class="sb-typography__subtitle">Background color</h2>
-      <p class="bg-primary">.bg-primary</p>
-      <p class="bg-primary-dark">.bg-primary-dark</p>
-      <p class="bg-secondary">.bg-secondary</p>
-      <p class="bg-positive">.bg-positive</p>
-      <p class="bg-negative">.bg-negative</p>
-      <p class="bg-warning">.bg-warning</p>
-      <p class="bg-white">.bg-white</p>
       <p class="bg-teal">.bg-teal</p>
-      <p class="bg-ink">.bg-ink</p>
+      <p class="bg-dark-blue text-white">.bg-dark-blue</p>
       <p class="bg-green">.bg-green</p>
+      <p class="bg-white">.bg-white</p>
       <p class="bg-yellow">.bg-yellow</p>
       <p class="bg-blue">.bg-blue</p>
-      <p class="bg-orange">.bg-orange</p>
       <p class="bg-red">.bg-red</p>
-      <p class="bg-light">.bg-light</p>
-      <p class="bg-light-gray">.bg-light-gray</p>
+      <p class="bg-gray">.bg-gray</p>
+      <p class="bg-gray-50">.bg-gray-50</p>
 
       <h2 class="sb-typography__subtitle">Headings</h2>
       <h1>Heading 1</h1>