tide-design-system 2.0.33 → 2.0.35

package/src/types/Styles.ts

@@ -21,6 +21,7 @@ export const CSS = {
     },
     Y: {
       MIDDLE: 'tide-align-middle',
+      INITIAL: 'tide-align-initial',
     },
   },
   AXIS1: {
@@ -37,6 +38,7 @@ export const CSS = {
     START: 'tide-axis2-start',
   },
   BG: {
+    INITIAL: 'tide-bg-initial',
     BLUR: 'tide-bg-blur',
     ERROR: 'tide-bg-error',
     INFO: 'tide-bg-info',
@@ -60,6 +62,7 @@ export const CSS = {
   },
   BORDER: {
     COLOR: {
+      INITIAL: 'tide-border-color-initial',
       DEFAULT: 'tide-border',
       FLOATING: 'tide-border-floating',
       HIGH: 'tide-border-high',
@@ -67,28 +70,34 @@ export const CSS = {
       PRIMARY: 'tide-border-primary',
     },
     RADIUS: {
+      ZERO: 'tide-radius-0',
       QUARTER: 'tide-radius-1/4',
       HALF: 'tide-radius-1/2',
       ONE: 'tide-radius-1',
       FULL: 'tide-radius-full',
     },
     BOTTOM: {
+      ZERO: 'tide-border-bottom-0',
       ONE: 'tide-border-bottom-1',
       TWO: 'tide-border-bottom-2',
     },
     FULL: {
+      ZERO: 'tide-border-0',
       ONE: 'tide-border-1',
       TWO: 'tide-border-2',
     },
     LEFT: {
+      ZERO: 'tide-border-left-0',
       ONE: 'tide-border-left-1',
       TWO: 'tide-border-left-2',
     },
     RIGHT: {
+      ZERO: 'tide-border-right-0',
       ONE: 'tide-border-right-1',
       TWO: 'tide-border-right-2',
     },
     TOP: {
+      ZERO: 'tide-border-top-0',
       ONE: 'tide-border-top-1',
       TWO: 'tide-border-top-2',
     },
@@ -98,9 +107,11 @@ export const CSS = {
     CONTENT_BOX: 'tide-box-content',
   },
   BREAK_WORD: {
+    OFF: 'tide-break-initial',
     ON: 'tide-break-word',
   },
   COLUMNS: {
+    INITIAL: 'tide-columns-initial',
     ONE: 'tide-columns-1',
     TWO: 'tide-columns-2',
     THREE: 'tide-columns-3',
@@ -124,6 +135,7 @@ export const CSS = {
   },
   FLEX: {
     BASIS: {
+      AUTO: 'tide-flex-basis-auto',
       ZERO: 'tide-flex-basis-0',
     },
     DIRECTION: {
@@ -154,6 +166,26 @@ export const CSS = {
         VARIANT_INVERSE: 'tide-font-on-surface-variant-inverse',
       },
     },
+    ROLE: {
+      DISPLAY_1: 'tide-typography-display-1',
+      HEADLINE_1: 'tide-typography-headline-1',
+      HEADLINE_2: 'tide-typography-headline-2',
+      HEADLINE_3: 'tide-typography-headline-3',
+      TITLE_1: 'tide-typography-title-1',
+      TITLE_2: 'tide-typography-title-2',
+      BODY_1: 'tide-typography-body-1',
+      BODY_2: 'tide-typography-body-2',
+      LABEL_1: 'tide-typography-label-1',
+      LABEL_1_SEMIBOLD: 'tide-typography-label-1-semibold',
+      LABEL_2: 'tide-typography-label-2',
+      LABEL_2_SEMIBOLD: 'tide-typography-label-2-semibold',
+      LABEL_3: 'tide-typography-label-3',
+      LINK_1: 'tide-typography-link-1',
+      LINK_2: 'tide-typography-link-2',
+      LINK_3: 'tide-typography-link-3',
+      BUTTON_1: 'tide-typography-button-1',
+      BUTTON_2: 'tide-typography-button-2',
+    },
     SIZE: {
       TWELVE: 'tide-font-12',
       FOURTEEN: 'tide-font-14',
@@ -170,6 +202,7 @@ export const CSS = {
     },
   },
   GAP: {
+    ZERO: 'tide-gap-0',
     QUARTER: 'tide-gap-1/4',
     HALF: 'tide-gap-1/2',
     ONE: 'tide-gap-1',
@@ -193,6 +226,7 @@ export const CSS = {
       THIRTEEN: 'tide-end-13',
     },
     FLUID: 'tide-fluid',
+    ITEM: 'tide-grid-item',
     LAYOUT: 'tide-grid-layout',
     START: {
       ZERO: 'tide-start-0',
@@ -212,7 +246,8 @@ export const CSS = {
     XL: 'tide-grid-xl',
   },
   HEIGHT: {
-    ZERO: 'tide-width-0',
+    AUTO: 'tide-height-auto',
+    ZERO: 'tide-height-0',
     FULL: 'tide-height-full',
   },
   ISOLATION: {
@@ -223,6 +258,7 @@ export const CSS = {
   },
   MARGIN: {
     BOTTOM: {
+      ZERO: 'tide-margin-bottom-0',
       QUARTER: 'tide-margin-bottom-1/4',
       HALF: 'tide-margin-bottom-1/2',
       ONE: 'tide-margin-bottom-1',
@@ -230,6 +266,7 @@ export const CSS = {
       FOUR: 'tide-margin-bottom-4',
     },
     FULL: {
+      ZERO: 'tide-margin-0',
       QUARTER: 'tide-margin-1/4',
       HALF: 'tide-margin-1/2',
       ONE: 'tide-margin-1',
@@ -238,6 +275,7 @@ export const CSS = {
     },
     LEFT: {
       AUTO: 'tide-margin-left-auto',
+      ZERO: 'tide-margin-left-0',
       QUARTER: 'tide-margin-left-1/4',
       HALF: 'tide-margin-left-1/2',
       ONE: 'tide-margin-left-1',
@@ -246,6 +284,7 @@ export const CSS = {
     },
     RIGHT: {
       AUTO: 'tide-margin-right-auto',
+      ZERO: 'tide-margin-right-0',
       QUARTER: 'tide-margin-right-1/4',
       HALF: 'tide-margin-right-1/2',
       ONE: 'tide-margin-right-1',
@@ -253,6 +292,7 @@ export const CSS = {
       FOUR: 'tide-margin-right-4',
     },
     TOP: {
+      ZERO: 'tide-margin-top-0',
       QUARTER: 'tide-margin-top-1/4',
       HALF: 'tide-margin-top-1/2',
       ONE: 'tide-margin-top-1',
@@ -261,6 +301,7 @@ export const CSS = {
     },
     X: {
       AUTO: 'tide-margin-x-auto',
+      ZERO: 'tide-margin-x-0',
       QUARTER: 'tide-margin-x-1/4',
       HALF: 'tide-margin-x-1/2',
       ONE: 'tide-margin-x-1',
@@ -268,6 +309,7 @@ export const CSS = {
       FOUR: 'tide-margin-x-4',
     },
     Y: {
+      ZERO: 'tide-margin-y-0',
       QUARTER: 'tide-margin-y-1/4',
       HALF: 'tide-margin-y-1/2',
       ONE: 'tide-margin-y-1',
@@ -302,6 +344,7 @@ export const CSS = {
   },
   PADDING: {
     BOTTOM: {
+      ZERO: 'tide-padding-bottom-0',
       QUARTER: 'tide-padding-bottom-1/4',
       HALF: 'tide-padding-bottom-1/2',
       ONE: 'tide-padding-bottom-1',
@@ -309,6 +352,7 @@ export const CSS = {
       FOUR: 'tide-padding-bottom-4',
     },
     FULL: {
+      ZERO: 'tide-padding-0',
       QUARTER: 'tide-padding-1/4',
       HALF: 'tide-padding-1/2',
       ONE: 'tide-padding-1',
@@ -316,6 +360,7 @@ export const CSS = {
       FOUR: 'tide-padding-4',
     },
     LEFT: {
+      ZERO: 'tide-padding-left-0',
       QUARTER: 'tide-padding-left-1/4',
       HALF: 'tide-padding-left-1/2',
       ONE: 'tide-padding-left-1',
@@ -323,6 +368,7 @@ export const CSS = {
       FOUR: 'tide-padding-left-4',
     },
     RIGHT: {
+      ZERO: 'tide-padding-right-0',
       QUARTER: 'tide-padding-right-1/4',
       HALF: 'tide-padding-right-1/2',
       ONE: 'tide-padding-right-1',
@@ -330,6 +376,7 @@ export const CSS = {
       FOUR: 'tide-padding-right-4',
     },
     TOP: {
+      ZERO: 'tide-padding-top-0',
       QUARTER: 'tide-padding-top-1/4',
       HALF: 'tide-padding-top-1/2',
       ONE: 'tide-padding-top-1',
@@ -337,6 +384,7 @@ export const CSS = {
       FOUR: 'tide-padding-top-4',
     },
     X: {
+      ZERO: 'tide-padding-x-0',
       QUARTER: 'tide-padding-x-1/4',
       HALF: 'tide-padding-x-1/2',
       ONE: 'tide-padding-x-1',
@@ -344,6 +392,7 @@ export const CSS = {
       FOUR: 'tide-padding-x-4',
     },
     Y: {
+      ZERO: 'tide-padding-y-0',
       QUARTER: 'tide-padding-y-1/4',
       HALF: 'tide-padding-y-1/2',
       ONE: 'tide-padding-y-1',
@@ -359,7 +408,8 @@ export const CSS = {
     ABSOLUTE: 'tide-position-absolute',
     FIXED: 'tide-position-fixed',
     RELATIVE: 'tide-position-relative',
-    STICKY: 'tide-sticky',
+    STATIC: 'tide-position-static',
+    STICKY: 'tide-position-sticky',
   },
   POSITIONING: {
     BOTTOM: 'tide-bottom-0',
@@ -371,11 +421,12 @@ export const CSS = {
     OFF: 'tide-scrollbar-none',
   },
   SHADOW: {
+    INITIAL: 'tide-shadow-initial',
     BOTTOM: 'tide-shadow-bottom',
     TOP: 'tide-shadow-top',
   },
   SNAP: {
-    ON: 'tide-snap',
+    ON: 'tide-scroll-snap',
   },
   SNAP_ALIGN: {
     START: 'tide-snap-start',
@@ -398,11 +449,13 @@ export const CSS = {
     OFF: 'tide-whitespace-nowrap',
   },
   WIDTH: {
+    AUTO: 'tide-width-auto',
     ZERO: 'tide-width-0',
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
   },
   Z_INDEX: {
+    INITIAL: 'tide-z-index-initial',
     ONE: 'tide-z-index-1',
   },
 } as const;
@@ -453,38 +506,45 @@ export const cssSortOrder = [
   CSS.POSITIONING.LEFT,
   CSS.BOX_SIZING.BORDER_BOX,
   CSS.BOX_SIZING.CONTENT_BOX,
+  CSS.MARGIN.FULL.ZERO,
   CSS.MARGIN.FULL.ONE,
   CSS.MARGIN.FULL.HALF,
   CSS.MARGIN.FULL.QUARTER,
   CSS.MARGIN.FULL.TWO,
   CSS.MARGIN.FULL.FOUR,
+  CSS.MARGIN.Y.ZERO,
   CSS.MARGIN.Y.ONE,
   CSS.MARGIN.Y.HALF,
   CSS.MARGIN.Y.QUARTER,
   CSS.MARGIN.Y.TWO,
   CSS.MARGIN.Y.FOUR,
+  CSS.MARGIN.TOP.ZERO,
   CSS.MARGIN.TOP.ONE,
   CSS.MARGIN.TOP.HALF,
   CSS.MARGIN.TOP.QUARTER,
   CSS.MARGIN.TOP.TWO,
   CSS.MARGIN.TOP.FOUR,
+  CSS.MARGIN.X.ZERO,
   CSS.MARGIN.X.ONE,
   CSS.MARGIN.X.HALF,
   CSS.MARGIN.X.QUARTER,
   CSS.MARGIN.X.TWO,
   CSS.MARGIN.X.FOUR,
   CSS.MARGIN.X.AUTO,
+  CSS.MARGIN.RIGHT.ZERO,
   CSS.MARGIN.RIGHT.ONE,
   CSS.MARGIN.RIGHT.HALF,
   CSS.MARGIN.RIGHT.QUARTER,
   CSS.MARGIN.RIGHT.TWO,
   CSS.MARGIN.RIGHT.FOUR,
   CSS.MARGIN.RIGHT.AUTO,
+  CSS.MARGIN.BOTTOM.ZERO,
   CSS.MARGIN.BOTTOM.ONE,
   CSS.MARGIN.BOTTOM.HALF,
   CSS.MARGIN.BOTTOM.QUARTER,
   CSS.MARGIN.BOTTOM.TWO,
   CSS.MARGIN.BOTTOM.FOUR,
+  CSS.MARGIN.LEFT.ZERO,
   CSS.MARGIN.LEFT.ONE,
   CSS.MARGIN.LEFT.HALF,
   CSS.MARGIN.LEFT.QUARTER,
@@ -505,36 +565,43 @@ export const cssSortOrder = [
   CSS.BORDER.RADIUS.HALF,
   CSS.BORDER.RADIUS.QUARTER,
   CSS.BORDER.RADIUS.FULL,
+  CSS.PADDING.FULL.ZERO,
   CSS.PADDING.FULL.ONE,
   CSS.PADDING.FULL.HALF,
   CSS.PADDING.FULL.QUARTER,
   CSS.PADDING.FULL.TWO,
   CSS.PADDING.FULL.FOUR,
+  CSS.PADDING.Y.ZERO,
   CSS.PADDING.Y.ONE,
   CSS.PADDING.Y.HALF,
   CSS.PADDING.Y.QUARTER,
   CSS.PADDING.Y.TWO,
   CSS.PADDING.Y.FOUR,
+  CSS.PADDING.TOP.ZERO,
   CSS.PADDING.TOP.ONE,
   CSS.PADDING.TOP.HALF,
   CSS.PADDING.TOP.QUARTER,
   CSS.PADDING.TOP.TWO,
   CSS.PADDING.TOP.FOUR,
+  CSS.PADDING.X.ZERO,
   CSS.PADDING.X.ONE,
   CSS.PADDING.X.HALF,
   CSS.PADDING.X.QUARTER,
   CSS.PADDING.X.TWO,
   CSS.PADDING.X.FOUR,
+  CSS.PADDING.RIGHT.ZERO,
   CSS.PADDING.RIGHT.ONE,
   CSS.PADDING.RIGHT.HALF,
   CSS.PADDING.RIGHT.QUARTER,
   CSS.PADDING.RIGHT.TWO,
   CSS.PADDING.RIGHT.FOUR,
+  CSS.PADDING.BOTTOM.ZERO,
   CSS.PADDING.BOTTOM.ONE,
   CSS.PADDING.BOTTOM.HALF,
   CSS.PADDING.BOTTOM.QUARTER,
   CSS.PADDING.BOTTOM.TWO,
   CSS.PADDING.BOTTOM.FOUR,
+  CSS.PADDING.LEFT.ZERO,
   CSS.PADDING.LEFT.ONE,
   CSS.PADDING.LEFT.HALF,
   CSS.PADDING.LEFT.QUARTER,

package/src/utilities/storybook.ts

@@ -1,6 +1,6 @@
 import type { ArgTypes } from '@storybook/vue3';
 
-import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { BOOLEAN, BOOLEAN_UNREQUIRED } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
@@ -20,6 +20,16 @@ import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 export const lineBreak = '\r';
 export const tab = '  ';
 
+export const argTypeBoolean = {
+  control: 'select',
+  description: 'Determines whether CSS utility is present',
+  options: BOOLEAN,
+  table: {
+    defaultValue: { summary: 'False' },
+    type: { summary: 'boolean' },
+  },
+};
+
 export const argTypeBooleanUnrequired = {
   control: 'select',
   description: 'True, False, or undefined<br />(for demonstration purposes)',