tide-design-system 2.0.49 → 2.0.51

package/.eslintrc.cjs

@@ -8,6 +8,9 @@ module.exports = {
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier',
     'plugin:storybook/recommended',
+    'plugin:import/errors',
+    'plugin:import/typescript',
+    'plugin:import/warnings',
   ],
   ignorePatterns: ['storybook-static/'],
   parserOptions: {
@@ -15,6 +18,19 @@ module.exports = {
   },
   root: true,
   rules: {
+    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    'import/order': [
+      'error',
+      {
+        'alphabetize': {
+          caseInsensitive: false,
+          order: 'asc',
+          orderImportKind: 'asc',
+        },
+        'groups': [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index', 'type'],
+        'newlines-between': 'always',
+      },
+    ],
     'prettier/prettier': [
       'warn',
       {
@@ -28,6 +44,14 @@ module.exports = {
       },
     ],
     'quote-props': ['warn', 'consistent-as-needed'],
+    'sort-imports': [
+      'error',
+      {
+        allowSeparatedGroups: true,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+      },
+    ],
     'vue/attributes-order': [
       'warn',
       {
@@ -87,4 +111,9 @@ module.exports = {
     ],
     'vue/sort-keys': ['warn', 'asc'],
   },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
 };

package/.storybook/preview.ts

@@ -12,7 +12,7 @@ import FoundationsGrid from '../src/stories/FoundationsGrid.stories';
 import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
 import TideCarousel from '../src/stories/TideCarousel.stories';
 
-const cssRoot = import.meta.env.PROD ? '/public' : '/src/assets/css/realm';
+const cssRoot = import.meta.env.PROD ? '/assets/css/realm' : '/src/assets/css/realm';
 
 const replaceRealmStyles = (realm: string) => {
     document.getElementById('realmStyles')?.remove();
@@ -47,7 +47,7 @@ const preview: Preview = {
       };
     },
     (story, context) => {
-      const [args, updateArgs] = useArgs();
+      const [_args, updateArgs] = useArgs();
 
       return story({ ...context, updateArgs });
     },
@@ -77,7 +77,7 @@ const preview: Preview = {
           },
           {
             title: 'Realm: Equipment',
-            value: 'equip',
+            value: 'equipment',
           },
           {
             title: 'Realm: PWC',

package/dist/css/realm/aero.css

@@ -1,11 +1,12 @@
 /* Aero Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-color1: #4e9ac8;
-  --tide-color2: #006C97;
-  --tide-color3: #83CBFB;
+  --tide-color1:     #4e9ac8;
+  --tide-color2:     #006C97;
+  --tide-color3:     #83CBFB;
+  --tide-atmosphere: #E3E8F1;
 
-  --tide-bg-gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
     var(--tide-color3) 50%,
     var(--tide-color2) 150%
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent:         var(--tide-atmosphere);
   --tide-surface-accent-variant: var(--tide-color3);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/dist/css/realm/atv.css

@@ -1,12 +1,13 @@
 /* ATV Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-charcoal: #33383B;
-    --tide-maroon:   #9B2702;
-    --tide-orange:   #C7521A;
-    --tide-peach:    #EFBA88;
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-charcoal: #33383B;
+  --tide-maroon:   #9B2702;
+  --tide-orange:   #C7521A;
+  --tide-peach:    #EFBA88;
+  --tide-sand:     #F8EADD;
 
-    --tide-floating: rgba(0, 0, 0, 0);
+  --tide-floating: rgba(0, 0, 0, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
   --tide-primary:    var(--tide-orange);
@@ -18,7 +19,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-charcoal);
-  --tide-surface-accent:         var(--tide-peach);
+  --tide-surface-accent:         var(--tide-sand);
   --tide-surface-accent-variant: var(--tide-maroon);
   --tide-surface-floating:       var(--tide-floating);
 

package/dist/css/realm/boatmart.css

@@ -5,6 +5,7 @@
   --tide-navy-dark: #143353;
   --tide-mint:      #46CFD1;
   --tide-sand:      #FFCF86;
+  --tide-mist:      #DBEDFC;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -18,7 +19,7 @@
   --tide-surface:                var(--tide-gray-100);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-navy);
-  --tide-surface-accent:         var(--tide-sand);
+  --tide-surface-accent:         var(--tide-mist);
   --tide-surface-accent-variant: var(--tide-mint);
   --tide-surface-floating:       var(--tide-floating);
 

package/dist/css/realm/cycle.css

@@ -1,15 +1,10 @@
 /* Cycle Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-pure-black:  #000000;
-  --tide-red: #C50000;
-  --tide-steel-blue:   #C9DDE5;
-
-  --tide-bg-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-steel-blue) 50%,
-    var(--tide-red) 150%
-  );
+  --tide-pure-black: #000000;
+  --tide-red:        #C50000;
+  --tide-steel-blue: #C9DDE5;
+  --tide-light-blue: #DFECF2;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,11 +18,30 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-pure-black);
-  --tide-surface-accent:         var(--tide-red);
+  --tide-surface-accent:         var(--tide-light-blue);
   --tide-surface-accent-variant: var(--tide-steel-blue);
-  --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);
 
+  --tide-surface-gradient:
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-surface-accent-variant) 100%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
+    ),
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      rgba(228, 228, 229, 0.72) 0%,
+      rgba(228, 228, 229, 0.00) 100%
+    );
+
   --tide-on-surface:         var(--tide-black);
   --tide-on-surface-variant: var(--tide-gray-800);
   --tide-on-surface-brand:   var(--tide-pure-black);

package/dist/css/realm/equipment.css

@@ -1,15 +1,16 @@
 /* Equipment Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-evergreen: #468200;
-    --tide-steel:     #494949;
-    --tide-yellow:    #FFCE34;
-
-    --tide-bg-gradient: linear-gradient(
-      to bottom right,
-      var(--tide-evergreen) 50%,
-      var(--tide-yellow) 150%
-    );
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-evergreen: #468200;
+  --tide-steel:     #494949;
+  --tide-yellow:    #FFCE34;
+  --tide-moss:      #EEF6D7;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-evergreen) 50%,
+    var(--tide-yellow) 150%
+  );
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-steel);
-  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent:         var(--tide-moss);
   --tide-surface-accent-variant: var(--tide-evergreen);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/dist/css/realm/pwc.css

@@ -4,6 +4,7 @@
   --tide-color1: #0B72B8;
   --tide-color2: #085487;
   --tide-color3: #59A0EB;
+  --tide-foam:   #E0EBF5;
 
   --tide-gradient: linear-gradient(
     to bottom right,
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-gray-100);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color3);
+  --tide-surface-accent:         var(--tide-foam);
   --tide-surface-accent-variant: var(--tide-color2);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/dist/css/realm/rv.css

@@ -16,10 +16,10 @@
   --tide-on-secondary: var(--tide-gray-100);
 
   --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-green);
-  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent:         var(--tide-pistachio);
   --tide-surface-accent-variant: var(--tide-pistachio);
-  --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-floating:       var(--tide-floating);
 
   --tide-surface-gradient:
@@ -32,8 +32,8 @@
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-yellow) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-yellow) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(

package/dist/css/realm/snow.css

@@ -1,15 +1,16 @@
 /* Snowmobile Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-color1: #193778;
-    --tide-color2: #10234C;
-    --tide-color3: #4F60A7;
-
-    --tide-bg-gradient: linear-gradient(
-      to bottom right,
-      var(--tide-color3) 50%,
-      var(--tide-color2) 150%
-    );
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-color1: #193778;
+  --tide-color2: #10234C;
+  --tide-color3: #4F60A7;
+  --tide-frost:  #E3E8F2;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-color3) 50%,
+    var(--tide-color2) 150%
+  );
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent:         var(--tide-frost);
   --tide-surface-accent-variant: var(--tide-color3);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/dist/css/realm/truck.css

@@ -1,11 +1,12 @@
 /* Commercial Truck Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-blue:  #005F9E;
-  --tide-midnight-blue:   #172C4B;
-  --tide-teal: #97D9E3;
+  --tide-blue:          #005F9E;
+  --tide-midnight-blue: #172C4B;
+  --tide-teal:          #97D9E3;
+  --tide-cloud:         #DEECF6;
 
-  --tide-bg-gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
     var(--tide-midnight-blue) 50%,
     var(--tide-teal) 150%
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-blue);
-  --tide-surface-accent:         var(--tide-teal);
+  --tide-surface-accent:         var(--tide-cloud);
   --tide-surface-accent-variant: var(--tide-midnight-blue);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);