tide-design-system 2.0.23 → 2.0.24

package/dist/types/Storybook.ts

@@ -1,219 +0,0 @@
-/* eslint vue/sort-keys: 0 */
-// ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
-
-import { CSS } from '@/types/Styles';
-
-export const NoneAsEmpty = { None: '' };
-export const NoneAsUndefined = { None: undefined };
-
-// These objects are intended exclusively for use in demonstrating the Storybook UI.
-export const BOOLEAN_UNREQUIRED = {
-  None: undefined,
-  True: true,
-  False: false,
-};
-
-export const BADGE_TRUSTED = {
-  YEARS_5: '5',
-  YEARS_10: '10',
-  YEARS_15: '15',
-};
-
-export const BORDER_RADIUS = {
-  '0.25 REM': CSS.BORDER.RADIUS.QUARTER,
-  '0.5 REM': CSS.BORDER.RADIUS.HALF,
-  '1 REM': CSS.BORDER.RADIUS.ONE,
-  'Full': CSS.BORDER.RADIUS.FULL,
-};
-
-export const BORDER_SIDE = {
-  Full: 'tide-border',
-  Top: 'tide-border-top',
-  Right: 'tide-border-right',
-  Bottom: 'tide-border-bottom',
-  Left: 'tide-border-left',
-};
-
-export const BORDER_WIDTH = {
-  '1px': '1',
-  '2px': '2',
-};
-
-export const DISPLAY = {
-  'Block': CSS.DISPLAY.BLOCK,
-  'Contents': CSS.DISPLAY.CONTENTS,
-  'Flex': CSS.DISPLAY.FLEX,
-  'Grid': CSS.DISPLAY.GRID,
-  'Inline Block': CSS.DISPLAY.INLINE_BLOCK,
-  'Inline Flex': CSS.DISPLAY.INLINE_FLEX,
-  'Inline': CSS.DISPLAY.INLINE,
-  'Hidden': CSS.DISPLAY.NONE,
-};
-
-export const FLEX_AXIS1 = {
-  Around: CSS.AXIS1.AROUND,
-  Between: CSS.AXIS1.BETWEEN,
-  Center: CSS.AXIS1.CENTER,
-  End: CSS.AXIS1.END,
-  Start: CSS.AXIS1.START,
-};
-
-export const FLEX_AXIS2 = {
-  Around: CSS.AXIS2.AROUND,
-  Center: CSS.AXIS2.CENTER,
-  End: CSS.AXIS2.END,
-  Start: CSS.AXIS2.START,
-};
-
-export const FLEX_DIRECTION = {
-  Column: CSS.FLEX.DIRECTION.COLUMN,
-  Row: CSS.FLEX.DIRECTION.ROW,
-};
-
-export const FONT_SIZE = {
-  '12px': CSS.FONT.SIZE.TWELVE,
-  '14px': CSS.FONT.SIZE.FOURTEEN,
-  '16px': CSS.FONT.SIZE.SIXTEEN,
-  '20px': CSS.FONT.SIZE.TWENTY,
-  '24px': CSS.FONT.SIZE.TWENTY_FOUR,
-  '32px': CSS.FONT.SIZE.THIRTY_TWO,
-};
-
-export const FONT_WEIGHT = {
-  '400 Regular': CSS.FONT.WEIGHT.FOUR_HUNDRED,
-  '500 Medium': CSS.FONT.WEIGHT.FIVE_HUNDRED,
-  '600 Semibold': CSS.FONT.WEIGHT.SIX_HUNDRED,
-  '700 Bold': CSS.FONT.WEIGHT.SEVEN_HUNDRED,
-};
-
-export const GAP = {
-  '4 REM': CSS.GAP.FOUR,
-  '2 REM': CSS.GAP.TWO,
-  '1 REM': CSS.GAP.ONE,
-  '0.5 REM': CSS.GAP.HALF,
-  '0.25 REM': CSS.GAP.QUARTER,
-};
-
-export const LINK_SIZE = {
-  TWELVE: CSS.FONT.SIZE.TWELVE,
-  FOURTEEN: CSS.FONT.SIZE.FOURTEEN,
-  SIXTEEN: CSS.FONT.SIZE.SIXTEEN,
-};
-
-export const MARGIN = {
-  'Full 4 REM': CSS.MARGIN.FULL.FOUR,
-  'Full 2 REM': CSS.MARGIN.FULL.TWO,
-  'Full 1 REM': CSS.MARGIN.FULL.ONE,
-  'Full 0.5 REM': CSS.MARGIN.FULL.HALF,
-  'Full 0.25 REM': CSS.MARGIN.FULL.QUARTER,
-
-  'X-axis Auto': CSS.MARGIN.X.AUTO,
-  'X-axis 4 REM': CSS.MARGIN.X.FOUR,
-  'X-axis 2 REM': CSS.MARGIN.X.TWO,
-  'X-axis 1 REM': CSS.MARGIN.X.ONE,
-  'X-axis 0.5 REM': CSS.MARGIN.X.HALF,
-  'X-axis 0.25 REM': CSS.MARGIN.X.QUARTER,
-
-  'Y-axis 4 REM': CSS.MARGIN.Y.FOUR,
-  'Y-axis 2 REM': CSS.MARGIN.Y.TWO,
-  'Y-axis 1 REM': CSS.MARGIN.Y.ONE,
-  'Y-axis 0.5 REM': CSS.MARGIN.Y.HALF,
-  'Y-axis 0.25 REM': CSS.MARGIN.Y.QUARTER,
-
-  'Top 4 REM': CSS.MARGIN.TOP.FOUR,
-  'Top 2 REM': CSS.MARGIN.TOP.TWO,
-  'Top 1 REM': CSS.MARGIN.TOP.ONE,
-  'Top 0.5 REM': CSS.MARGIN.TOP.HALF,
-  'Top 0.25 REM': CSS.MARGIN.TOP.QUARTER,
-
-  'Right Auto': CSS.MARGIN.RIGHT.AUTO,
-  'Right 4 REM': CSS.MARGIN.RIGHT.FOUR,
-  'Right 2 REM': CSS.MARGIN.RIGHT.TWO,
-  'Right 1 REM': CSS.MARGIN.RIGHT.ONE,
-  'Right 0.5 REM': CSS.MARGIN.RIGHT.HALF,
-  'Right 0.25 REM': CSS.MARGIN.RIGHT.QUARTER,
-
-  'Bottom 4 REM': CSS.MARGIN.BOTTOM.FOUR,
-  'Bottom 2 REM': CSS.MARGIN.BOTTOM.TWO,
-  'Bottom 1 REM': CSS.MARGIN.BOTTOM.ONE,
-  'Bottom 0.5 REM': CSS.MARGIN.BOTTOM.HALF,
-  'Bottom 0.25 REM': CSS.MARGIN.BOTTOM.QUARTER,
-
-  'Left Auto': CSS.MARGIN.LEFT.AUTO,
-  'Left 4 REM': CSS.MARGIN.LEFT.FOUR,
-  'Left 2 REM': CSS.MARGIN.LEFT.TWO,
-  'Left 1 REM': CSS.MARGIN.LEFT.ONE,
-  'Left 0.5 REM': CSS.MARGIN.LEFT.HALF,
-  'Left 0.25 REM': CSS.MARGIN.LEFT.QUARTER,
-};
-
-export const PADDING = {
-  'Full 4 REM': CSS.PADDING.FULL.FOUR,
-  'Full 2 REM': CSS.PADDING.FULL.TWO,
-  'Full 1 REM': CSS.PADDING.FULL.ONE,
-  'Full 0.5 REM': CSS.PADDING.FULL.HALF,
-  'Full 0.25 REM': CSS.PADDING.FULL.QUARTER,
-
-  'X-axis 4 REM': CSS.PADDING.X.FOUR,
-  'X-axis 2 REM': CSS.PADDING.X.TWO,
-  'X-axis 1 REM': CSS.PADDING.X.ONE,
-  'X-axis 0.5 REM': CSS.PADDING.X.HALF,
-  'X-axis 0.25 REM': CSS.PADDING.X.QUARTER,
-
-  'Y-axis 4 REM': CSS.PADDING.Y.FOUR,
-  'Y-axis 2 REM': CSS.PADDING.Y.TWO,
-  'Y-axis 1 REM': CSS.PADDING.Y.ONE,
-  'Y-axis 0.5 REM': CSS.PADDING.Y.HALF,
-  'Y-axis 0.25 REM': CSS.PADDING.Y.QUARTER,
-
-  'Top 4 REM': CSS.PADDING.TOP.FOUR,
-  'Top 2 REM': CSS.PADDING.TOP.TWO,
-  'Top 1 REM': CSS.PADDING.TOP.ONE,
-  'Top 0.5 REM': CSS.PADDING.TOP.HALF,
-  'Top 0.25 REM': CSS.PADDING.TOP.QUARTER,
-
-  'Right 4 REM': CSS.PADDING.RIGHT.FOUR,
-  'Right 2 REM': CSS.PADDING.RIGHT.TWO,
-  'Right 1 REM': CSS.PADDING.RIGHT.ONE,
-  'Right 0.5 REM': CSS.PADDING.RIGHT.HALF,
-  'Right 0.25 REM': CSS.PADDING.RIGHT.QUARTER,
-
-  'Bottom 4 REM': CSS.PADDING.BOTTOM.FOUR,
-  'Bottom 2 REM': CSS.PADDING.BOTTOM.TWO,
-  'Bottom 1 REM': CSS.PADDING.BOTTOM.ONE,
-  'Bottom 0.5 REM': CSS.PADDING.BOTTOM.HALF,
-  'Bottom 0.25 REM': CSS.PADDING.BOTTOM.QUARTER,
-
-  'Left 4 REM': CSS.PADDING.LEFT.FOUR,
-  'Left 2 REM': CSS.PADDING.LEFT.TWO,
-  'Left 1 REM': CSS.PADDING.LEFT.ONE,
-  'Left 0.5 REM': CSS.PADDING.LEFT.HALF,
-  'Left 0.25 REM': CSS.PADDING.LEFT.QUARTER,
-};
-
-export const SHADOW = {
-  Bottom: CSS.SHADOW.BOTTOM,
-  Top: CSS.SHADOW.TOP,
-};
-
-export const TYPOGRAPHY = {
-  DISPLAY_1: [CSS.FONT.SIZE.THIRTY_TWO, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_1: [CSS.FONT.SIZE.TWENTY_FOUR, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_2: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_3: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  TITLE_1: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  TITLE_2: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  BODY_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
-  BODY_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
-  LABEL_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LABEL_1_SEMIBOLD: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  LABEL_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LABEL_2_SEMIBOLD: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  LABEL_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LINK_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  LINK_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  LINK_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  BUTTON_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-};
-
-export type Typography = (typeof TYPOGRAPHY)[keyof typeof TYPOGRAPHY];