tide-design-system 2.0.21 → 2.0.23

package/dist/types/Icon.ts

@@ -20,6 +20,7 @@ export const ICON = {
   CYCLE: 'cycle',
   DELETE: 'delete',
   DIAMOND: 'diamond',
+  DRAFT: 'draft',
   EDIT: 'edit',
   ERROR: 'error',
   EXPAND_CONTENT: 'expand-content',
@@ -36,6 +37,7 @@ export const ICON = {
   GOOGLE: 'google',
   GOOGLE_PAY: 'google-pay',
   GRID: 'grid',
+  HEIGHT: 'height',
   HELP: 'help',
   INFO: 'info',
   INSERT_TEXT: 'insert-text',
@@ -58,7 +60,9 @@ export const ICON = {
   PLAY_ARROW: 'play-arrow',
   REMOVE: 'remove',
   ROUNDED_CORNERS: 'rounded-corners',
+  RULER: 'ruler',
   SEARCH: 'search',
+  SEATING: 'seating',
   SELL: 'sell',
   SHARE: 'share',
   SHOPPING_CART: 'shopping-cart',
@@ -75,6 +79,8 @@ export const ICON = {
   VOLUME_OFF: 'volume-off',
   VOLUME_ON: 'volume-on',
   WARNING: 'warning',
+  WEIGHT: 'weight',
+  WIDTH: 'width',
   YOUTUBE: 'youtube',
 } as const;
 

package/index.ts

@@ -0,0 +1,122 @@
+import TideAccordionItem from '@/components/TideAccordionItem.vue';
+import TideAlert from '@/components/TideAlert.vue';
+import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
+import TideBadge from '@/components/TideBadge.vue';
+import TideBadgePremium from '@/components/TideBadgePremium.vue';
+import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
+import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
+import TideButton from '@/components/TideButton.vue';
+import TideButtonIcon from '@/components/TideButtonIcon.vue';
+import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import TideCard from '@/components/TideCard.vue';
+import TideCarousel from '@/components/TideCarousel.vue';
+import TideChipAction from '@/components/TideChipAction.vue';
+import TideChipFilter from '@/components/TideChipFilter.vue';
+import TideChipInput from '@/components/TideChipInput.vue';
+import TideColumns from '@/components/TideColumns.vue';
+import TideDivider from '@/components/TideDivider.vue';
+import TideIcon from '@/components/TideIcon.vue';
+import TideImage from '@/components/TideImage.vue';
+import TideIndicator from '@/components/TideIndicator.vue';
+import TideInputRadio from '@/components/TideInputRadio.vue';
+import TideInputSelect from '@/components/TideInputSelect.vue';
+import TideInputText from '@/components/TideInputText.vue';
+import TideInputTextarea from '@/components/TideInputTextarea.vue';
+import TideLink from '@/components/TideLink.vue';
+import TideModal from '@/components/TideModal.vue';
+import TidePagination from '@/components/TidePagination.vue';
+import TideSeoLinks from '@/components/TideSeoLinks.vue';
+import TideTabs from '@/components/TideTabs.vue';
+import TideToggle from '@/components/TideToggle.vue';
+
+import type { Alert } from '@/types/Alert';
+import type { Badge, BadgePremium, BadgeTrustedYears } from '@/types/Badge';
+import type { BreadCrumb } from '@/types/BreadCrumb';
+import type { Breakpoint, CssUtility } from '@/types/Styles';
+import type { Detail } from '@/types/Detail';
+import type { Element, ElementTextAsIcon } from '@/types/Element';
+import type { Icon } from '@/types/Icon';
+import type { Link } from '@/types/Link';
+import type { Priority } from '@/types/Priority';
+import type { Realm } from '@/types/Realm';
+import type { Size } from '@/types/Size';
+import type { Tab } from '@/types/Tab';
+import type { Target } from '@/types/Target';
+
+import { ALERT } from '@/types/Alert';
+import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
+import { BREAKPOINT, CSS } from '@/types/Styles';
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { ICON } from '@/types/Icon';
+import { PRIORITY } from '@/types/Priority';
+import { REALM } from '@/types/Realm';
+import { SIZE } from '@/types/Size';
+import { TARGET } from '@/types/Target';
+
+import '@/assets/css/main.css';
+
+export type {
+  Alert,
+  Badge,
+  BadgePremium,
+  BadgeTrustedYears,
+  BreadCrumb,
+  Breakpoint,
+  CssUtility,
+  Detail,
+  Element,
+  ElementTextAsIcon,
+  Icon,
+  Link,
+  Priority,
+  Realm,
+  Size,
+  Tab,
+  Target,
+};
+
+export {
+  ALERT,
+  BADGE,
+  BADGE_PREMIUM,
+  BADGE_TRUSTED,
+  BREAKPOINT,
+  CSS,
+  ELEMENT,
+  ELEMENT_TEXT_AS_ICON,
+  ICON,
+  PRIORITY,
+  REALM,
+  SIZE,
+  TARGET,
+  TideAccordionItem,
+  TideAlert,
+  TideBackgroundImage,
+  TideBadge,
+  TideBadgePremium,
+  TideBadgeTrustedPartner,
+  TideBreadCrumbs,
+  TideButton,
+  TideButtonIcon,
+  TideButtonPagination,
+  TideCard,
+  TideCarousel,
+  TideChipAction,
+  TideChipFilter,
+  TideChipInput,
+  TideColumns,
+  TideDivider,
+  TideIcon,
+  TideImage,
+  TideIndicator,
+  TideInputRadio,
+  TideInputSelect,
+  TideInputText,
+  TideInputTextarea,
+  TideLink,
+  TideModal,
+  TidePagination,
+  TideSeoLinks,
+  TideTabs,
+  TideToggle,
+};

package/package.json

@@ -28,25 +28,16 @@
     "storybook": "^8.0.9",
     "typescript": "^5.0.0",
     "vite": "^4.0.0",
+    "vite-svg-loader": "^5.1.0",
     "vitest": "^0.31.0",
     "vue": "^3.2.45",
     "vue-tsc": "^1.0.12"
   },
-  "exports": {
-    ".": "./dist/tide-design-system.js",
-    "./css": "./dist/style.css",
-    "./css/*": "./dist/css/*.css"
-  },
-  "files": [
-    "dist",
-    "!dist/utilities/storybook.js"
-  ],
   "license": "MIT",
-  "main": "./dist/tide-design-system.js",
   "name": "tide-design-system",
   "scripts": {
     "build": "npm run lint && npm run type-check && npm run build-only",
-    "build-only": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/types/ dist/types/ && cp -r src/utilities/ dist/utilities/",
+    "build-only": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
     "build-storybook": "storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
     "coverage": "vitest run --coverage",
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
@@ -57,5 +48,11 @@
     "type-check": "vue-tsc --noEmit"
   },
   "type": "module",
-  "version": "2.0.21"
+  "main": "dist/tide-design-system.cjs",
+  "module": "dist/tide-design-system.esm.js",
+  "types": "dist/tide-design-system.esm.d.ts",
+  "version": "2.0.23",
+  "dependencies": {
+    "vite-plugin-dts": "^4.2.3"
+  }
 }

package/src/assets/css/animation.css

@@ -0,0 +1,14 @@
+.slide-down-from-top-enter-active,
+.slide-down-from-top-leave-active {
+  transition: transform var(--tide-animate);
+}
+
+.slide-down-from-top-enter-from,
+.slide-down-from-top-leave-to {
+  transform: translateY(-100%);
+}
+
+.slide-down-from-top-enter-to,
+.slide-down-from-top-leave-from {
+  transform: translateY(0);
+}

package/src/assets/css/dynamic-buttons.css

@@ -0,0 +1,79 @@
+.tide-link-as-button,
+.tide-button {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.tide-link-as-button.tide-button-quaternary,
+.tide-button.tide-button-quaternary {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+/* Rest State */
+.tide-button-primary {
+  background: var(--tide-primary);
+  border: 2px solid var(--tide-primary);
+  color: var(--tide-on-primary);
+}
+
+.tide-button-secondary {
+  background: 2px solid var(--tide-surface);
+  border: 2px solid var(--tide-primary);
+  color: var(--tide-primary);
+}
+
+.tide-button-tertiary {
+  background: var(--tide-white);
+  border: 1px solid var(--tide-border);
+  color: var(--tide-secondary);
+}
+
+.tide-button-quaternary {
+  background: var(--tide-white);
+  color: var(--tide-secondary);
+}
+
+.tide-button-floating {
+  background-color: var(--tide-transparent-100);
+  color: var(--tide-secondary);
+  box-shadow: var(--tide-shadow-bottom);
+}
+
+/* Hover State */
+a.tide-button-primary:hover,
+button.tide-button-primary:enabled:hover {
+  border: 2px solid var(--tide-primary);
+  background: 2px solid var(--tide-white);
+  color: var(--tide-primary);
+}
+
+a.tide-button-secondary:hover,
+button.tide-button-secondary:enabled:hover {
+  background: var(--tide-primary);
+  color: var(--tide-on-primary);
+}
+
+a.tide-button-tertiary:hover,
+button.tide-button-tertiary:enabled:hover {
+  border: 1px solid var(--tide-border-high);
+}
+
+a.tide-button-quaternary:hover,
+button.tide-button-quaternary:enabled:hover {
+  background: var(--tide-surface-variant);
+}
+
+.tide-button-floating:hover,
+button.tide-button-floating:enabled:hover {
+  background-color: var(--tide-white);
+}
+
+/* Disabled State */
+button.tide-button-primary:disabled,
+button.tide-button-secondary:disabled,
+button.tide-button-tertiary:disabled,
+button.tide-button-quaternary:disabled,
+button.tide-button-floating:disabled {
+  opacity: 0.32;
+}

package/src/assets/css/dynamic-utilities.css

@@ -0,0 +1,39 @@
+/* Background */
+.tide-bg-primary   {background: var(--tide-primary);}
+.tide-bg-secondary {background: var(--tide-secondary);}
+
+.tide-bg-surface                {background: var(--tide-surface);}
+.tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+.tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+.tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+.tide-bg-surface-accent-variant {background: var(--tide-surface-accent-variant);}
+.tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+.tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+.tide-bg-surface-error   {background-color: var(--tide-error-surface);}
+.tide-bg-surface-info    {background-color: var(--tide-info-surface);}
+.tide-bg-surface-success {background-color: var(--tide-success-surface);}
+.tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
+
+.tide-bg-error   {background-color: var(--tide-error-primary);}
+.tide-bg-info    {background-color: var(--tide-info-primary);}
+.tide-bg-success {background-color: var(--tide-success-primary);}
+.tide-bg-warning {background-color: var(--tide-warning-primary);}
+
+/* Border */
+.tide-border-primary   {border-color: var(--tide-primary);}
+
+.tide-border          {border-color: var(--tide-border);}
+.tide-border-low      {border-color: var(--tide-border-low);}
+.tide-border-high     {border-color: var(--tide-border-high);}
+.tide-border-floating {border-color: var(--tide-border-floating);}
+
+/* Foreground */
+.tide-font-on-primary   {color: var(--tide-on-primary);}
+.tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+.tide-font-on-surface                 {color: var(--tide-on-surface);}
+.tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+.tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+.tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+.tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}

package/src/assets/css/grid-layout.css

@@ -0,0 +1,71 @@
+:root {
+  --tide-1232px: 73rem;
+  --tide-1920px: 120rem;
+}
+
+.tide-grid-layout {
+  --tide-max-content-width:   var(--tide-1232px);
+  --tide-column-count:        12;
+  --tide-column-width:        minmax(0, calc((var(--tide-max-content-width) - var(--tide-gap-count) * var(--tide-gap-width)) / var(--tide-column-count)));
+  --tide-gap-count:           calc(var(--tide-column-count) - 1);
+  --tide-gap-width:           var(--tide-spacing-1);
+  --tide-gutter-width:        var(--tide-spacing-1);
+  --tide-gutter-width-offset: calc(var(--tide-gutter-width) - var(--tide-gap-width));
+}
+
+@media (min-width: 768px) {
+  .tide-grid-layout {
+    --tide-gutter-width: var(--tide-spacing-2);
+  }
+}
+
+@media (min-width: 992px) {
+  .tide-grid-layout {
+    --tide-gap-width: var(--tide-spacing-2);
+  }
+}
+
+.tide-grid-xl {
+  --tide-max-content-width: var(--tide-1920px);
+}
+
+.tide-grid-layout {
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-template-columns:
+    minmax(var(--tide-gutter-width-offset), 1fr)
+    repeat(12, var(--tide-column-width))
+    minmax(var(--tide-gutter-width-offset), 1fr);
+  gap: var(--tide-spacing-1) var(--tide-gap-width);
+}
+
+.tide-grid-layout > * {grid-column: 2 / -2;}
+.tide-fluid           {grid-column: 1 / -1;}
+
+.tide-start-0  {grid-column-start: 1;}
+.tide-start-1  {grid-column-start: 2;}
+.tide-start-2  {grid-column-start: 3;}
+.tide-start-3  {grid-column-start: 4;}
+.tide-start-4  {grid-column-start: 5;}
+.tide-start-5  {grid-column-start: 6;}
+.tide-start-6  {grid-column-start: 7;}
+.tide-start-7  {grid-column-start: 8;}
+.tide-start-8  {grid-column-start: 9;}
+.tide-start-9  {grid-column-start: 10;}
+.tide-start-10 {grid-column-start: 11;}
+.tide-start-11 {grid-column-start: 12;}
+.tide-start-12 {grid-column-start: 13;}
+
+.tide-end-1  {grid-column-end: 3;}
+.tide-end-2  {grid-column-end: 4;}
+.tide-end-3  {grid-column-end: 5;}
+.tide-end-4  {grid-column-end: 6;}
+.tide-end-5  {grid-column-end: 7;}
+.tide-end-6  {grid-column-end: 8;}
+.tide-end-7  {grid-column-end: 9;}
+.tide-end-8  {grid-column-end: 10;}
+.tide-end-9  {grid-column-end: 11;}
+.tide-end-10 {grid-column-end: 12;}
+.tide-end-11 {grid-column-end: 13;}
+.tide-end-12 {grid-column-end: 14;}
+.tide-end-13 {grid-column-end: 15;}

package/src/assets/css/main.css

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

package/src/assets/css/realm/aero.css

@@ -0,0 +1,42 @@
+/* Aero Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-color1: #4e9ac8;
+  --tide-color2: #006C97;
+  --tide-color3: #83CBFB;
+
+  --tide-bg-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-color3) 50%,
+    var(--tide-color2) 150%
+  );
+
+  --tide-floating: rgba(255, 255, 255, 0);
+
+  /* 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-color1);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-color1);
+  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent-variant: var(--tide-color3);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-color1);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-400);
+  --tide-border-low:      var(--tide-gray-600);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
+}

package/src/assets/css/realm/atv.css

@@ -0,0 +1,43 @@
+/* ATV Trader Realm Colors */
+:root {
+    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+    --tide-charcoal: #33383B;
+    --tide-maroon:   #9B2702;
+    --tide-orange:   #C7521A;
+    --tide-peach:    #EFBA88;
+
+    --tide-bg-gradient: linear-gradient(
+      to bottom right,
+      var(--tide-charcoal) 50%,
+      var(--tide-peach) 150%
+    );
+
+    --tide-floating: rgba(0, 0, 0, 0);
+
+  /* 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-orange);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-charcoal);
+  --tide-surface-accent:         var(--tide-peach);
+  --tide-surface-accent-variant: var(--tide-maroon);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-orange);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
+}

package/src/assets/css/realm/boatmart.css

@@ -0,0 +1,42 @@
+/* Boatmart Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-navy: #1D4977;
+  --tide-mint:  #46CFD1;
+  --tide-sand:  #FFCF86;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-mint) 50%,
+    var(--tide-sand) 150%
+  );
+
+  --tide-floating: rgba(255, 255, 255, 0);
+
+  /* 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-navy);
+  --tide-on-primary: var(--tide-gray-100);
+
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-navy);
+  --tide-surface-accent:         var(--tide-sand);
+  --tide-surface-accent-variant: var(--tide-mint);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-gray-900);
+  --tide-on-surface-variant: var(--tide-gray-700);
+  --tide-on-surface-brand:   var(--tide-navy);
+
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-gray-300);
+}

package/src/assets/css/realm/cycle.css

@@ -0,0 +1,42 @@
+/* Cycle Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-pure-black:  #000000;
+  --tide-red: #C50000;
+  --tide-steel-blue:   #C9DDE5;
+
+  --tide-bg-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-steel-blue) 50%,
+    var(--tide-red) 150%
+  );
+
+  --tide-floating: rgba(255, 255, 255, 0);
+
+  /* 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-pure-black);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-pure-black);
+  --tide-surface-accent:         var(--tide-red);
+  --tide-surface-accent-variant: var(--tide-steel-blue);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-pure-black);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-400);
+  --tide-border-low:      var(--tide-gray-600);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
+}

package/src/assets/css/realm/equip.css

@@ -0,0 +1,42 @@
+/* Equipment Trader Realm Colors */
+:root {
+    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+    --tide-evergreen: #468200;
+    --tide-steel:     #494949;
+    --tide-yellow:    #FFCE34;
+
+    --tide-bg-gradient: linear-gradient(
+      to bottom right,
+      var(--tide-evergreen) 50%,
+      var(--tide-yellow) 150%
+    );
+
+  --tide-floating: rgba(255, 255, 255, 0);
+
+  /* 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-steel);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-steel);
+  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent-variant: var(--tide-evergreen);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-steel);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-400);
+  --tide-border-low:      var(--tide-gray-600);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
+}

package/src/assets/css/realm/pwc.css

@@ -0,0 +1,42 @@
+/* PWC Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-color1: #0B72B8;
+  --tide-color2: #085487;
+  --tide-color3: #59A0EB;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-color2) 50%,
+    var(--tide-color3) 150%
+  );
+
+  --tide-floating: rgba(255, 255, 255, 0);
+
+  /* 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-color1);
+  --tide-on-primary: var(--tide-gray-100);
+
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-color1);
+  --tide-surface-accent:         var(--tide-color3);
+  --tide-surface-accent-variant: var(--tide-color2);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-gray-900);
+  --tide-on-surface-variant: var(--tide-gray-700);
+  --tide-on-surface-brand:   var(--tide-color1);
+
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-gray-300);
+}