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

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(--ghost-gray);
+}
+
+.has-background-secondary {
+  --Schemes-On-Primary-Container: #ecfdff;
+  --Schemes-On-Surface: #ecfdff;
+  background-color: var(--Schemes-Secondary);
+}

package/dist/styles/utilities/containers.css

@@ -0,0 +1,158 @@
+.container-text {
+  max-width: 65ch;
+}
+.is-flex {
+  display: flex;
+}
+.is-flex-1 {
+  flex: 1;
+}
+.is-inline-flex {
+  display: inline-flex;
+}
+.is-justify-center {
+  justify-content: center;
+}
+.is-justify-flex-start {
+  justify-content: flex-start;
+}
+.is-justify-flex-end {
+  justify-content: flex-end;
+}
+.is-justify-space-between {
+  justify-content: space-between;
+}
+.is-justify-space-around {
+  justify-content: space-around;
+}
+.is-align-center {
+  align-items: center;
+}
+.is-align-flex-start {
+  align-items: flex-start;
+}
+.is-align-flex-end {
+  align-items: flex-end;
+}
+.is-flex-wrap {
+  flex-wrap: wrap;
+}
+.is-flex-column {
+  flex-direction: column;
+}
+.is-flex-row {
+  flex-direction: row;
+}
+.is-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.is-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.is-4 {
+  flex: 0 0 33.3333%;
+  max-width: 33.3333%;
+}
+.is-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+.is-2 {
+  flex: 0 0 16.6667%;
+  max-width: 16.6667%;
+}
+.is-1 {
+  flex: 0 0 8.3333%;
+  max-width: 8.3333%;
+}
+
+.is-gap-1 {
+  gap: var(--spacing-xs) !important;
+}
+.is-gap-2 {
+  gap: var(--spacing-s) !important;
+}
+.is-gap-3 {
+  gap: var(--spacing-m) !important;
+}
+.is-gap-4 {
+  gap: var(--spacing-l) !important;
+}
+.is-gap-5 {
+  gap: var(--spacing-xl) !important;
+}
+.is-gap-6 {
+  gap: var(--spacing-xxl) !important;
+}
+
+.is-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+}
+
+@media screen and (max-width: 768px) {
+  .is-flex .is-flex:has(.is-12-mobile),
+  .is-flex .is-flex:has(.is-6-mobile),
+  .is-flex .is-flex:has(.is-4-mobile),
+  .is-flex .is-flex:has(.is-3-mobile),
+  .is-flex .is-flex:has(.is-2-mobile),
+  .is-flex .is-flex:has(.is-1-mobile) {
+    flex-wrap: wrap;
+  }
+  .is-12-mobile {
+    flex: 0 0 100% !important;
+    max-width: 100% !important;
+  }
+  .is-6-mobile {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .is-4-mobile {
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+  }
+  .is-3-mobile {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .is-2-mobile {
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
+  }
+  .is-1-mobile {
+    flex: 0 0 8.3333%;
+    max-width: 8.3333%;
+  }
+  .hidden-mobile {
+    display: none !important;
+  }
+  .visible-mobile {
+    display: block !important;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .hidden-tablet {
+    display: none !important;
+  }
+  .visible-tablet {
+    display: block !important;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .hidden-desktop {
+    display: none !important;
+  }
+  .visible-desktop {
+    display: block !important;
+  }
+  .is-sticky-desktop {
+    position: sticky;
+    top: 0;
+    z-index: 9999;
+  }
+}

package/dist/styles/utilities/index.css

@@ -0,0 +1,4 @@
+@import "./spacing.css";
+@import "./text.css";
+@import "./color.css";
+@import "./containers.css";