@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

package/src/lib/scss/public/colors/default.scss

@@ -1,70 +1,64 @@
 // TODO: Reference colors
-$ds-primary-25: #fcfcff !default;
-$ds-primary-50: #f7f7ff !default;
-$ds-primary-100: #ebebff !default;
-$ds-primary-300: #b1b0f5 !default;
-$ds-primary-500: #8e8cee !default;
-$ds-primary-700: #6160a2 !default;
-$ds-primary-900: #2e2e4c !default;
+$ds-purple-50: #F9F9FF;
+$ds-purple-100: #F6F6FE;
+$ds-purple-200: #EEEEFE;
+$ds-purple-300: #E8E7FE;
+$ds-purple-400: #D2CFFD;
+$ds-purple-500: #B8B4F3;
+$ds-purple-600: #8883D8;
+$ds-purple-700: #6A65AE;
+$ds-purple-800: #484676;
+$ds-purple-900: #32334B;
 
-$ds-purple-25: #fcfcff;
-$ds-purple-50: #f7f7ff;
-$ds-purple-100: #ebebff;
-$ds-purple-300: #b1b0f5;
-$ds-purple-500: #8e8cee;
-$ds-purple-700: #6160a2;
-$ds-purple-900: #2e2e4c;
+$ds-blue-100: #E5F0FF;
+$ds-blue-200: #DAE8FC;
+$ds-blue-300: #B0CDF3;
+$ds-blue-500: #8BB4EA;
+$ds-blue-700: #5F7BA0;
+$ds-blue-900: #2D394A;
 
-$ds-blue-100: #e5f0ff;
-$ds-blue-300: #b0cdf3;
-$ds-blue-500: #8bb4ea;
-$ds-blue-700: #5f7ba0;
-$ds-blue-900: #2d394a;
+$ds-red-100: #FEE6E6;
+$ds-red-200: #FED7D7;
+$ds-red-300: #FAA0A0;
+$ds-red-500: #E55454;
+$ds-red-700: #C64848;
+$ds-red-900: #4B2525;
 
-$ds-glacier-100: #e0f7fe;
-$ds-glacier-300: #aeddec;
-$ds-glacier-500: #8bcbdf;
-$ds-glacier-700: #5d8896;
-$ds-glacier-900: #2d4148;
+$ds-neutral-50: #f9f9fd;
+$ds-neutral-100: #f7f7fd;
+$ds-neutral-200: #f5f5fb;
+$ds-neutral-300: #e7e7ed;
+$ds-neutral-400: #d2d2d9;
+$ds-neutral-500: #b8b8c0;
+$ds-neutral-600: #919199;
+$ds-neutral-700: #696971;
+$ds-neutral-800: #3f3f47;
+$ds-neutral-900: #26262e;
 
-$ds-red-100: #fedede;
-$ds-red-300: #faa0a0;
-$ds-red-500: #e55454;
-$ds-red-700: #c64848;
-$ds-red-900: #4b2525;
+$ds-green-100: #E6FAF1;
+$ds-green-200: #D5F6E7;
+$ds-green-300: #AAEACC;
+$ds-green-500: #85DCB4;
+$ds-green-700: #599278;
+$ds-green-900: #2B4639;
 
-$ds-pink-100: #ffebf1;
-$ds-pink-300: #ffb1cb;
-$ds-pink-500: #f96092;
-$ds-pink-700: #c0305f;
-$ds-pink-900: #700024;
+$ds-yellow-100: #FEFAEC;
+$ds-yellow-200: #FCF3D1;
+$ds-yellow-300: #F6E7AC;
+$ds-yellow-500: #F0D26F;
+$ds-yellow-700: #C5A33E;
+$ds-yellow-900: #483D18;
 
-$ds-grey-100: #fafaff;
-$ds-grey-200: #f5f6fb;
-$ds-grey-300: #ededf2;
-$ds-grey-400: #d2d2d8;
-$ds-grey-500: #91919c;
-$ds-grey-600: #696970;
-$ds-grey-700: #4c4c53;
-$ds-grey-900: #26262e;
-
-$ds-green-100: #e4ffe6;
-$ds-green-300: #c4f5c8;
-$ds-green-500: #84de8a;
-$ds-green-700: #5b985f;
-$ds-green-900: #354a2d;
-
-$ds-spearmint-100: #e3fff2;
-$ds-spearmint-300: #aaeacc;
-$ds-spearmint-500: #85dcb4;
-$ds-spearmint-700: #599278;
-$ds-spearmint-900: #2b4639;
-
-$ds-yellow-100: #fff8e3;
-$ds-yellow-300: #fae3a5;
-$ds-yellow-500: #f7ce5c;
-$ds-yellow-700: #cc9e21;
-$ds-yellow-900: #4a3d10;
+$ds-orange-50: #FAF8F5;
+$ds-orange-100: #FCF7EF;
+$ds-orange-200: #FDF2E2;
+$ds-orange-300: #FEECD3;
+$ds-orange-400: #FCDAAB;
+$ds-orange-500: #FFD08F;
+$ds-orange-600: #F2B873;
+$ds-orange-700: #C6824E;
+$ds-orange-800: #7E4B2F;
+$ds-orange-900: #4C2D21;
 
 $ds-white: #fff;
 $ds-transparent: transparent;
@@ -73,60 +67,54 @@ $colors: (
   'white': #fff,
   'transparent': transparent,
   'blue-100': $ds-blue-100,
+  'blue-200': $ds-blue-200,
   'blue-300': $ds-blue-300,
   'blue-500': $ds-blue-500,
   'blue-700': $ds-blue-700,
   'blue-900': $ds-blue-900,
-  'purple-25': $ds-purple-25,
   'purple-50': $ds-purple-50,
   'purple-100': $ds-purple-100,
+  'purple-200': $ds-purple-200,
   'purple-300': $ds-purple-300,
+  'purple-400': $ds-purple-400,
   'purple-500': $ds-purple-500,
+  'purple-600': $ds-purple-600,
   'purple-700': $ds-purple-700,
+  'purple-800': $ds-purple-800,
   'purple-900': $ds-purple-900,
-  'primary-25': $ds-primary-25,
-  'primary-50': $ds-primary-50,
-  'primary-100': $ds-primary-100,
-  'primary-300': $ds-primary-300,
-  'primary-500': $ds-primary-500,
-  'primary-700': $ds-primary-700,
-  'primary-900': $ds-primary-900,
   'red-100': $ds-red-100,
+  'red-200': $ds-red-200,
   'red-300': $ds-red-300,
   'red-500': $ds-red-500,
   'red-700': $ds-red-700,
   'red-900': $ds-red-900,
-  'grey-100': $ds-grey-100,
-  'grey-200': $ds-grey-200,
-  'grey-300': $ds-grey-300,
-  'grey-400': $ds-grey-400,
-  'grey-500': $ds-grey-500,
-  'grey-600': $ds-grey-600,
-  'grey-700': $ds-grey-700,
-  'grey-900': $ds-grey-900,
+  'neutral-50': $ds-neutral-50,
+  'neutral-100': $ds-neutral-100,
+  'neutral-300': $ds-neutral-300,
+  'neutral-400': $ds-neutral-400,
+  'neutral-600': $ds-neutral-600,
+  'neutral-700': $ds-neutral-700,
+  'neutral-800': $ds-neutral-800,
+  'neutral-900': $ds-neutral-900,
   'green-100': $ds-green-100,
   'green-300': $ds-green-300,
   'green-500': $ds-green-500,
   'green-700': $ds-green-700,
   'green-900': $ds-green-900,
-  'glacier-100': $ds-glacier-100,
-  'glacier-300': $ds-glacier-300,
-  'glacier-500': $ds-glacier-500,
-  'glacier-700': $ds-glacier-700,
-  'glacier-900': $ds-glacier-900,
-  'spearmint-100': $ds-spearmint-100,
-  'spearmint-300': $ds-spearmint-300,
-  'spearmint-500': $ds-spearmint-500,
-  'spearmint-700': $ds-spearmint-700,
-  'spearmint-900': $ds-spearmint-900,
-  'pink-100': $ds-pink-100,
-  'pink-300': $ds-pink-300,
-  'pink-500': $ds-pink-500,
-  'pink-700': $ds-pink-700,
-  'pink-900': $ds-pink-900,
   'yellow-100': $ds-yellow-100,
+  'yellow-200': $ds-yellow-200,
   'yellow-300': $ds-yellow-300,
   'yellow-500': $ds-yellow-500,
   'yellow-700': $ds-yellow-700,
   'yellow-900': $ds-yellow-900,
+  'orange-50': $ds-orange-50,
+  'orange-100': $ds-orange-100,
+  'orange-200': $ds-orange-200,
+  'orange-300': $ds-orange-300,
+  'orange-400': $ds-orange-400,
+  'orange-500': $ds-orange-500,
+  'orange-600': $ds-orange-600,
+  'orange-700': $ds-orange-700,
+  'orange-800': $ds-orange-800,
+  'orange-900': $ds-orange-900,
 );

package/src/lib/scss/public/colors.mdx

@@ -17,7 +17,7 @@ To do so, `@import` or `@use` at the top for your `.scss` file.
 @import '@popsure/dirty-swan/dist/colors';
 
 .element {
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 }
 ```
 

package/src/lib/scss/public/demo.tsx

@@ -12,254 +12,264 @@ const colors = [
     hex: '#fff',
   },
   {
-    name: 'Primary 25',
-    code: 'primary-25',
-    hex: '#fcfcff',
+    name: 'Purple 50',
+    code: 'purple-50',
+    hex: '#F9F9FF',
   },
   {
-    name: 'Primary 50',
-    code: 'primary-50',
-    hex: '#f7f7ff',
+    name: 'Purple 100',
+    code: 'purple-100',
+    hex: '#F6F6FE',
   },
   {
-    name: 'Primary 100',
-    code: 'primary-100',
-    hex: '#ebebff',
+    name: 'Purple 200',
+    code: 'purple-200',
+    hex: '#EEEEFE',
   },
   {
-    name: 'Primary 300',
-    code: 'primary-300',
-    hex: '#b1b0f5',
+    name: 'Purple 300',
+    code: 'purple-300',
+    hex: '#E8E7FE',
   },
   {
-    name: 'Primary 500',
-    code: 'primary-500',
-    hex: '#8e8cee',
+    name: 'Purple 400',
+    code: 'purple-400',
+    hex: '#D2CFFD',
   },
   {
-    name: 'Primary 700',
-    code: 'primary-700',
-    hex: '#6160a2',
+    name: 'Purple 500',
+    code: 'purple-500',
+    hex: '#B8B4F3',
   },
   {
-    name: 'Primary 900',
-    code: 'primary-900',
-    hex: '#2e2e4c',
+    name: 'Purple 600',
+    code: 'purple-600',
+    hex: '#8883D8',
+  },
+  {
+    name: 'Purple 700',
+    code: 'purple-700',
+    hex: '#6A65AE',
+  },
+  {
+    name: 'Purple 800',
+    code: 'purple-800',
+    hex: '#484676',
+  },
+  {
+    name: 'Purple 900',
+    code: 'purple-900',
+    hex: '#32334B',
   },
   {
     name: 'Blue 100',
     code: 'blue-100',
-    hex: '#e5f0ff',
+    hex: '#E5F0FF',
+  },
+  {
+    name: 'Blue 200',
+    code: 'blue-200',
+    hex: '#DAE8FC',
   },
   {
     name: 'Blue 300',
     code: 'blue-300',
-    hex: '#b0cdf3',
+    hex: '#B0CDF3',
   },
   {
     name: 'Blue 500',
     code: 'blue-500',
-    hex: '#8bb4ea',
+    hex: '#8BB4EA',
   },
   {
     name: 'Blue 700',
     code: 'blue-700',
-    hex: '#5f7ba0',
+    hex: '#5F7BA0',
   },
   {
     name: 'Blue 900',
     code: 'blue-900',
-    hex: '#2d394a',
-  },
-  {
-    name: 'Glacier 100',
-    code: 'glacier-100',
-    hex: '#e0f7fe',
-  },
-  {
-    name: 'Glacier 300',
-    code: 'glacier-300',
-    hex: '#aeddec',
-  },
-  {
-    name: 'Glacier 500',
-    code: 'glacier-500',
-    hex: '#8bcbdf',
-  },
-  {
-    name: 'Glacier 700',
-    code: 'glacier-700',
-    hex: '#5d8896',
-  },
-  {
-    name: 'Glacier 900',
-    code: 'glacier-900',
-    hex: '#2d4148',
+    hex: '#2D394A',
   },
   {
     name: 'Red 100',
     code: 'red-100',
-    hex: '#fedede',
+    hex: '#FEE6E6',
+  },
+  {
+    name: 'Red 200',
+    code: 'red-200',
+    hex: '#FED7D7',
   },
   {
     name: 'Red 300',
     code: 'red-300',
-    hex: '#faa0a0',
+    hex: '#FAA0A0',
   },
   {
     name: 'Red 500',
     code: 'red-500',
-    hex: '#e55454',
+    hex: '#E55454',
   },
   {
     name: 'Red 700',
     code: 'red-700',
-    hex: '#c64848',
+    hex: '#C64848',
   },
   {
     name: 'Red 900',
     code: 'red-900',
-    hex: '#4b2525',
-  },
-  {
-    name: 'Pink 100',
-    code: 'pink-100',
-    hex: '#ffebf1',
-  },
-  {
-    name: 'Pink 300',
-    code: 'pink-300',
-    hex: '#ffb1cb',
-  },
-  {
-    name: 'Pink 500',
-    code: 'pink-500',
-    hex: '#f96092',
-  },
-  {
-    name: 'Pink 700',
-    code: 'pink-700',
-    hex: '#c0305f',
-  },
-  {
-    name: 'Pink 900',
-    code: 'pink-900',
-    hex: '#700024',
+    hex: '#4B2525',
   },
   {
-    name: 'Grey 100',
-    code: 'grey-100',
+    name: 'Neutral 100',
+    code: 'neutral-50',
     hex: '#fafaff',
   },
   {
-    name: 'Grey 200',
-    code: 'grey-200',
+    name: 'Neutral 200',
+    code: 'neutral-100',
     hex: '#f5f6fb',
   },
   {
-    name: 'Grey 300',
-    code: 'grey-300',
+    name: 'Neutral 300',
+    code: 'neutral-300',
     hex: '#ededf2',
   },
   {
-    name: 'Grey 400',
-    code: 'grey-400',
+    name: 'Neutral 400',
+    code: 'neutral-400',
     hex: '#d2d2d8',
   },
   {
-    name: 'Grey 500',
-    code: 'grey-500',
+    name: 'Neutral 500',
+    code: 'neutral-600',
     hex: '#91919c',
   },
   {
-    name: 'Grey 600',
-    code: 'grey-600',
+    name: 'Neutral 600',
+    code: 'neutral-700',
     hex: '#696970',
   },
   {
-    name: 'Grey 700',
-    code: 'grey-700',
+    name: 'Neutral 700',
+    code: 'neutral-800',
     hex: '#4c4c53',
   },
   {
-    name: 'Grey 900',
-    code: 'grey-900',
+    name: 'Neutral 900',
+    code: 'neutral-900',
     hex: '#26262e',
   },
   {
     name: 'Green 100',
     code: 'green-100',
-    hex: '#e4ffe6',
+    hex: '#E6FAF1',
+  },
+  {
+    name: 'Green 200',
+    code: 'green-200',
+    hex: '#D5F6E7',
   },
   {
     name: 'Green 300',
     code: 'green-300',
-    hex: '#c4f5c8',
+    hex: '#AAEACC',
   },
   {
     name: 'Green 500',
     code: 'green-500',
-    hex: '#84de8a',
+    hex: '#85DCB4',
   },
   {
     name: 'Green 700',
     code: 'green-700',
-    hex: '#5b985f',
+    hex: '#599278',
   },
   {
     name: 'Green 900',
     code: 'green-900',
-    hex: '#354a2d',
-  },
-  {
-    name: 'Spearmint 100',
-    code: 'spearmint-100',
-    hex: '#e3fff2',
-  },
-  {
-    name: 'Spearmint 300',
-    code: 'spearmint-300',
-    hex: '#aaeacc',
-  },
-  {
-    name: 'Spearmint 500',
-    code: 'spearmint-500',
-    hex: '#85dcb4',
-  },
-  {
-    name: 'Spearmint 700',
-    code: 'spearmint-700',
-    hex: '#599278',
-  },
-  {
-    name: 'Spearmint 900',
-    code: 'spearmint-900',
-    hex: '#2b4639',
+    hex: '#2B4639',
   },
   {
     name: 'Yellow 100',
     code: 'yellow-100',
-    hex: '#fff8e3',
+    hex: '#FEFAEC',
+  },
+  {
+    name: 'Yellow 200',
+    code: 'yellow-200',
+    hex: '#FCF3D1',
   },
   {
     name: 'Yellow 300',
     code: 'yellow-300',
-    hex: '#fae3a5',
+    hex: '#F6E7AC',
   },
   {
     name: 'Yellow 500',
     code: 'yellow-500',
-    hex: '#f7ce5c',
+    hex: '#F0D26F',
   },
   {
     name: 'Yellow 700',
     code: 'yellow-700',
-    hex: '#cc9e21',
+    hex: '#C5A33E',
   },
   {
     name: 'Yellow 900',
     code: 'yellow-900',
-    hex: '#4a3d10',
+    hex: '#483D18',
+  },
+  {
+    name: 'Orange 50',
+    code: 'orange-50',
+    hex: '#FAF8F5',
+  },
+  {
+    name: 'Orange 100',
+    code: 'orange-100',
+    hex: '#FCF7EF',
+  },
+  {
+    name: 'Orange 200',
+    code: 'orange-200',
+    hex: '#FDF2E2',
+  },
+  {
+    name: 'Orange 300',
+    code: 'orange-300',
+    hex: '#FEECD3',
+  },
+  {
+    name: 'Orange 400',
+    code: 'orange-400',
+    hex: '#FCDAAB',
+  },
+  {
+    name: 'Orange 500',
+    code: 'orange-500',
+    hex: '#FFD08F',
+  },
+  {
+    name: 'Orange 600',
+    code: 'orange-600',
+    hex: '#F2B873',
+  },
+  {
+    name: 'Orange 700',
+    code: 'orange-700',
+    hex: '#C6824E',
+  },
+  {
+    name: 'Orange 800',
+    code: 'orange-800',
+    hex: '#7E4B2F',
+  },
+  {
+    name: 'Orange 900',
+    code: 'orange-900',
+    hex: '#4C2D21',
   },
 ];
 
@@ -308,25 +318,31 @@ export const BoxShadows = () => {
         className="d-flex ai-center jc-center ws2 border br8 bs-xs p-p"
         style={{ height: '136px' }}
       >
-        .bx-xs
+        .bs-xs
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-sm p-p"
         style={{ height: '136px' }}
       >
-        .bx-sm
+        .bs-sm
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-md p-p"
         style={{ height: '136px' }}
       >
-        .bx-md
+        .bs-md
+      </div>
+      <div
+        className="d-flex ai-center jc-center ws2 border br8 bs-lg p-p"
+        style={{ height: '136px' }}
+      >
+        .bs-lg
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-lg p-p"
         style={{ height: '136px' }}
       >
-        .bx-lg
+        .bs-xl
       </div>
     </div>
   );

package/src/lib/scss/public/shadows.mdx

@@ -12,11 +12,12 @@ Dirty swan provides you with a set of box shadow classes and variables.
 ### Class name
 
 | Class    | Value                                              |
-| -------- | -------------------------------------------------- |
-| `.bs-xs` | `box-shadow: 0px 4px 6px rgba(97, 96, 162, 0.01)`  |
-| `.bs-sm` | `box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.1)`  |
-| `.bs-md` | `box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.12)` |
-| `.bs-lg` | `box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.15)` |
+| -------- | ------------------------------------------------------------- |
+| `.bs-xs` | `box-shadow: 0 2px 12px rgba($ds-neutral-900, 0.03)`             |
+| `.bs-sm` | `box-shadow: 0 2px 20px 0 rgba($ds-neutral-900, 0.04)`           |
+| `.bs-md` | `box-shadow: 0 2px 28px rgba($ds-neutral-900, 0.08)`             |
+| `.bs-lg` | `box-shadow: 0 2px 32px rgba($ds-neutral-900, 0.1)`              |
+| `.bs-xl` | `box-shadow: 0 2px 50px rgba($ds-neutral-900, 0.18)`             |
 
 ### Import in code
 
@@ -30,13 +31,13 @@ Dirty swan provides you with a set of box shadow classes and variables.
 ```
 
 ## Table
-
-| Variable | Value                                  |
-| -------- | -------------------------------------- |
-| `$bs-xs` | `0px 4px 6px rgba(97, 96, 162, 0.01)`  |
-| `$bs-sm` | `0px 2px 28px rgba(97, 96, 162, 0.1)`  |
-| `$bs-md` | `0px 2px 28px rgba(97, 96, 162, 0.12)` |
-| `$bs-lg` | `0px 2px 28px rgba(97, 96, 162, 0.15)` |
+| Variable  | Value                                         |
+| --------- | --------------------------------------------- |
+| `$bs-xs`  | `0 2px 12px rgba($ds-neutral-900, 0.03)`         |
+| `$bs-sm`  | `0 2px 20px 0 rgba($ds-neutral-900, 0.04)`       |
+| `$bs-md`  | `0 2px 28px rgba($ds-neutral-900, 0.08)`         |
+| `$bs-lg`  | `0 2px 32px rgba($ds-neutral-900, 0.1)`          |
+| `$bs-xl`  | `0 2px 50px rgba($ds-neutral-900, 0.18)`         |
 
 ## Example