tide-design-system 2.0.0 → 2.0.2

package/dist/css/variables.css

@@ -1,114 +1,118 @@
 /*.CSS Variables */
 :root {
   /* Font Size */
-  --font-12: 0.75rem;  /* 12px */
-  --font-14: 0.875rem; /* 14px */
-  --font-16: 1rem;     /* 16px */
-  --font-20: 1.25rem;  /* 20px */
-  --font-24: 1.5rem;   /* 24px */
-  --font-28: 1.75rem;  /* 28px */
-  --font-32: 2rem;     /* 32px */
+  --tide-font-10: 0.625rem; /* 10px */
+  --tide-font-12: 0.75rem;  /* 12px */
+  --tide-font-14: 0.875rem; /* 14px */
+  --tide-font-16: 1rem;     /* 16px */
+  --tide-font-20: 1.25rem;  /* 20px */
+  --tide-font-24: 1.5rem;   /* 24px */
+  --tide-font-28: 1.75rem;  /* 28px */
+  --tide-font-32: 2rem;     /* 32px */
 
   /* Font Weight */
-  --font-400: 400;
-  --font-500: 500;
-  --font-600: 600;
-  --font-700: 700;
+  --tide-font-400: 400;
+  --tide-font-500: 500;
+  --tide-font-600: 600;
+  --tide-font-700: 700;
 
   /* Animation */
-  --animate: 300ms ease-in-out;
+  --tide-animate: 300ms ease-in-out;
 
   /* Spacing */
-  --spacing-0: 0rem;
-  --spacing-1\/4: 0.25rem;
-  --spacing-1\/2: 0.5rem;
-  --spacing-1: 1rem;
-  --spacing-2: 2rem;
-  --spacing-4: 4rem;
+  --tide-spacing-0: 0rem;
+  --tide-spacing-1\/4: 0.25rem;
+  --tide-spacing-1\/2: 0.5rem;
+  --tide-spacing-1: 1rem;
+  --tide-spacing-2: 2rem;
+  --tide-spacing-4: 4rem;
 
   /* Border */
-  --border-width-1: 1px;
-  --border-width-2: 2px;
+  --tide-border-width-1: 1px;
+  --tide-border-width-2: 2px;
 
-  --border-1: var(--border-width-1) solid var(--black);
-  --border-2: var(--border-width-2) solid var(--black);
+  --tide-border-1: var(--tide-border-width-1) solid var(--tide-black);
+  --tide-border-2: var(--tide-border-width-2) solid var(--tide-black);
 
   /* Border Radius */
-  --radius-1\/4: 4px;
-  --radius-1\/2: 8px;
-  --radius-1: 16px;
-  --radius-full: 99999px;
+  --tide-radius-1\/4: 4px;
+  --tide-radius-1\/2: 8px;
+  --tide-radius-1: 16px;
+  --tide-radius-full: 99999px;
 
-  /* Global tonal palette */
-  --blue-100:  #D1E0EB;
-  --blue-200:  #A4C1D7;
-  --blue-300:  #76A3C4;
-  --blue-400:  #4984B0;
-
-  --gray-100:  #FFFFFF;
-  --gray-200:  #F5F5F5;
-  --gray-300:  #E4E4E4;
-  --gray-400:  #C9CACB;
-  --gray-500:  #AEAFB2;
-  --gray-600:  #939598;
-  --gray-700:  #6E7072;
-  --gray-800:  #494A4C;
-  --gray-900:  #252526;
-  --gray-1000: #000000;
-
-  --green-100:  #E6EFCF;
-  --green-200:  #CDE09E;
-  --green-300:  #B4D06E;
-  --green-400:  #9BC13D;
-
-  --red-100:  #EFCFCF;
-  --red-200:  #E09E9E;
-  --red-300:  #D06E6E;
-  --red-400:  #C13D3D;
-  --red-500:  #912E2E;
-
-  --yellow-100:  #FEF2CC;
-  --yellow-200:  #FCE499;
-  --yellow-300:  #FBD766;
-  --yellow-400:  #FACA33;
-
-  --black: var(--gray-900);
-  --white: var(--gray-100);
+  --tide-black: var(--tide-gray-900);
+  --tide-white: var(--tide-gray-100);
+
+  /* Opacity */
+  --tide-disabled: 0.333;
 
   /* Shadow */
-  --shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
-  --shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
 
   /* Transparency */
-  --transparent-100: rgba(255, 255, 255, 0.9);
-  --transparent-200: rgba(255, 255, 255, 0.75);
-  --transparent-300: rgba(0, 0, 0, 0.1);
-  --transparent-400: rgba(0, 0, 0, 0.5);
+  --tide-transparent-100: rgba(255, 255, 255, 0.9);
+  --tide-transparent-200: rgba(255, 255, 255, 0.75);
+  --tide-transparent-300: rgba(0, 0, 0, 0.1);
+  --tide-transparent-400: rgba(0, 0, 0, 0.5);
+
+  /* Global tonal palette */
+  --tide-blue-100:  #D1E0EB;
+  --tide-blue-200:  #A4C1D7;
+  --tide-blue-300:  #76A3C4;
+  --tide-blue-400:  #4984B0;
+
+  --tide-gray-100:  #FFFFFF;
+  --tide-gray-200:  #F5F5F5;
+  --tide-gray-300:  #E4E4E4;
+  --tide-gray-400:  #C9CACB;
+  --tide-gray-500:  #AEAFB2;
+  --tide-gray-600:  #939598;
+  --tide-gray-700:  #6E7072;
+  --tide-gray-800:  #494A4C;
+  --tide-gray-900:  #252526;
+  --tide-gray-1000: #000000;
+
+  --tide-green-100:  #E6EFCF;
+  --tide-green-200:  #CDE09E;
+  --tide-green-300:  #B4D06E;
+  --tide-green-400:  #9BC13D;
+
+  --tide-red-100:  #EFCFCF;
+  --tide-red-200:  #E09E9E;
+  --tide-red-300:  #D06E6E;
+  --tide-red-400:  #C13D3D;
+  --tide-red-500:  #912E2E;
+
+  --tide-yellow-100:  #FEF2CC;
+  --tide-yellow-200:  #FCE499;
+  --tide-yellow-300:  #FBD766;
+  --tide-yellow-400:  #FACA33;
 
   /* Global color roles */
-  --error-primary:        var(--red-400);
-  --error-primary-border: var(--red-300);
-  --error-surface:        var(--red-100);
-
-  --error-border:      var(--red-200);
-  --error-border-low:  var(--red-200);
-  --error-border-high: var(--red-200);
-
-  --error-on-surface:         var(--red-200);
-  --error-on-surface-variant: var(--red-200);
-
-  --info-primary:        var(--blue-400);
-  --info-primary-border: var(--blue-300);
-  --info-surface:        var(--blue-100);
-  --info-border:         var(--blue-200);
-
-  --success-primary:        var(--green-400);
-  --success-primary-border: var(--green-300);
-  --success-surface:        var(--green-100);
-  --success-border:         var(--green-200);
-
-  --warning-primary:        var(--yellow-400);
-  --warning-primary-border: var(--yellow-300);
-  --warning-surface:        var(--yellow-100);
-  --warning-border:         var(--yellow-200);
+  --tide-error-primary:        var(--tide-red-400);
+  --tide-error-primary-border: var(--tide-red-300);
+  --tide-error-surface:        var(--tide-red-100);
+
+  --tide-error-border:      var(--tide-red-400);
+  --tide-error-border-low:  var(--tide-red-200);
+  --tide-error-border-high: var(--tide-red-500);
+
+  --tide-error-on-surface:         var(--tide-red-400);
+  --tide-error-on-surface-variant: var(--tide-red-500 );
+
+  --tide-info-primary:        var(--tide-blue-400);
+  --tide-info-primary-border: var(--tide-blue-300);
+  --tide-info-surface:        var(--tide-blue-100);
+  --tide-info-border:         var(--tide-blue-200);
+
+  --tide-success-primary:        var(--tide-green-400);
+  --tide-success-primary-border: var(--tide-green-300);
+  --tide-success-surface:        var(--tide-green-100);
+  --tide-success-border:         var(--tide-green-200);
+
+  --tide-warning-primary:        var(--tide-yellow-400);
+  --tide-warning-primary-border: var(--tide-yellow-300);
+  --tide-warning-surface:        var(--tide-yellow-100);
+  --tide-warning-border:         var(--tide-yellow-200);
 }

package/dist/tide-design-system.js

@@ -0,0 +1,5 @@
+const a = "";
+export {
+  a as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/dist/tide-design-system2.js

@@ -0,0 +1,5 @@
+const t = "";
+export {
+  t as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtMi5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system3.js

@@ -0,0 +1,5 @@
+const c = "";
+export {
+  c as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtMy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system4.js

@@ -0,0 +1,5 @@
+const e = "";
+export {
+  e as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNC5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system5.js

@@ -0,0 +1,5 @@
+const t = "";
+export {
+  t as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system6.js

@@ -0,0 +1,5 @@
+const t = "";
+export {
+  t as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNi5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system7.js

@@ -0,0 +1,5 @@
+const o = "";
+export {
+  o as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/tide-design-system8.js

@@ -0,0 +1,5 @@
+const t = "";
+export {
+  t as default
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtOC5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

package/dist/types/FacetRange.ts

@@ -0,0 +1,84 @@
+import type { SelectOption } from '@/types/Select';
+
+export const FACET_COMPONENT_ID_RANGE = {
+  GROSS_WEIGHT: 'grossWeight',
+  LENGTH: 'vehicleLength',
+  MILEAGE: 'mileage',
+  PRICE: 'price',
+  SLEEPING_CAPACITY: 'sleepingCapacity',
+  SLIDEOUTS: 'slideouts',
+  YEAR: 'vehicleYear',
+} as const;
+
+export type FacetComponentIdRange = (typeof FACET_COMPONENT_ID_RANGE)[keyof typeof FACET_COMPONENT_ID_RANGE];
+
+export type RangeData = {
+  min: number | null;
+  max: number | null;
+};
+
+const GROSS_WEIGHT_MIN = 1000;
+const GROSS_WEIGHT_MAX = 12000;
+export const GROSS_WEIGHT_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: Math.floor((GROSS_WEIGHT_MAX - GROSS_WEIGHT_MIN) / 1000) + 1 }, (_, index) => ({
+    label: (GROSS_WEIGHT_MAX - index * 1000).toString(),
+    value: (GROSS_WEIGHT_MAX - index * 1000).toString(),
+  })),
+];
+
+const SLEEP_CAP_MIN = 1;
+const SLEEP_CAP_MAX = 10;
+export const SLEEPING_CAPACITY_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: SLEEP_CAP_MAX - SLEEP_CAP_MIN + 1 }, (_, index) => ({
+    label: (SLEEP_CAP_MAX - index).toString(),
+    value: (SLEEP_CAP_MAX - index).toString(),
+  })),
+];
+
+const SLIDEOUT_MIN = 0;
+const SLIDEOUT_MAX = 5;
+export const SLIDEOUT_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: SLIDEOUT_MAX - SLIDEOUT_MIN + 1 }, (_, index) => ({
+    label: (SLIDEOUT_MAX - index).toString(),
+    value: (SLIDEOUT_MAX - index).toString(),
+  })),
+];
+
+const LENGTH_MIN = 10;
+const LENGTH_MAX = 50;
+export const LENGTH_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: LENGTH_MAX - LENGTH_MIN + 1 }, (_, index) => ({
+    label: (LENGTH_MAX - index).toString(),
+    value: (LENGTH_MAX - index).toString(),
+  })),
+];
+
+const YEAR_MIN = 1900;
+const today = new Date();
+const YEAR_MAX = today.getFullYear() + 2;
+export const YEAR_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: YEAR_MAX - YEAR_MIN + 1 }, (_, index) => ({
+    label: (YEAR_MAX - index).toString(),
+    value: (YEAR_MAX - index).toString(),
+  })),
+];

package/dist/types/Field.ts

@@ -26,7 +26,6 @@ interface GenericInput {
 
 interface SelectField extends GenericInput, StringValue {
   options: SelectOption[];
-  placeholder?: string;
 }
 
 interface StringValue {

package/dist/types/Form.ts

@@ -1 +1,58 @@
+import type { SelectOptGroup, SelectOption } from '@/types/Select';
+import type { TextInputType } from '@/types/TextInput';
+import type { ValidationError, Validator } from '@/types/Validation';
+
+interface GenericInput {
+  error?: ValidationError;
+  transformValue?: FormValueTransformer;
+  name: string;
+  validators?: Validator[];
+  required?: boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+interface StringValue {
+  value?: string;
+}
+
+interface BooleanValue {
+  value?: boolean;
+}
+
+export type SelectInput = GenericInput &
+  StringValue & {
+    options?: SelectOption[] | readonly SelectOption[];
+    placeholder?: string;
+    optgroups?: SelectOptGroup[];
+  };
+
+export type TextInput = GenericInput &
+  StringValue & {
+    autocomplete?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    type?: TextInputType;
+    placeholder?: string;
+    value?: string;
+  };
+
+export type TextareaInput = GenericInput &
+  StringValue & {
+    maxlength?: number;
+    minlength?: number;
+    placeholder?: string;
+    value?: string;
+  };
+
+export type CheckboxInput = GenericInput &
+  BooleanValue & {
+    checked?: boolean;
+    indeterminate?: boolean;
+  };
+
+export type StringInput = SelectInput | TextInput | TextareaInput;
+export type BooleanInput = CheckboxInput;
+export type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
+
 export type FormValueTransformer = (value: string) => string;

package/dist/types/Realm.ts

@@ -1,6 +1,7 @@
 export const REALM = {
   AERO: 'aero',
   ATV: 'atv',
+  BOATMART: 'boatmart',
   CYCLE: 'cycle',
   EQUIP: 'equip',
   PWC: 'pwc',

package/dist/types/Select.ts

@@ -2,3 +2,9 @@ export type SelectOption = {
   label: string | number;
   value: any;
 };
+
+export type SelectOptGroup = {
+  label: string;
+  options?: SelectOption[];
+  value?: any;
+};

package/dist/types/Storybook.ts

@@ -1,7 +1,7 @@
 /* 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 { prependNoneAsEmpty } from '@/utilities/storybook';
+import { CSS } from '@/types/Styles';
 
 export const NoneAsEmpty = { None: '' };
 export const NoneAsUndefined = { None: undefined };
@@ -12,3 +12,208 @@ export const BOOLEAN_UNREQUIRED = {
   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];