tide-design-system 2.4.0 → 2.4.2

package/netlify.toml

@@ -0,0 +1,3 @@
+[context."sandbox"]
+  command = "npm run build-sandbox"
+  publish = "/dist"

package/package.json

@@ -44,15 +44,17 @@
   },
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
+    "build-sandbox": "vite build --config vite.config.sandbox.ts",
     "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
-    "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
+    "build-vite": "vite build",
     "coverage": "vitest run --coverage",
     "dev": "vite",
     "enforce": "npm run lint && npm run type-check && npm run test",
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
     "precommit": "npm run lint:fix && npm run type-check && npm run test",
-    "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
+    "preview-sandbox": "npm run build-sandbox && npx http-server -a localhost dist/",
+    "preview-storybook": "npm run build && npx http-server -a localhost storybook-static/",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "type-check": "vue-tsc --noEmit"
@@ -61,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideCard.vue

@@ -12,7 +12,7 @@
     heading: string;
     icon?: Icon;
     selected?: boolean;
-    type: CardType;
+    type?: CardType;
     href?: string;
   };
 

package/src/components/TideChipAction.vue

@@ -8,7 +8,7 @@
   import type { Element } from '@/types/Element';
 
   type Props = {
-    element: Element;
+    element?: Element;
     href?: string;
     isNewTab?: boolean;
     label: string;

package/src/components/TideImage.vue

@@ -8,7 +8,7 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
-    alt: string;
+    alt?: string;
     height?: string;
     isLazy?: boolean;
     objectFit?: ObjectFit;

package/src/components/TideImageBackground.vue

@@ -6,8 +6,8 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
-    alt: string;
-    isLazy: boolean;
+    alt?: string;
+    isLazy?: boolean;
     sources?: Source[];
     src?: string;
   };

package/src/components/TideInputCheckboxDeprecated.vue

@@ -19,8 +19,8 @@
     disabled?: boolean;
     indeterminate?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 

package/src/components/TideInputRadioDeprecated.vue

@@ -15,8 +15,8 @@
     checked?: boolean;
     disabled?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 

package/src/components/TideInputTextDeprecated.vue

@@ -27,10 +27,10 @@
     hasClear?: boolean;
     iconLeading?: Icon;
     inputId?: string;
-    label: string;
+    label?: string;
     maxlength?: number | undefined;
     minlength?: number | undefined;
-    name: string;
+    name?: string;
     prefix?: string;
     required?: boolean;
     suffix?: string;

package/src/stories/FoundationsBorder.stories.ts

@@ -1,8 +1,10 @@
 import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import { CSS } from '@/types/Styles';
+import { flatten, formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
+const BORDER_COLOR = prependNoneAsEmpty(flatten(CSS.BORDER.COLOR));
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
 const BORDER_STYLE = prependNoneAsEmpty(STYLES.BORDER_STYLE);
@@ -16,18 +18,21 @@ const formatArgs = (args: any) => {
 
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
+  const hasBorder = args.borderSide || args.borderWidth;
 
-  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth && args.borderRadius) {
-    classNames.push(args.borderRadius);
-  }
+  // Any selection for any property should also add a side and width or nothing will be visible.
+  if (hasBorder) {
+    const side = args.borderSide || BORDER_SIDE.Full;
+    const width = args.borderWidth || BORDER_WIDTH['1px'];
 
-  if (args.borderSide && args.borderWidth) {
-    classNames.push(`${args.borderSide}-${args.borderWidth}`);
+    classNames.push(`${side}-${width}`);
+  } else if (args.borderStyle || args.borderColor || args.borderRadius) {
+    classNames.push(CSS.BORDER.FULL.ONE);
   }
 
-  if (args.borderSide && args.borderWidth && args.borderStyle) {
-    classNames.push(args.borderStyle);
-  }
+  if (args.borderStyle) classNames.push(args.borderStyle);
+  if (args.borderColor) classNames.push(args.borderColor);
+  if (args.borderRadius) classNames.push(args.borderRadius);
 
   return classNames;
 };
@@ -67,22 +72,28 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
+    borderColor: {
+      ...formatArgType({ BORDER_COLOR }),
+      description: 'Applies a border color',
+      name: 'Border Color',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.BORDER.COLOR' },
+      },
+    },
     borderRadius: {
       ...formatArgType({ BORDER_RADIUS }),
       description: 'Dictates severity of rounded corners',
-      if: { arg: 'borderSide', eq: BORDER_SIDE.Full },
       name: 'Border Radius',
     },
     borderSide: {
       ...formatArgType({ BORDER_SIDE }),
       description: 'Dictates to which edge(s) the border applies',
-      if: { arg: 'borderWidth', neq: BORDER_WIDTH.None },
       name: 'Border Side',
     },
     borderStyle: {
       ...formatArgType({ BORDER_STYLE }),
       description: 'Applies a border style',
-      if: { arg: 'borderWidth', neq: BORDER_STYLE.None },
       name: 'Border Style',
     },
     borderWidth: {
@@ -92,6 +103,7 @@ export default {
     },
   },
   args: {
+    borderColor: BORDER_COLOR.None,
     borderRadius: BORDER_RADIUS.None,
     borderSide: BORDER_SIDE.None,
     borderStyle: BORDER_STYLE.None,
@@ -200,7 +212,7 @@ export const BorderFullDashed2px = {
     borderStyle: BORDER_STYLE.Dashed,
     borderWidth: BORDER_WIDTH['2px'],
   },
-  name: 'Border Full Dashed 1px',
+  name: 'Border Full Dashed 2px',
 };
 
 export const RadiusQuarter = {

package/src/stories/FoundationsTypography.stories.ts

@@ -4,6 +4,8 @@ import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utili
 import type { StoryContext } from '@storybook/vue3';
 
 const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
+const TEXT_DECORATION = prependNoneAsEmpty(STYLES.TEXT_DECORATION);
+const TEXT_TRANSFORM = prependNoneAsEmpty(STYLES.TEXT_TRANSFORM);
 
 const formatArgs = (args: any) => {
   args.class = formatClassNames(args).join(' ');
@@ -15,6 +17,8 @@ const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
   if (args.type) classNames.push(args.type);
+  if (args.textDecoration) classNames.push(args.textDecoration);
+  if (args.textTransform) classNames.push(args.textTransform);
 
   return classNames;
 };
@@ -63,6 +67,24 @@ export default {
         type: { summary: 'string' },
       },
     },
+    textDecoration: {
+      ...formatArgType({ TEXT_DECORATION }),
+      description: 'Applies text decoration styles',
+      name: 'Text Decoration',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.STRIKETHROUGH | CSS.UNDERLINE' },
+      },
+    },
+    textTransform: {
+      ...formatArgType({ TEXT_TRANSFORM }),
+      description: 'Applies text transformation styles',
+      name: 'Text Transform',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.TEXT_TRANSFORM' },
+      },
+    },
     type: {
       ...formatArgType({ TYPOGRAPHY }),
       description: `Applies font rules`,
@@ -75,6 +97,8 @@ export default {
   },
   args: {
     label: 'Aa',
+    textDecoration: TEXT_DECORATION.None,
+    textTransform: TEXT_TRANSFORM.None,
     type: TYPOGRAPHY.None,
   },
   parameters,

package/src/types/Storybook.ts

@@ -217,6 +217,16 @@ export const SHADOW = {
   Top: CSS.SHADOW.TOP,
 };
 
+export const TEXT_DECORATION = {
+  Strikethrough: CSS.STRIKETHROUGH.ON,
+  Underline: CSS.UNDERLINE.REST.ON,
+};
+
+export const TEXT_TRANSFORM = {
+  Lowercase: CSS.TEXT_TRANSFORM.LOWER,
+  Uppercase: CSS.TEXT_TRANSFORM.UPPER,
+};
+
 export const TRANSPARENT = {
   '100: 90% White': CSS.BG.TRANSPARENT.ONE_HUNDRED,
   '200: 75% White': CSS.BG.TRANSPARENT.TWO_HUNDRED,

package/vite.config.sandbox.ts

@@ -0,0 +1,29 @@
+import vue from '@vitejs/plugin-vue';
+import { URL, fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import ViteDts from 'vite-plugin-dts';
+import svgLoader from 'vite-svg-loader';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    cssCodeSplit: false,
+    outDir: 'dist',
+    sourcemap: true,
+  },
+  plugins: [
+    vue(),
+    svgLoader({
+      svgo: false,
+    }),
+    ViteDts({
+      insertTypesEntry: true,
+      rollupTypes: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});

package/dist/css/fonts.css

@@ -1,36 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 500;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 600;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  font-display: block;
-  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

package/dist/css/grid-layout.css

@@ -1,34 +0,0 @@
-:root {
-  --tide-1232px: 73rem;
-  --tide-1920px: 120rem;
-}
-
-.tide-grid-layout {
-  --tide-max-content-width: var(--tide-1232px);
-  --tide-column-width:      minmax(0, var(--tide-max-content-width));
-  --tide-gutter-width:      var(--tide-spacing-1);
-
-  display: grid;
-  grid-auto-rows: min-content;
-  grid-template-columns:
-    minmax(var(--tide-gutter-width), 1fr)
-    var(--tide-column-width)
-    minmax(var(--tide-gutter-width), 1fr);
-}
-
-@media (min-width: 768px) {
-  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
-}
-
-@media (min-width: 1232px) {
-  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
-}
-
-.tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}
-
-.tide-grid-layout > *,
-.tide-grid-item {
-  grid-column: 2 / -2;
-}
-
-.tide-fluid {grid-column: 1 / -1;}

package/dist/css/main.css

@@ -1,5 +0,0 @@
-@import './fonts.css';
-@import './reset.css';
-@import './variables.css';
-@import './utilities.css';
-@import './grid-layout.css';

package/dist/css/realm/aero.css

@@ -1,25 +0,0 @@
-/* Aero Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-aqua:       #A2DEE5;
-  --tide-realm-atmosphere: #3F6EBD;
-  --tide-realm-cloud:      #E3E8F1;
-  --tide-realm-sky:        #AAD4F0;
-  --tide-realm-starry:     #3F6EBD;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-atmosphere);
-  --tide-surface-accent: var(--tide-realm-cloud);
-  --tide-surface-brand:  var(--tide-realm-starry);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-starry);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-sky);
-  --tide-gradient-top-color: var(--tide-realm-aqua);
-  --tide-gradient-bottom-left-color: var(--tide-realm-atmosphere);
-
-  --tide-gradient-bottom-right-opacity: 65%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 32%;
-}

package/dist/css/realm/atv.css

@@ -1,25 +0,0 @@
-/* ATV Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-charcoal: #33383B;
-  --tide-realm-maroon:   #9B2702;
-  --tide-realm-orange:   #C7521A;
-  --tide-realm-peach:    #E59A49;
-  --tide-realm-sand:     #F8EADD;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-orange);
-  --tide-surface-accent: var(--tide-realm-sand);
-  --tide-surface-brand:  var(--tide-realm-charcoal);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-orange);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-maroon);
-  --tide-gradient-top-color: var(--tide-realm-peach);
-  --tide-gradient-bottom-left-color: var(--tide-realm-orange);
-
-  --tide-gradient-bottom-right-opacity: 27%;
-  --tide-gradient-top-opacity: 37%;
-  --tide-gradient-bottom-left-opacity: 44%;
-}

package/dist/css/realm/boatmart.css

@@ -1,25 +0,0 @@
-/* Boatmart Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-blue:      #499CC7;
-  --tide-realm-mist:      #DBEDFC;
-  --tide-realm-navy-dark: #143353;
-  --tide-realm-navy:      #1D4977;
-  --tide-realm-orange:    #D24614;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-navy);
-  --tide-surface-accent: var(--tide-realm-mist);
-  --tide-surface-brand:  var(--tide-realm-navy-dark);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-navy);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-orange);
-  --tide-gradient-top-color: var(--tide-realm-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-navy);
-
-  --tide-gradient-bottom-right-opacity: 12%;
-  --tide-gradient-top-opacity: 27%;
-  --tide-gradient-bottom-left-opacity: 32%;
-}

package/dist/css/realm/cycle.css

@@ -1,24 +0,0 @@
-/* Cycle Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-light-blue: #DFECF2;
-  --tide-realm-pure-black: #000000;
-  --tide-realm-red:        #C50000;
-  --tide-realm-steel-blue: #253E51;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-pure-black);
-  --tide-surface-accent: var(--tide-realm-light-blue);
-  --tide-surface-brand:  var(--tide-gray-900);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-steel-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-red);
-  --tide-gradient-top-color: var(--tide-realm-steel-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-pure-black);
-
-  --tide-gradient-bottom-right-opacity: 8%;
-  --tide-gradient-top-opacity: 28%;
-  --tide-gradient-bottom-left-opacity: 17%;
-}

package/dist/css/realm/equipment.css

@@ -1,25 +0,0 @@
-/* Equipment Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-charcoal:  #333333;
-  --tide-realm-evergreen: #468200;
-  --tide-realm-moss:      #EEF6D7;
-  --tide-realm-steel:     #494949;
-  --tide-realm-yellow:    #FFCE34;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-steel);
-  --tide-surface-accent: var(--tide-realm-moss);
-  --tide-surface-brand:  var(--tide-realm-charcoal);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-evergreen);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-evergreen);
-  --tide-gradient-top-color: var(--tide-realm-yellow);
-  --tide-gradient-bottom-left-color: var(--tide-realm-steel);
-
-  --tide-gradient-bottom-right-opacity: 22%;
-  --tide-gradient-top-opacity: 29%;
-  --tide-gradient-bottom-left-opacity: 39%;
-}

package/dist/css/realm/pwc.css

@@ -1,25 +0,0 @@
-/* PWC Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-baby-blue:     #86C0F4;
-  --tide-realm-blue:          #0B72B8;
-  --tide-realm-cantaloupe:    #ECA26A;
-  --tide-realm-foam:          #E0EBF5;
-  --tide-realm-midnight-blue: #002344;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-blue);
-  --tide-surface-accent: var(--tide-realm-foam);
-  --tide-surface-brand:  var(--tide-realm-midnight-blue);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-cantaloupe);
-  --tide-gradient-top-color: var(--tide-realm-baby-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-opacity: 22%;
-  --tide-gradient-top-opacity: 39%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}

package/dist/css/realm/rv.css

@@ -1,25 +0,0 @@
-/* RV Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-dark-green: #004926;
-  --tide-realm-green:      #006836;
-  --tide-realm-mint:       #98CFB6;
-  --tide-realm-pistachio:  #E0EDE7;
-  --tide-realm-yellow:     #F2B203;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-green);
-  --tide-surface-accent: var(--tide-realm-pistachio);
-  --tide-surface-brand:  var(--tide-realm-dark-green);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-green);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-yellow);
-  --tide-gradient-top-color: var(--tide-realm-mint);
-  --tide-gradient-bottom-left-color: var(--tide-realm-green);
-
-  --tide-gradient-bottom-right-opacity: 15%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}

package/dist/css/realm/snow.css

@@ -1,25 +0,0 @@
-/* Snowmobile Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-frost:         #E3E8F2;
-  --tide-realm-ice:           #81C9DF;
-  --tide-realm-sapphire-dark: #122754;
-  --tide-realm-sapphire:      #193778;
-  --tide-realm-twilight:      #CCC5E7;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-sapphire);
-  --tide-surface-accent: var(--tide-realm-frost);
-  --tide-surface-brand:  var(--tide-realm-sapphire-dark);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-sapphire);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-ice);
-  --tide-gradient-top-color: var(--tide-realm-twilight);
-  --tide-gradient-bottom-left-color: var(--tide-realm-sapphire);
-
-  --tide-gradient-bottom-right-opacity: 32%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 44%;
-}

package/dist/css/realm/truck.css

@@ -1,25 +0,0 @@
-/* Commercial Truck Trader Realm Colors */
-:root {
-  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-baby-blue:     #97D1E3;
-  --tide-realm-blue:          #005F9E;
-  --tide-realm-cloud:         #DBEDF7;
-  --tide-realm-granny-smith:  #A6E6A7;
-  --tide-realm-midnight-blue: #172C4B;
-
-  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:        var(--tide-realm-blue);
-  --tide-surface-accent: var(--tide-realm-cloud);
-  --tide-surface-brand:  var(--tide-realm-midnight-blue);
-
-  --tide-on-primary:       var(--tide-gray-100);
-  --tide-on-surface-brand: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-color: var(--tide-realm-granny-smith);
-  --tide-gradient-top-color: var(--tide-realm-baby-blue);
-  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
-
-  --tide-gradient-bottom-right-opacity: 28%;
-  --tide-gradient-top-opacity: 42%;
-  --tide-gradient-bottom-left-opacity: 36%;
-}