@phila/phila-ui-core 2.1.1 → 2.2.0-beta.2

package/dist/styles/elements/buttons.css

@@ -0,0 +1,230 @@
+.phila-button {
+  /* --- Base styles --- */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  /* --- Text styles --- */
+  color: var(--Schemes-On-Primary-Container);
+  font-family: var(--Label-Default-font-label-default-family, Montserrat);
+  font-size: var(--Label-Default-font-label-default-size, 1rem);
+  font-style: normal;
+  font-weight: 600;
+  line-height: var(--Label-Default-font-label-default-lineheight);
+
+  /* --- Reset button --- */
+  border: none;
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+  -webkit-appearance: none;
+
+  /* --- Reset link styles --- */
+  text-decoration: none;
+
+  /* Prevent visited link color changes - maintain button color */
+  &:visited:not(:hover):not(:focus):not(:active) {
+    color: var(--Schemes-On-Primary-Container);
+  }
+
+  /* ---  Sizing --- */
+  height: var(--spacing-6xl, 3.25rem);
+  max-width: 18.75rem;
+  padding: var(--spacing-l, 0.5rem) var(--spacing-3xl);
+
+  &.is-medium {
+    height: var(--spacing-5xl, 3rem);
+    padding: var(--spacing-m, 0.75rem) var(--spacing-xxl);
+  }
+  &.is-small {
+    height: var(--spacing-3xl);
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  &.is-extra-small:not(.icon-button) {
+    color: var(--Schemes-Primary-Container);
+    height: var(--spacing-xxl);
+    padding: var(--spacing-xxs);
+    background-color: var(--Schemes-Surface-Container-Lowest) !important;
+    font-family: var(--Label-Default-font-label-default-family, Montserrat);
+    font-size: var(--Label-Small-font-label-small-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Label-Small-font-label-small-lineheight);
+    border-color: var(--Schemes-Surface-Container-Lowest);
+    border-width: var(--spacing-xxs);
+    border-style: solid;
+    box-sizing: border-box;
+    border-left: none;
+    border-right: none;
+    &:focus:not(:disabled),
+    &:hover:not(:disabled) {
+      --Schemes-On-Primary-Container: --Schemes-Inverse-Surface;
+      color: var(--Schemes-Inverse-Surface) !important;
+      border-bottom-color: var(--Schemes-Inverse-Surface) !important;
+    }
+    &:active:not(:disabled) {
+      color: var(--Schemes-Secondary-Container) !important;
+      box-sizing: border-box;
+      border: none;
+    }
+    &:disabled {
+      color: var(--Schemes-Surface-Container-High);
+    }
+    &.phila-button--destructive:not(:active) {
+      color: var(--Schemes-Error-Container);
+    }
+    &:visited:not(:hover):not(:focus):not(:active) {
+      color: var(--Schemes-Primary-Container);
+    }
+    &.phila-button--destructive:visited:not(:hover):not(:focus):not(:active) {
+      color: var(--Schemes-Error-Container);
+    }
+  }
+  /* ---  States --- */
+  &:hover:not(:disabled):not(.is-extra-small),
+  &:focus:not(:disabled):not(.is-extra-small),
+  &.icon-button:hover:not(:disabled),
+  &.icon-button:focus:not(:disabled) {
+    &:not(:active):not(.phila-button--secondary):not(.icon-button--standard) {
+      background: var(--Schemes-On-Surface-Variant) !important;
+      color: var(--Schemes-On-Primary-Container) !important;
+    }
+  }
+  &:active:not(:disabled):not(.is-extra-small) {
+    color: var(--Schemes-On-Primary-Container) !important;
+    background: var(--Schemes-Secondary-Container) !important;
+  }
+  &:disabled,
+  &[aria-disabled="true"] {
+    background: var(--Schemes-Surface-Container-High) !important;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ---  Variants --- */
+  &.phila-button--primary:not(:disabled) {
+    background: var(--Schemes-Primary-Container);
+  }
+
+  &.phila-button--secondary:not(:disabled) {
+    color: var(--Schemes-Primary);
+    background: var(--Schemes-Surface-Container-Lowest);
+    &:not(:active) {
+      border: var(--spacing-xxs) solid var(--Schemes-Primary);
+    }
+    &:active:not(:disabled):not(.is-extra-small) {
+      border-right: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
+      border-left: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
+    }
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+      color: var(--Schemes-On-Primary-Container);
+      background: var(--Schemes-On-Surface-Variant);
+    }
+    &:visited:not(:hover):not(:focus):not(:active) {
+      color: var(--Schemes-Primary);
+    }
+  }
+
+  &.phila-button--destructive:not(:disabled) {
+    &:not(.is-extra-small) {
+      background: var(--Schemes-Error-Container);
+    }
+  }
+
+  /* ---  Icon Buttons --- */
+  &.icon-button {
+    padding: 0;
+    height: 3.75rem;
+    width: 3.75rem;
+
+    &.is-extra-large {
+      height: 5rem;
+      width: 5rem;
+    }
+
+    &.is-large {
+      height: 3.75rem;
+      width: 3.75rem;
+    }
+
+    &.is-medium {
+      height: 3rem;
+      width: 3rem;
+    }
+
+    &.is-small {
+      height: 2rem;
+      width: 2rem;
+    }
+
+    &.is-extra-small {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &.icon-button--standard:not(:disabled) {
+      color: var(--Schemes-Primary, #003282);
+      background: var(--Schemes-Surface-Container-Lowest);
+      &:visited:not(:hover):not(:focus):not(:active) {
+        color: var(--Schemes-Primary, #003282);
+      }
+    }
+    &.phila-button--destructive:not(:disabled) {
+      color: var(--Schemes-On-Error-Container) !important;
+      background: var(--Schemes-Error-Container);
+    }
+    &:active:not(:disabled) {
+      color: var(--Schemes-On-Secondary-Container) !important;
+      background: var(--Schemes-Secondary-Container) !important;
+      box-sizing: border-box;
+      border: none;
+    }
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+      &.phila-button--secondary,
+      &.icon-button--standard {
+        color: var(--Schemes-Primary);
+        background: var(--Schemes-Surface-Container);
+        border-color: transparent;
+      }
+    }
+  }
+
+  /* Icon positioning within buttons */
+  span.icon:first-child:not(:last-child) {
+    margin-left: 0;
+    margin-right: var(--spacing-s);
+    + span {
+      padding-right: var(--spacing-s);
+    }
+  }
+  span.icon:last-child:not(:first-child) {
+    margin: 0;
+    padding: 0;
+  }
+  span:not([class="icon"]:only-child) {
+    padding: 0 !important;
+  }
+  span:first-child:not([class="icon"]) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: var(--spacing-s);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    + span {
+      margin-left: var(--spacing-s) !important;
+    }
+  }
+  &:focus {
+    outline-offset: var(--spacing-xs);
+    outline: var(--stroke-stroke-thin, 2px) solid var(--Schemes-Primary-Container);
+  }
+}

package/dist/styles/elements/icons.css

@@ -0,0 +1,53 @@
+/* Base icon styles */
+.phila-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+  font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
+  height: 2rem;
+  width: 2rem;
+  padding: var(--spacing-s);
+}
+
+/* Icon size variants */
+.phila-icon--extra-large {
+  font-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
+  height: 5rem;
+  width: 5rem;
+  padding: var(--spacing-xl);
+}
+
+.phila-icon--large {
+  font-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
+  height: 3.75rem;
+  width: 3.75rem;
+  padding: var(--spacing-m);
+}
+
+.phila-icon--medium {
+  font-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
+  height: 3rem;
+  width: 3rem;
+  padding: var(--spacing-m);
+}
+
+.phila-icon--small {
+  font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
+  height: 2rem;
+  width: 2rem;
+  padding: var(--spacing-s);
+}
+
+.phila-icon--extra-small {
+  font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
+  height: 1.5rem;
+  width: 1.5rem;
+  padding: var(--scale-xsmall);
+}
+
+.phila-icon.phila-icon--inline {
+  padding: 0;
+}

package/dist/styles/elements/index.css

@@ -0,0 +1,3 @@
+@import "./buttons.css";
+@import "./icons.css";
+@import "./links.css";

package/dist/styles/elements/links.css

@@ -0,0 +1,87 @@
+/* Base link component styles */
+.phila-link {
+  color: var(--Extended-Colors-link-default, #2176d2);
+  text-decoration: underline;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
+
+  /* Variant - sets CSS variables (same as .has-background-primary does for containers) */
+  &.phila-link--on-primary {
+    --Extended-Colors-link-default: var(--Extended-Colors-link-default-on-primary);
+    --Extended-Colors-link-hover: var(--Extended-Colors-link-hover-on-primary);
+    --Extended-Colors-link-visited: var(--Extended-Colors-link-visited-on-primary);
+  }
+
+  /* Pseudo-classes - LVHA order: visited before hover so hover wins */
+  &:visited {
+    color: var(--Extended-Colors-link-visited, #4b0083);
+    text-decoration-color: var(--Extended-Colors-link-visited, #4b0083);
+  }
+
+  &:hover {
+    color: var(--Extended-Colors-link-hover, #000);
+    text-decoration-color: var(--Extended-Colors-link-hover, #000);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--Extended-Colors-link-hover, #000);
+    outline-offset: 2px;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &.icon-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs, 0.25rem);
+  }
+
+  /* Size variants */
+  &.is-extra-large {
+    font-family: var(--Link-on-Surface-Large-font-link-on-surface-large-family, Montserrat);
+    font-size: var(--Link-on-Surface-Large-font-link-on-surface-large-size, 1.125rem);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--Link-on-Surface-Large-font-link-on-surface-large-lineheight, 1.75rem);
+  }
+
+  &.is-large {
+    font-family: var(--Link-on-Surface-Large-font-link-on-surface-large-family, Montserrat);
+    font-size: var(--Link-on-Surface-Large-font-link-on-surface-large-size, 1.125rem);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--Link-on-Surface-Large-font-link-on-surface-large-lineheight, 1.75rem);
+  }
+
+  &.is-medium {
+    font-family: var(--Link-on-Surface-Default-font-link-on-surface-default-family, Montserrat);
+    font-size: var(--Link-on-Surface-Default-font-link-on-surface-default-size, 1rem);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--Link-on-Surface-Default-font-link-on-surface-default-lineheight, 1.5rem);
+  }
+
+  &.is-small {
+    font-family: var(--Link-on-Surface-Small-font-link-on-surface-small-family, Montserrat);
+    font-size: var(--Link-on-Surface-Small-font-link-on-surface-small-size, 0.875rem);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--Link-on-Surface-Small-font-link-on-surface-small-lineheight, 1.25rem);
+  }
+
+  &.is-extra-small {
+    font-family: var(--Link-on-Surface-font-link-family, Montserrat);
+    font-size: var(--Link-on-Surface-ExtraSmall-font-link-on-surface-xs-size, 0.75rem);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--Body-ExtraSmall-font-body-xs-lineheight, 1rem);
+  }
+}

package/dist/styles/generated/extended-colors.css

@@ -0,0 +1,11 @@
+:root {
+  /* extended-colors */
+  /* Generated from Figma CSS export - references preserved */
+
+  --Extended-Colors-Black: var(--black-400-black);
+  --Extended-Colors-Black-Container: var(--black-450-black);
+  --Extended-Colors-link-default: var(--Schemes-Primary);
+  --Extended-Colors-link-hover: var(--Schemes-On-Surface);
+  --Extended-Colors-link-visited: var(--Palettes-Visited-Visited-450);
+  --Extended-Colors-White: var(--white-400-white);
+}

package/dist/styles/generated/other.css

@@ -0,0 +1,111 @@
+:root {
+  /* other */
+  /* Generated from Figma CSS export - references preserved */
+
+  --border-left-right: 0;
+  --border-radius-l: var(--sizes-scale-200);
+  --border-radius-m: var(--sizes-scale-150);
+  --border-radius-s: var(--sizes-scale-100);
+  --border-radius-xl: var(--sizes-scale-300);
+  --border-radius-xs: var(--sizes-scale-50);
+  --border-top-bottom: 0;
+  --border-width-2xl: var(--sizes-scale-100);
+  --border-width-2xs: var(--sizes-xxsmall);
+  --border-width-l: var(--sizes-scale-50);
+  --border-width-m: var(--sizes-scale-25);
+  --border-width-s: var(--sizes-scale-10);
+  --border-width-xl: var(--sizes-scale-75);
+  --border-width-xs: var(--sizes-scale-0);
+  --Breadcrumb-Boolean: 0;
+  --Breadcrumb-Chevron-Visible: 0;
+  --Breadcrumb-Home-Visible: 1;
+  --Breadcrumb-Link-1: "Services";
+  --Breadcrumb-Link-2: "Cars, parking & transportation";
+  --Breadcrumb-Link-3: "Apply for a parking permit";
+  --Breadcrumb-Link-4: "Link 4";
+  --Breadcrumb-Link-5: "Link 5";
+  --Breadcrumb-Link-6: "Link 6";
+  --Breadcrumb-Links-Visible: 1;
+  --Breadcrumb-Text: "Apply for a Temporary No Parking (TNP) permit";
+  --Breadcrumb-Text-Visible: 1;
+  --breakpoints-2xl: 1920px;
+  --breakpoints-l: 1024px;
+  --breakpoints-m: 768px;
+  --breakpoints-s: 375px;
+  --breakpoints-xl: 1440px;
+  --breakpoints-xs: 162px;
+  --button-buttom-tertiary: 1;
+  --button-button: 1;
+  --button-button-primary: 1;
+  --button-button-secondary: 1;
+  --Card-media-exdent: 0;
+  --checkbox: 1;
+  --content-color: var(--Schemes-On-Surface);
+  --date: 1;
+  --dimension-core-0: 0;
+  --dimension-core-100: 8px;
+  --dimension-core-1000: 80px;
+  --dimension-core-150: 12px;
+  --dimension-core-175: 14px;
+  --dimension-core-200: 16px;
+  --dimension-core-25: 2px;
+  --dimension-core-250: 20px;
+  --dimension-core-300: 24px;
+  --dimension-core-400: 32px;
+  --dimension-core-50: 4px;
+  --dimension-core-500: 40px;
+  --dimension-core-600: 48px;
+  --dimension-core-75: 6px;
+  --dimension-core-800: 64px;
+  --flag-layout: "Standard";
+  --Footer-Column-1-City-Commissioners: "City Commissioners";
+  --Footer-Column-1-City-Controller: "City Controller";
+  --Footer-Column-1-City-Council: "City Council";
+  --Footer-Column-1-Courts: "Courts";
+  --Footer-Column-1-District-Attorney: "District Attorney";
+  --Footer-Column-1-Mayor: "Mayor";
+  --Footer-Column-1-Register-of-Wills: "Register of Wills";
+  --Footer-Column-1-Sheriff: "Sheriff";
+  --Footer-Column-2-City-agency-regulations: "City agency regulations";
+  --Footer-Column-2-City-organization-chart: "City organization chart";
+  --Footer-Column-2-City-records: "City records";
+  --Footer-Column-2-Executive-orders: "Executive orders";
+  --Footer-Column-2-Honesty-in-government: "Honesty in government";
+  --Footer-Column-2-Open-data: "Open data";
+  --Footer-Column-2-Philadelphia-Code-Charter: "Philadelphia Code & Charter";
+  --Footer-Column-2-Voting-and-elections: "Voting & elections";
+  --Footer-Column-3-SEPTA: "SEPTA";
+  --Footer-Column-3-Visit-Philadelphia: "Visit Philadelphia";
+  --Footer-Footer-Icon: 1;
+  --Footer-footer-width: 1440px;
+  --Footer-horz-rule: 0;
+  --Footer-Sub-Footer-Accessibility: "Accessibility";
+  --Footer-Sub-Footer-Privacy-policy: "Privacy policy";
+  --Footer-Sub-Footer-Right-to-know: "Right to know";
+  --Footer-Sub-Footer-Terms-of-use: "Terms of use";
+  --Footer-vert-rule: 1;
+  --Header-Content-Language-LInk-Label: "English";
+  --Header-Content-Trusted-Banner-Copy: "Here's how you know";
+  --Header-Content-Trusted-Banner-Icon: "caret-down";
+  --Header-Display-Language-Links-Visible: 1;
+  --Header-Display-Mayor-Link-Visible: 1;
+  --Header-Display-Mobile-Globe-Visible: 0;
+  --Header-Display-Nav-Link-Visible: 1;
+  --Header-Display-Trusted-Banner-Text-Visible: 1;
+  --Header-Menu-Button-Color: rgb(255, 255, 255);
+  --Header-Size-Header-Width: 1440px;
+  --headline: 1;
+  --height: 1064px;
+  --Hover-Alternative-Nested-Off: 0;
+  --Hover-Alternative-Nested-On: 1;
+  --Icon-bars: "bars";
+  --image: 1;
+  --link: 1;
+  --Links-Color: rgb(255, 255, 255);
+  --media: 1;
+  --play-button: 1;
+  --radius: var(--border-radius-l);
+  --surface-color: var(--Schemes-Surface-Bright);
+  --top-icon: 1;
+  --width: 640px;
+}

package/dist/styles/generated/palettes.css

@@ -0,0 +1,140 @@
+:root {
+  /* palettes */
+  /* Generated from Figma CSS export - references preserved */
+
+  --Palettes-Alert-Alert-100: var(--bell-yellow-100-bell-yellow);
+  --Palettes-Alert-Alert-150: var(--bell-yellow-150-bell-yellow);
+  --Palettes-Alert-Alert-200: var(--bell-yellow-200-bell-yellow);
+  --Palettes-Alert-Alert-250: var(--bell-yellow-250-bell-yellow);
+  --Palettes-Alert-Alert-300: var(--bell-yellow-300-bell-yellow);
+  --Palettes-Alert-Alert-350: var(--bell-yellow-350-bell-yellow);
+  --Palettes-Alert-Alert-400: var(--bell-yellow-400-bell-yellow);
+  --Palettes-Alert-Alert-450: var(--bell-yellow-450-bell-yellow);
+  --Palettes-Alert-Alert-50: var(--bell-yellow-50-bell-yellow);
+  --Palettes-Alert-Alert-500: var(--bell-yellow-500-bell-yellow);
+  --Palettes-Alert-Alert-550: var(--bell-yellow-550-bell-yellow);
+  --Palettes-Alert-Alert-600: var(--bell-yellow-600-bell-yellow);
+  --Palettes-Alert-Alert-650: var(--bell-yellow-650-bell-yellow);
+  --Palettes-Alert-Alert-700: var(--bell-yellow-700-bell-yellow);
+  --Palettes-Alert-Alert-750: var(--bell-yellow-750-bell-yellow);
+  --Palettes-Error-Error-100: var(--red-100-red);
+  --Palettes-Error-Error-150: var(--red-150-red);
+  --Palettes-Error-Error-200: var(--red-200-red);
+  --Palettes-Error-Error-250: var(--red-250-red);
+  --Palettes-Error-Error-300: var(--red-300-red);
+  --Palettes-Error-Error-350: var(--red-350-red);
+  --Palettes-Error-Error-400: var(--red-400-red);
+  --Palettes-Error-Error-450: var(--red-450-red);
+  --Palettes-Error-Error-50: var(--red-50-red);
+  --Palettes-Error-Error-500: var(--red-500-red);
+  --Palettes-Error-Error-550: var(--red-550-red);
+  --Palettes-Error-Error-600: var(--red-600-red);
+  --Palettes-Error-Error-650: var(--red-650-red);
+  --Palettes-Error-Error-700: var(--red-700-red);
+  --Palettes-Error-Error-750: var(--red-750-red);
+  --Palettes-Neutral-Neutral-100: var(--medium-grey-100-medium-grey);
+  --Palettes-Neutral-Neutral-150: var(--medium-grey-150-medium-grey);
+  --Palettes-Neutral-Neutral-200: var(--medium-grey-200-medium-grey);
+  --Palettes-Neutral-Neutral-250: var(--medium-grey-250-medium-grey);
+  --Palettes-Neutral-Neutral-300: var(--medium-grey-300-medium-grey);
+  --Palettes-Neutral-Neutral-350: var(--medium-grey-350-medium-grey);
+  --Palettes-Neutral-Neutral-400: var(--medium-grey-400-medium-grey);
+  --Palettes-Neutral-Neutral-450: var(--medium-grey-450-medium-grey);
+  --Palettes-Neutral-Neutral-50: var(--medium-grey-50-medium-grey);
+  --Palettes-Neutral-Neutral-500: var(--medium-grey-500-medium-grey);
+  --Palettes-Neutral-Neutral-550: var(--medium-grey-550-medium-grey);
+  --Palettes-Neutral-Neutral-600: var(--medium-grey-600-medium-grey);
+  --Palettes-Neutral-Neutral-650: var(--medium-grey-650-medium-grey);
+  --Palettes-Neutral-Neutral-700: var(--medium-grey-700-medium-grey);
+  --Palettes-Neutral-Neutral-750: var(--medium-grey-750-medium-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-100: var(--dark-grey-100-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-150: var(--dark-grey-150-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-200: var(--dark-grey-200-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-250: var(--dark-grey-250-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-300: var(--dark-grey-300-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-350: var(--dark-grey-350-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-400: var(--dark-grey-400-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-450: var(--dark-grey-450-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-50: var(--dark-grey-50-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-500: var(--dark-grey-500-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-550: var(--dark-grey-550-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-600: var(--dark-grey-600-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-650: var(--dark-grey-650-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-700: var(--dark-grey-700-dark-grey);
+  --Palettes-Neutral-Variant-Neutral-Variant-750: var(--dark-grey-750-dark-grey);
+  --Palettes-Primary-Primary-100: var(--blue-100-blue);
+  --Palettes-Primary-Primary-150: var(--blue-150-blue);
+  --Palettes-Primary-Primary-200: var(--blue-200-blue);
+  --Palettes-Primary-Primary-250: var(--blue-250-blue);
+  --Palettes-Primary-Primary-300: var(--blue-300-blue);
+  --Palettes-Primary-Primary-350: var(--blue-350-blue);
+  --Palettes-Primary-Primary-400: var(--blue-400-blue);
+  --Palettes-Primary-Primary-450: var(--blue-450-blue);
+  --Palettes-Primary-Primary-50: var(--blue-50-blue);
+  --Palettes-Primary-Primary-500: var(--blue-500-blue);
+  --Palettes-Primary-Primary-550: var(--blue-550-blue);
+  --Palettes-Primary-Primary-600: var(--blue-600-blue);
+  --Palettes-Primary-Primary-650: var(--blue-650-blue);
+  --Palettes-Primary-Primary-700: var(--blue-700-blue);
+  --Palettes-Primary-Primary-750: var(--blue-750-blue);
+  --Palettes-Secondary-Secondary-100: var(--dark-blue-100-dark-blue);
+  --Palettes-Secondary-Secondary-150: var(--dark-blue-150-dark-blue);
+  --Palettes-Secondary-Secondary-200: var(--dark-blue-200-dark-blue);
+  --Palettes-Secondary-Secondary-250: var(--dark-blue-250-dark-blue);
+  --Palettes-Secondary-Secondary-300: var(--dark-blue-300-dark-blue);
+  --Palettes-Secondary-Secondary-350: var(--dark-blue-350-dark-blue);
+  --Palettes-Secondary-Secondary-400: var(--dark-blue-400-dark-blue);
+  --Palettes-Secondary-Secondary-450: var(--dark-blue-450-dark-blue);
+  --Palettes-Secondary-Secondary-50: var(--dark-blue-50-dark-blue);
+  --Palettes-Secondary-Secondary-500: var(--dark-blue-500-dark-blue);
+  --Palettes-Secondary-Secondary-550: var(--dark-blue-550-dark-blue);
+  --Palettes-Secondary-Secondary-600: var(--dark-blue-600-dark-blue);
+  --Palettes-Secondary-Secondary-650: var(--dark-blue-650-dark-blue);
+  --Palettes-Secondary-Secondary-700: var(--dark-blue-700-dark-blue);
+  --Palettes-Secondary-Secondary-750: var(--dark-blue-750-dark-blue);
+  --Palettes-Success-Success-100: var(--green-100-green);
+  --Palettes-Success-Success-150: var(--green-150-green);
+  --Palettes-Success-Success-200: var(--green-200-green);
+  --Palettes-Success-Success-250: var(--green-250-green);
+  --Palettes-Success-Success-300: var(--green-300-green);
+  --Palettes-Success-Success-350: var(--green-350-green);
+  --Palettes-Success-Success-400: var(--green-400-green);
+  --Palettes-Success-Success-450: var(--green-450-green);
+  --Palettes-Success-Success-50: var(--green-50-green);
+  --Palettes-Success-Success-500: var(--green-500-green);
+  --Palettes-Success-Success-550: var(--green-550-green);
+  --Palettes-Success-Success-600: var(--green-600-green);
+  --Palettes-Success-Success-650: var(--green-650-green);
+  --Palettes-Success-Success-700: var(--green-700-green);
+  --Palettes-Success-Success-750: var(--green-750-green);
+  --Palettes-Tertiary-Tertiary-100: var(--light-blue-100-light-blue);
+  --Palettes-Tertiary-Tertiary-150: var(--light-blue-150-light-blue);
+  --Palettes-Tertiary-Tertiary-200: var(--light-blue-200-light-blue);
+  --Palettes-Tertiary-Tertiary-250: var(--light-blue-250-light-blue);
+  --Palettes-Tertiary-Tertiary-300: var(--light-blue-300-light-blue);
+  --Palettes-Tertiary-Tertiary-350: var(--light-blue-350-light-blue);
+  --Palettes-Tertiary-Tertiary-400: var(--light-blue-400-light-blue);
+  --Palettes-Tertiary-Tertiary-450: var(--light-blue-450-light-blue);
+  --Palettes-Tertiary-Tertiary-50: var(--light-blue-50-light-blue);
+  --Palettes-Tertiary-Tertiary-500: var(--light-blue-500-light-blue);
+  --Palettes-Tertiary-Tertiary-550: var(--light-blue-550-light-blue);
+  --Palettes-Tertiary-Tertiary-600: var(--light-blue-600-light-blue);
+  --Palettes-Tertiary-Tertiary-650: var(--light-blue-650-light-blue);
+  --Palettes-Tertiary-Tertiary-700: var(--light-blue-700-light-blue);
+  --Palettes-Tertiary-Tertiary-750: var(--light-blue-750-light-blue);
+  --Palettes-Visited-Visited-100: var(--purple-100-purple);
+  --Palettes-Visited-Visited-150: var(--purple-150-purple);
+  --Palettes-Visited-Visited-200: var(--purple-200-purple);
+  --Palettes-Visited-Visited-250: var(--purple-250-purple);
+  --Palettes-Visited-Visited-300: var(--purple-300-purple);
+  --Palettes-Visited-Visited-350: var(--purple-350-purple);
+  --Palettes-Visited-Visited-400: var(--purple-400-purple);
+  --Palettes-Visited-Visited-450: var(--purple-450-purple);
+  --Palettes-Visited-Visited-50: var(--purple-50-purple);
+  --Palettes-Visited-Visited-500: var(--purple-500-purple);
+  --Palettes-Visited-Visited-550: var(--purple-550-purple);
+  --Palettes-Visited-Visited-600: var(--purple-600-purple);
+  --Palettes-Visited-Visited-650: var(--purple-650-purple);
+  --Palettes-Visited-Visited-700: var(--purple-700-purple);
+  --Palettes-Visited-Visited-750: var(--purple-750-purple);
+}