@phila/phila-ui-core 2.1.2 → 2.2.0-beta.3

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/legacy.css

@@ -0,0 +1,39 @@
+/**
+ * Backwards Compatibility Aliases
+ *
+ * This file provides aliases for old variable names to maintain
+ * backwards compatibility with existing code.
+ *
+ * Mapping old names → new generated token names
+ */
+
+:root {
+  /* Old --spacing-* variables → new --sizes-* */
+  --spacing-xxs: var(--sizes-5xsmall); /* 0.125rem */
+  --spacing-xs: var(--sizes-4xsmall); /* 0.25rem */
+  --spacing-s: var(--sizes-3xsmall); /* 0.5rem */
+  --spacing-m: var(--sizes-xxsmall); /* 0.75rem */
+  --spacing-l: var(--sizes-medium); /* 1rem */
+  --spacing-xl: var(--sizes-large); /* 1.125rem */
+  --spacing-xxl: var(--sizes-xxlarge); /* 1.5rem */
+  --spacing-3xl: var(--sizes-3xlarge); /* 2rem */
+  --spacing-4xl: var(--sizes-4xlarge); /* 2.5rem */
+  --spacing-5xl: var(--sizes-5xlarge); /* 3rem */
+  --spacing-6xl: var(--sizes-6xlarge); /* 3.5rem */
+  --spacing-7xl: var(--sizes-7xlarge); /* 4rem */
+
+  /* Old --scale-* variables → new --sizes-scale-* */
+  --scale-xxsmall: var(--sizes-scale-25); /* 0.125rem */
+  --scale-xsmall: var(--sizes-scale-50); /* 0.25rem */
+  --scale-small: var(--sizes-scale-100); /* 0.5rem */
+  --scale-medium: var(--sizes-scale-150); /* 0.75rem */
+  --scale-large: var(--sizes-scale-200); /* 1rem */
+  --scale-xlarge: var(--sizes-scale-225); /* 1.125rem */
+  --scale-xxlarge: var(--sizes-scale-300); /* 1.5rem */
+  --scale-3xlarge: var(--sizes-scale-400); /* 2rem */
+  --scale-6xlarge: var(--sizes-scale-700); /* 3.5rem */
+
+  --Extended-Colors-link-default-on-primary: #ecfdff;
+  --Extended-Colors-link-hover-on-primary: #25cef7;
+  --Extended-Colors-link-visited-on-primary: #e9ccf2;
+}

package/dist/styles/template-light.css

@@ -1,6 +1,10 @@
-@import "./variables.css";
-@import "./light-mode.css";
+/* Design tokens from Figma */
+@import "./tokens.css";
+
+/* Global styles */
 @import "./typography.css";
 @import "./main.css";
+
+/* Utilities and elements */
 @import "./utilities/index.css";
 @import "./elements/index.css";

package/dist/styles/template-orange.css

@@ -1,5 +1,7 @@
-@import "./variables.css";
-@import "./button.css";
+/* Design tokens from Figma */
+@import "./tokens.css";
+
+/* Orange theme overrides */
 :root {
   --color-primary: #f59e42;
   --color-secondary: #f59e42;

package/dist/styles/tokens.css

@@ -0,0 +1,39 @@
+/**
+ * Design Tokens - Master Import
+ *
+ * This file imports all design tokens from Figma in the correct cascade order.
+ * Generated tokens are synced from Figma using: npm run tokens:sync
+ *
+ * Import order matters! Tokens are layered from primitives → schemes:
+ * 1. Primitives (base colors with actual values)
+ * 2. Palettes (color ramps that reference primitives)
+ * 3. Schemes (semantic tokens that reference palettes)
+ * 4. Extended Colors (special colors)
+ * 5. Sizes (spacing, dimensions)
+ * 6. Typography (font definitions)
+ * 7. Other (borders, breakpoints, component config)
+ */
+
+/* Layer 1: Primitives - Base color values */
+@import "./generated/primitives.css";
+
+/* Layer 2: Palettes - Color ramps (50-750 scales) */
+@import "./generated/palettes.css";
+
+/* Layer 3: Schemes - Semantic color tokens */
+@import "./generated/schemes.css";
+
+/* Layer 4: Extended Colors - Additional semantic colors */
+@import "./generated/extended-colors.css";
+
+/* Layer 5: Sizes - Spacing and dimensions */
+@import "./generated/sizes.css";
+
+/* Layer 6: Typography - Font definitions */
+@import "./generated/typography.css";
+
+/* Layer 7: Other - Borders, breakpoints, component tokens */
+@import "./generated/other.css";
+
+/* Backwards Compatibility - Aliases for old variable names */
+@import "./legacy.css";

package/dist/styles/typography.css

@@ -50,6 +50,9 @@ TODO: figma not clear on margins between headings / paragraphs, or how these ele
     &.has-text-body-small {
       margin: 0 0 var(--spacing-l) 0;
     }
+    &.has-text-body-default {
+      margin: 0 0 var(--spacing-m) 0;
+    }
     &.has-text-body-large {
       margin: 0 0 var(--spacing-xl) 0;
     }
@@ -144,3 +147,45 @@ TODO: figma not clear on margins between headings / paragraphs, or how these ele
     font-style: italic;
   }
 }
+
+/* Links */
+a {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: 10%;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+
+  font-family: var(--Link-on-Surface-Default-font-link-on-surface-default-family, Montserrat);
+  font-style: normal;
+  font-weight: 700;
+
+  color: var(--Extended-Colors-link-default, #2176d2);
+  text-decoration-color: var(--Base-font-variables-Color-Link-link-default, #2176d2);
+
+  &:hover {
+    color: var(--Extended-Colors-link-hover, #000);
+    text-decoration-color: var(--Extended-Colors-link-hover, #000);
+  }
+
+  &:focus-visible {
+    color: var(--Extended-Colors-link-hover, #000);
+    text-decoration-color: var(--Extended-Colors-link-hover, #000);
+    outline: var(--stroke-stroke-thin, 2px) solid var(--Base-font-variables-Color-Link-link-default, #2176d2);
+  }
+
+  &:visited {
+    color: var(--Extended-Colors-link-visited, #4b0083);
+    text-decoration-color: var(--Extended-Colors-link-visited, #4b0083);
+
+    &:focus-visible {
+      text-decoration-color: var(--Extended-Colors-link-hover, #000);
+    }
+
+    &:hover {
+      color: var(--Extended-Colors-link-hover, #000);
+      text-decoration-color: var(--Extended-Colors-link-hover, #000);
+    }
+  }
+}

package/dist/styles/utilities/color.css

@@ -0,0 +1,26 @@
+.has-background-ben-franklin-blue {
+  background-color: var(--dark-ben-franklin-blue);
+}
+
+.has-background-primary {
+  --Base-font-variables-Color-Link-link-default: var(--Schemes-On-Primary-Container);
+  --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);
+
+  background-color: var(--Schemes-Primary);
+  color: var(--Schemes-On-Primary-Container);
+}
+.has-background-ghost-gray {
+  --Base-font-variables-Color-Link-link-default: var(--Schemes-Primary);
+  --Extended-Colors-link-default: var(--Schemes-Primary);
+  --Extended-Colors-link-hover: var(--Schemes-On-Surface);
+  --Extended-Colors-link-visited: var(--Extended-Colors-link-visited);
+  background-color: var(--primitive-colors-ghost-gray);
+}
+
+.has-background-secondary {
+  --Schemes-On-Primary-Container: #ecfdff;
+  --Schemes-On-Surface: #ecfdff;
+  background-color: var(--Schemes-Secondary);
+}