tide-design-system 2.2.15 → 2.2.16

package/.storybook/preview.ts

@@ -2,6 +2,8 @@ import { useArgs } from '@storybook/preview-api';
 
 import type { Preview } from '@storybook/vue3';
 
+import { setup } from '@storybook/vue3';
+
 import '@/assets/css/main.css';
 import '@/assets/css/reset.css';
 import '@/assets/css/storybook.css';
@@ -11,6 +13,7 @@ import DemoCssUtilitiesByTextInput from '../src/stories/DemoCssUtilitiesByTextIn
 import FoundationsGrid from '../src/stories/FoundationsGrid.stories';
 import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
 import { isProduction } from '../src/utilities/storybook';
+import TideAlert from '../src/components/TideAlert.vue';
 
 const cssRoot = isProduction ? '/assets/css/realm' : '/src/assets/css/realm';
 
@@ -42,7 +45,7 @@ const preview: Preview = {
 
       return {
         components: { story },
-        template: `<div class="${decoratorCss} tide-padding-bottom-4 ${context.globals.surfaceBg} ${context.globals.surfaceFg}"><story /></div>`
+        template: `<div class="${decoratorCss} tide-padding-bottom-4 ${context.globals.surfaceBg} ${context.globals.surfaceFg}"><story /></div><div class="tide-position-absolute tide-display-flex tide-axis1-end tide-right-0 tide-top-0 tide-width-full tide-pointer-events-none"><TideAlert :class="['tide-margin-1 tide-width-full']" id="do-something-alert" is-dismissible="false" is-toast="true" heading="Did something." style="opacity: 0; transition: opacity ease-in-out 300ms;" /></div>`
       };
     },
     (story, context) => {
@@ -246,4 +249,8 @@ const preview: Preview = {
   },
 };
 
+setup((app) => {
+  app.component('TideAlert', TideAlert);
+});
+
 export default preview;

package/dist/css/reset.css

@@ -78,7 +78,7 @@ button:disabled {
 
 /* cross-browser normalization */
 input::placeholder {
-  color: var(--tide-gray); /* TODO: replace with an accessible light text color from design system */
+  color: var(--tide-gray-700);
   opacity: 1;
 }
 

package/dist/css/utilities-lg.css

@@ -411,9 +411,13 @@
 	.lg-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.lg-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.lg-tide-text-center {text-align: center;}
-	.lg-tide-text-left   {text-align: left;}
-	.lg-tide-text-right  {text-align: right;}
+	.lg-tide-strikethrough      {text-decoration: line-through;}
+	.lg-tide-strikethrough-none {text-decoration: none;}
+
+	.lg-tide-text-center  {text-align: center;}
+	.lg-tide-text-justify {text-align: justify;}
+	.lg-tide-text-left    {text-align: left;}
+	.lg-tide-text-right   {text-align: right;}
 
 	.lg-tide-text-transform-lower {text-transform: lowercase;}
 	.lg-tide-text-transform-none  {text-transform: none;}

package/dist/css/utilities-md.css

@@ -411,9 +411,13 @@
 	.md-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.md-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.md-tide-text-center {text-align: center;}
-	.md-tide-text-left   {text-align: left;}
-	.md-tide-text-right  {text-align: right;}
+	.md-tide-strikethrough      {text-decoration: line-through;}
+	.md-tide-strikethrough-none {text-decoration: none;}
+
+	.md-tide-text-center  {text-align: center;}
+	.md-tide-text-justify {text-align: justify;}
+	.md-tide-text-left    {text-align: left;}
+	.md-tide-text-right   {text-align: right;}
 
 	.md-tide-text-transform-lower {text-transform: lowercase;}
 	.md-tide-text-transform-none  {text-transform: none;}

package/dist/css/utilities-sm.css

@@ -411,9 +411,13 @@
 	.sm-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.sm-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.sm-tide-text-center {text-align: center;}
-	.sm-tide-text-left   {text-align: left;}
-	.sm-tide-text-right  {text-align: right;}
+	.sm-tide-strikethrough      {text-decoration: line-through;}
+	.sm-tide-strikethrough-none {text-decoration: none;}
+
+	.sm-tide-text-center  {text-align: center;}
+	.sm-tide-text-justify {text-align: justify;}
+	.sm-tide-text-left    {text-align: left;}
+	.sm-tide-text-right   {text-align: right;}
 
 	.sm-tide-text-transform-lower {text-transform: lowercase;}
 	.sm-tide-text-transform-none  {text-transform: none;}

package/dist/css/utilities-xl.css

@@ -411,9 +411,13 @@
 	.xl-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.xl-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.xl-tide-text-center {text-align: center;}
-	.xl-tide-text-left   {text-align: left;}
-	.xl-tide-text-right  {text-align: right;}
+	.xl-tide-strikethrough      {text-decoration: line-through;}
+	.xl-tide-strikethrough-none {text-decoration: none;}
+
+	.xl-tide-text-center  {text-align: center;}
+	.xl-tide-text-justify {text-align: justify;}
+	.xl-tide-text-left    {text-align: left;}
+	.xl-tide-text-right   {text-align: right;}
 
 	.xl-tide-text-transform-lower {text-transform: lowercase;}
 	.xl-tide-text-transform-none  {text-transform: none;}

package/dist/css/utilities.css

@@ -410,9 +410,13 @@
 .tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 .tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-.tide-text-center {text-align: center;}
-.tide-text-left   {text-align: left;}
-.tide-text-right  {text-align: right;}
+.tide-strikethrough      {text-decoration: line-through;}
+.tide-strikethrough-none {text-decoration: none;}
+
+.tide-text-center  {text-align: center;}
+.tide-text-justify {text-align: justify;}
+.tide-text-left    {text-align: left;}
+.tide-text-right   {text-align: right;}
 
 .tide-text-transform-lower {text-transform: lowercase;}
 .tide-text-transform-none  {text-transform: none;}

package/dist/css/variables.css

@@ -53,7 +53,7 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Blur */
-  --tide-bg-blur: var(--tide-bg-blur);
+  --tide-bg-blur: 8px;
 
   /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;