tide-design-system 2.0.24 → 2.0.26

package/package.json

@@ -28,6 +28,7 @@
     "storybook": "^8.0.9",
     "typescript": "^5.0.0",
     "vite": "^4.0.0",
+    "vite-plugin-dts": "^4.2.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.31.0",
     "vue": "^3.2.45",
@@ -51,8 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.24",
-  "dependencies": {
-    "vite-plugin-dts": "^4.2.3"
-  }
+  "version": "2.0.26"
 }

package/src/assets/css/realm/atv.css

@@ -6,12 +6,6 @@
     --tide-orange:   #C7521A;
     --tide-peach:    #EFBA88;
 
-    --tide-bg-gradient: linear-gradient(
-      to bottom right,
-      var(--tide-charcoal) 50%,
-      var(--tide-peach) 150%
-    );
-
     --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. */
@@ -26,9 +20,28 @@
   --tide-surface-brand:          var(--tide-charcoal);
   --tide-surface-accent:         var(--tide-peach);
   --tide-surface-accent-variant: var(--tide-maroon);
-  --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) 72%, 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%,
+      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
+      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+    );
+
   --tide-on-surface:         var(--tide-black);
   --tide-on-surface-variant: var(--tide-gray-800);
   --tide-on-surface-brand:   var(--tide-orange);

package/src/assets/css/realm/boatmart.css

@@ -1,15 +1,10 @@
 /* Boatmart Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-navy: #1D4977;
-  --tide-mint:  #46CFD1;
-  --tide-sand:  #FFCF86;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-mint) 50%,
-    var(--tide-sand) 150%
-  );
+  --tide-navy:      #1D4977;
+  --tide-navy-dark: #143353;
+  --tide-mint:      #46CFD1;
+  --tide-sand:      #FFCF86;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -25,9 +20,28 @@
   --tide-surface-brand:          var(--tide-navy);
   --tide-surface-accent:         var(--tide-sand);
   --tide-surface-accent-variant: var(--tide-mint);
-  --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) 72%, 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%,
+      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
+      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+    );
+
   --tide-on-surface:         var(--tide-gray-900);
   --tide-on-surface-variant: var(--tide-gray-700);
   --tide-on-surface-brand:   var(--tide-navy);

package/src/assets/css/realm/rv.css

@@ -1,9 +1,10 @@
 /* RV Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-green:  #006836;
-  --tide-teal:   #8ADCB9;
-  --tide-yellow: #F2B203;
+  --tide-green:      #006836;
+  --tide-green-dark: #004926;
+  --tide-pistachio:  #BFD9CD;
+  --tide-yellow:     #F2B203;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -17,24 +18,29 @@
   --tide-surface:                var(--tide-gray-100);
   --tide-surface-brand:          var(--tide-green);
   --tide-surface-accent:         var(--tide-yellow);
-  --tide-surface-accent-variant: var(--tide-teal);
+  --tide-surface-accent-variant: var(--tide-pistachio);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-floating:       var(--tide-floating);
+
   --tide-surface-gradient:
-      radial-gradient(
-        60.04% 38.7% at -2.12% 103.9%,
-        color-mix(in srgb, var(--tide-surface-accent-variant) 72%, transparent) 0%,
-        color-mix(in srgb, var(--tide-surface-accent-variant)  0%, transparent) 100%
-      ),
-      radial-gradient(
-        154.63% 148.88% at 19.69% -3.53%, #B8DACC 28.37%,
-        color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
-      ),
-      radial-gradient(
-        50% 46.35% 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%
-      );
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-surface-accent-variant) 72%, 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%,
+      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
+      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+    );
 
   --tide-on-surface:         var(--tide-gray-900);
   --tide-on-surface-variant: var(--tide-gray-700);

package/src/assets/css/utilities.css

@@ -317,6 +317,8 @@
 .tide-y-auto   {overflow-y: auto;}
 .tide-y-hidden {overflow-y: hidden;}
 
+.tide-z-index-1 {z-index: 1;}
+
 /* Small breakpoint */
 @media (min-width: 768px) {
   /* Position */
@@ -636,6 +638,8 @@
 
   .sm-tide-y-auto   {overflow-y: auto;}
   .sm-tide-y-hidden {overflow-y: hidden;}
+
+  .sm-tide-z-index-1 {z-index: 1;}
 }
 
 /* Medium breakpoint */
@@ -957,6 +961,8 @@
 
   .md-tide-y-auto   {overflow-y: auto;}
   .md-tide-y-hidden {overflow-y: hidden;}
+
+  .md-tide-z-index-1 {z-index: 1;}
 }
 
 /* Large breakpoint */
@@ -1278,6 +1284,8 @@
 
   .lg-tide-y-auto   {overflow-y: auto;}
   .lg-tide-y-hidden {overflow-y: hidden;}
+
+  .lg-tide-z-index-1 {z-index: 1;}
 }
 
 /* Large breakpoint */
@@ -1599,4 +1607,6 @@
 
   .xl-tide-y-auto   {overflow-y: auto;}
   .xl-tide-y-hidden {overflow-y: hidden;}
+
+  .xl-tide-z-index-1 {z-index: 1;}
 }

package/src/components/TideCarousel.vue

@@ -109,10 +109,9 @@
     scrollToSlide(previousSlide);
   };
 
-  window.addEventListener('resize', measureDom);
-
   onMounted(() => {
     measureDom();
+    window.addEventListener('resize', measureDom);
   });
 
   onUnmounted(() => {

package/src/components/TideIndicator.vue

@@ -13,26 +13,25 @@
 <template>
   <div
     :class="[
-      props.label ? 'tide-indicator-label' : 'tide-indicator',
-      'border-white',
+      'tide-indicator',
+      props.label && 'tide-indicator-background',
       CSS.BG.SURFACE.ACCENT,
-      CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.FULL,
       props.label
-        ? [CSS.POSITION.RELATIVE, CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]
+        ? [
+            CSS.POSITION.RELATIVE,
+            CSS.FONT.SIZE.TWELVE,
+            CSS.FONT.WEIGHT.SEVEN_HUNDRED,
+            CSS.FONT.COLOR.SURFACE.DEFAULT,
+            CSS.DISPLAY.FLEX,
+            CSS.AXIS1.CENTER,
+            CSS.AXIS2.CENTER,
+          ]
         : [],
     ]"
   >
     <div
-      :class="[
-        CSS.POSITION.ABSOLUTE,
-        CSS.POSITIONING.TOP,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-      ]"
+      :class="['tide-indicator-label']"
       v-if="props.label"
     >
       {{ props.label }}
@@ -46,12 +45,13 @@
     height: 0.5rem;
   }
 
-  .tide-indicator-label {
-    width: 1rem;
-    height: 1rem;
+  .tide-indicator-background {
+    width: 1.125rem;
+    height: 1.125rem;
   }
 
-  .border-white {
-    border-color: white;
+  .tide-indicator-label {
+    /* Use bottom-weighting to offset the mathematical center to the optical center. */
+    margin-top: -1px;
   }
 </style>

package/src/types/Styles.ts

@@ -402,7 +402,10 @@ export const CSS = {
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
   },
-};
+  Z_INDEX: {
+    ONE: 'tide-z-index-1',
+  },
+} as const;
 
 export type CssUtility = (typeof CSS)[keyof typeof CSS];
 
@@ -546,6 +549,7 @@ export const cssSortOrder = [
   CSS.BREAK_WORD,
   CSS.CURSOR.NOT_ALLOWED,
   CSS.CURSOR.POINTER,
+  CSS.CURSOR.TEXT,
   CSS.FONT.SIZE.TWELVE,
   CSS.FONT.SIZE.FOURTEEN,
   CSS.FONT.SIZE.SIXTEEN,
@@ -574,9 +578,9 @@ export const cssSortOrder = [
   CSS.TEXT_TRANSFORM.LOWER,
   CSS.TEXT_TRANSFORM.NONE,
   CSS.TEXT_TRANSFORM.UPPER,
-  CSS.UNDERLINE,
   CSS.UNDERLINE.HOVER,
   CSS.UNDERLINE.OFF,
+  CSS.UNDERLINE.ON,
   CSS.VISIBILITY.ON,
   CSS.VISIBILITY.OFF,
   CSS.WHITESPACE_WRAP.OFF,
@@ -587,4 +591,5 @@ export const cssSortOrder = [
   CSS.OVERFLOW.X.SCROLL,
   CSS.OVERFLOW.Y.AUTO,
   CSS.OVERFLOW.Y.HIDDEN,
+  CSS.Z_INDEX.ONE,
 ] as const;