@byline/ui 0.9.3 → 0.10.1

package/src/styles/base/animations.css

@@ -0,0 +1,141 @@
+@layer byline-base {
+  @keyframes enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: rotateX(-30deg) scale(0.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+  }
+
+  @keyframes scaleOut {
+    from {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: rotateX(-10deg) scale(0.95);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/src/styles/base/base.css

@@ -0,0 +1,11 @@
+@import "./animations.css";
+@import "./borders.css";
+@import "./breakpoints.css";
+@import "./colors.css";
+@import "./opacity.css";
+@import "./shadows.css";
+@import "./spacing.css";
+@import "./size.css";
+@import "./transitions.css";
+@import "./typography.css";
+@import "./z-index.css";

package/src/styles/base/borders.css

@@ -0,0 +1,30 @@
+@layer byline-base {
+  :root {
+    /* ========================================
+       BORDER & RADIUS
+    ======================================== */
+    --border-width-thin: 1px;
+    --border-width-normal: 2px;
+    --border-width-thick: 4px;
+
+    --border-style-solid: solid;
+    --border-style-dashed: dashed;
+    --border-style-dotted: dotted;
+
+    --border-radius-none: 0px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-2xl: 24px;
+    --border-radius-full: 9999px;
+
+    /* ========================================
+       RINGS
+    ======================================== */
+
+    --ring-offset-width: 2px;
+    --ring-inset: ;
+    --ring-shadow: 0 0 #0000;
+  }
+}

package/src/styles/base/breakpoints.css

@@ -0,0 +1,15 @@
+@layer byline-base {
+  :root {
+    /* ========================================
+       BREAKPOINTS - must match any that are used in Tailwind CSS
+       Note: Values in rem (1rem = 16px at default font size)
+    ======================================== */
+    --breakpoint-xs: 30rem; /* 480px */
+    --breakpoint-sm: 40rem; /* 640px */
+    --breakpoint-md: 48rem; /* 768px */
+    --breakpoint-lg: 66rem; /* 1056px */
+    /* our container component will set max width to common screen size */
+    --breakpoint-xl: 77rem; /* 1232px */
+    --breakpoint-2xl: 94rem; /* 1504px */
+  }
+}

package/src/styles/base/colors.css

@@ -0,0 +1,163 @@
+@layer byline-base {
+  :root {
+    /* Theme base color */
+    --theme-base: oklch(43.11% 0.1 317.53);
+
+    --theme-25: oklch(from var(--theme-base) calc(l * 2) c h);
+    --theme-50: oklch(from var(--theme-base) calc(l * 1.75) c h);
+    --theme-100: oklch(from var(--theme-base) calc(l * 1.5) c h);
+    --theme-200: oklch(from var(--theme-base) calc(l * 1.25) c h);
+    --theme-300: oklch(from var(--theme-base) calc(l * 1.1) c h);
+    --theme-400: var(--theme-base);
+    --theme-500: oklch(from var(--theme-base) calc(l * 0.95) c h);
+    --theme-600: oklch(from var(--theme-base) calc(l * 0.9) c h);
+    --theme-700: oklch(from var(--theme-base) calc(l * 0.85) c h);
+    --theme-800: oklch(from var(--theme-base) calc(l * 0.8) c h);
+    --theme-900: oklch(from var(--theme-base) calc(l * 0.75) c h);
+    --theme-950: oklch(from var(--theme-base) calc(l * 0.7) c h);
+
+    /* Primary base */
+    --primary-base: oklch(49.7% 0.189 295.76);
+
+    --primary-25: oklch(from var(--primary-base) calc(l * 2) c h);
+    --primary-50: oklch(from var(--primary-base) calc(l * 1.75) c h);
+    --primary-100: oklch(from var(--primary-base) calc(l * 1.5) c h);
+    --primary-200: oklch(from var(--primary-base) calc(l * 1.25) c h);
+    --primary-300: oklch(from var(--primary-base) calc(l * 1.1) c h);
+    --primary-400: var(--primary-base);
+    --primary-500: oklch(from var(--primary-base) calc(l * 0.95) c h);
+    --primary-600: oklch(from var(--primary-base) calc(l * 0.9) c h);
+    --primary-700: oklch(from var(--primary-base) calc(l * 0.85) c h);
+    --primary-800: oklch(from var(--primary-base) calc(l * 0.8) c h);
+    --primary-900: oklch(from var(--primary-base) calc(l * 0.75) c h);
+    --primary-950: oklch(from var(--primary-base) calc(l * 0.7) c h);
+
+    /* Secondary base */
+    --secondary-base: oklch(0.8461 0.15 82.94);
+
+    --secondary-25: oklch(from var(--secondary-base) calc(l * 2.25) 0.1 h);
+    --secondary-50: oklch(from var(--secondary-base) calc(l * 2) c h);
+    --secondary-100: oklch(from var(--secondary-base) calc(l * 1.75) c h);
+    --secondary-200: oklch(from var(--secondary-base) calc(l * 1.5) c h);
+    --secondary-300: oklch(from var(--secondary-base) calc(l * 1.1) c h);
+    --secondary-400: var(--secondary-base);
+    --secondary-500: oklch(from var(--secondary-base) calc(l * 0.95) c h);
+    --secondary-600: oklch(from var(--secondary-base) calc(l * 0.9) c h);
+    --secondary-700: oklch(from var(--secondary-base) calc(l * 0.85) c h);
+    --secondary-800: oklch(from var(--secondary-base) calc(l * 0.8) c h);
+    --secondary-900: oklch(from var(--secondary-base) calc(l * 0.75) c h);
+    --secondary-950: oklch(from var(--secondary-base) calc(l * 0.7) c h);
+
+    /* Accent base */
+    --accent-base: oklch(0.754 0.1 324.9);
+
+    --accent-25: oklch(from var(--accent-base) 0.985 0.06 h);
+    --accent-50: oklch(from var(--accent-base) 0.975 0.08 h);
+    --accent-100: oklch(from var(--accent-base) 0.9 0.07 h);
+    --accent-200: oklch(from var(--accent-base) 0.85 c h);
+    --accent-300: oklch(from var(--accent-base) 0.8 c h);
+    --accent-400: var(--accent-base);
+    --accent-500: oklch(from var(--accent-base) 0.7 c h);
+    --accent-600: oklch(from var(--accent-base) 0.68 c h);
+    --accent-700: oklch(from var(--accent-base) 0.62 0.1 h);
+    --accent-800: oklch(from var(--accent-base) 0.6 0.1 h);
+    --accent-900: oklch(from var(--accent-base) 0.58 0.1 h);
+    --accent-950: oklch(from var(--accent-base) 0.5 0.11 h);
+
+    /* Canvas base */
+    --canvas-base: oklch(0.542 0.0037 275.34);
+
+    --canvas-25: oklch(from var(--canvas-base) calc(l * 1.9) c h);
+    --canvas-50: oklch(from var(--canvas-base) calc(l * 1.75) c h);
+    --canvas-100: oklch(from var(--canvas-base) calc(l * 1.6) c h);
+    --canvas-200: oklch(from var(--canvas-base) calc(l * 1.4) c h);
+    --canvas-300: oklch(from var(--canvas-base) calc(l * 1.2) c h);
+    --canvas-400: var(--canvas-base);
+    --canvas-500: oklch(from var(--canvas-base) calc(l * 0.9) c h);
+    --canvas-600: oklch(from var(--canvas-base) calc(l * 0.7) c h);
+    --canvas-700: oklch(from var(--canvas-base) calc(l * 0.5) c h);
+    --canvas-800: oklch(from var(--canvas-base) calc(l * 0.335) c h);
+    --canvas-900: oklch(from var(--canvas-base) calc(l * 0.3) c h);
+    --canvas-950: oklch(from var(--canvas-base) calc(l * 0.225) c h);
+
+    /* Gray base */
+    --gray-base: oklch(0.5984 0 0);
+
+    --gray-25: oklch(from var(--gray-base) calc(l * 1.625) c h);
+    --gray-50: oklch(from var(--gray-base) calc(l * 1.575) c h);
+    --gray-100: oklch(from var(--gray-base) calc(l * 1.475) c h);
+    --gray-200: oklch(from var(--gray-base) calc(l * 1.35) c h);
+    --gray-300: oklch(from var(--gray-base) calc(l * 1.175) c h);
+    --gray-400: var(--gray-base);
+    --gray-500: oklch(from var(--gray-base) calc(l * 0.85) c h);
+    --gray-600: oklch(from var(--gray-base) calc(l * 0.725) c h);
+    --gray-700: oklch(from var(--gray-base) calc(l * 0.6126) c h);
+    --gray-800: oklch(from var(--gray-base) calc(l * 0.5) c h);
+    --gray-900: oklch(from var(--gray-base) calc(l * 0.4) c h);
+    --gray-950: oklch(from var(--gray-base) calc(l * 0.3) c h);
+
+    /* Green base */
+    --green-base: oklch(65.26% 0.18 142.58);
+
+    --green-25: oklch(from var(--green-base) calc(l * 2) c h);
+    --green-50: oklch(from var(--green-base) calc(l * 1.75) c h);
+    --green-100: oklch(from var(--green-base) calc(l * 1.5) c h);
+    --green-200: oklch(from var(--green-base) calc(l * 1.25) c h);
+    --green-300: oklch(from var(--green-base) calc(l * 1.1) c h);
+    --green-400: var(--green-base);
+    --green-500: oklch(from var(--green-base) calc(l * 0.95) c h);
+    --green-600: oklch(from var(--green-base) calc(l * 0.9) c h);
+    --green-700: oklch(from var(--green-base) calc(l * 0.85) c h);
+    --green-800: oklch(from var(--green-base) calc(l * 0.8) c h);
+    --green-900: oklch(from var(--green-base) calc(l * 0.75) c h);
+    --green-950: oklch(from var(--green-base) calc(l * 0.7) c h);
+
+    /* Blue base */
+    --blue-base: oklch(53.66% 0.1942 265.89);
+
+    --blue-25: oklch(from var(--blue-base) calc(l * 2) c h);
+    --blue-50: oklch(from var(--blue-base) calc(l * 1.75) c h);
+    --blue-100: oklch(from var(--blue-base) calc(l * 1.5) c h);
+    --blue-200: oklch(from var(--blue-base) calc(l * 1.25) c h);
+    --blue-300: oklch(from var(--blue-base) calc(l * 1.1) c h);
+    --blue-400: var(--blue-base);
+    --blue-500: oklch(from var(--blue-base) calc(l * 0.95) c h);
+    --blue-600: oklch(from var(--blue-base) calc(l * 0.9) c h);
+    --blue-700: oklch(from var(--blue-base) calc(l * 0.85) c h);
+    --blue-800: oklch(from var(--blue-base) calc(l * 0.8) c h);
+    --blue-900: oklch(from var(--blue-base) calc(l * 0.75) c h);
+    --blue-950: oklch(from var(--blue-base) calc(l * 0.7) c h);
+
+    /* Yellow base */
+    --yellow-base: oklch(0.75 0.15 82.94);
+
+    --yellow-25: oklch(from var(--yellow-base) calc(l * 2) c h);
+    --yellow-50: oklch(from var(--yellow-base) calc(l * 1.75) c h);
+    --yellow-100: oklch(from var(--yellow-base) calc(l * 1.5) c h);
+    --yellow-200: oklch(from var(--yellow-base) calc(l * 1.25) c h);
+    --yellow-300: oklch(from var(--yellow-base) calc(l * 1.1) c h);
+    --yellow-400: var(--yellow-base);
+    --yellow-500: oklch(from var(--yellow-base) calc(l * 0.95) c h);
+    --yellow-600: oklch(from var(--yellow-base) calc(l * 0.9) c h);
+    --yellow-700: oklch(from var(--yellow-base) calc(l * 0.85) c h);
+    --yellow-800: oklch(from var(--yellow-base) calc(l * 0.8) c h);
+    --yellow-900: oklch(from var(--yellow-base) calc(l * 0.75) c h);
+    --yellow-950: oklch(from var(--yellow-base) calc(l * 0.7) c h);
+
+    /* Red base */
+    --red-base: oklch(54.27% 0.18 31.76);
+
+    --red-25: oklch(from var(--red-base) calc(l * 2) c h);
+    --red-50: oklch(from var(--red-base) calc(l * 1.75) c h);
+    --red-100: oklch(from var(--red-base) calc(l * 1.5) c h);
+    --red-200: oklch(from var(--red-base) calc(l * 1.25) c h);
+    --red-300: oklch(from var(--red-base) calc(l * 1.1) c h);
+    --red-400: var(--red-base);
+    --red-500: oklch(from var(--red-base) calc(l * 0.95) c h);
+    --red-600: oklch(from var(--red-base) calc(l * 0.9) c h);
+    --red-700: oklch(from var(--red-base) calc(l * 0.85) c h);
+    --red-800: oklch(from var(--red-base) calc(l * 0.8) c h);
+    --red-900: oklch(from var(--red-base) calc(l * 0.75) c h);
+    --red-950: oklch(from var(--red-base) calc(l * 0.7) c h);
+  }
+}

package/src/styles/base/opacity.css

@@ -0,0 +1,12 @@
+@layer byline-base {
+  :root {
+    /* ========================================
+        OPACITY LEVELS
+    ======================================== */
+    --opacity-0: 0;
+    --opacity-25: 0.25;
+    --opacity-50: 0.5;
+    --opacity-75: 0.75;
+    --opacity-100: 1;
+  }
+}

package/src/styles/base/shadows.css

@@ -0,0 +1,13 @@
+@layer byline-base {
+  :root {
+    /* ========================================
+       SHADOWS
+    ======================================== */
+    --shadow: 0 0 #0000;
+    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/styles/base/size.css

@@ -0,0 +1,24 @@
+@layer byline-base {
+  :root {
+    --size-0: 0;
+    --size-2: 0.125rem;
+    --size-4: 0.25rem;
+    --size-6: 0.375rem;
+    --size-8: 0.5rem;
+    --size-12: 0.75rem;
+    --size-16: 1rem;
+    --size-20: 1.25rem;
+    --size-24: 1.5rem;
+    --size-28: 1.75rem;
+    --size-32: 2rem;
+    --size-36: 2.25rem;
+    --size-40: 2.5rem;
+    --size-44: 2.75rem;
+    --size-48: 3rem;
+    --size-64: 4rem;
+    --size-80: 5rem;
+    --size-96: 6rem;
+    --size-112: 7rem;
+    --size-128: 8rem;
+  }
+}

package/src/styles/base/spacing.css

@@ -0,0 +1,24 @@
+@layer byline-base {
+  :root {
+    --spacing-0: 0;
+    --spacing-2: 0.125rem;
+    --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-28: 1.75rem;
+    --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
+    --spacing-40: 2.5rem;
+    --spacing-44: 2.75rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-80: 5rem;
+    --spacing-96: 6rem;
+    --spacing-112: 7rem;
+    --spacing-128: 8rem;
+  }
+}

package/src/styles/base/transitions.css

@@ -0,0 +1,7 @@
+@layer byline-base {
+  :root {
+    --transition-fast: 175ms ease-in-out;
+    --transition-normal: 230ms ease-in-out;
+    --transition-slow: 400ms ease-in-out;
+  }
+}

package/src/styles/base/typography.css

@@ -0,0 +1,46 @@
+@layer byline-base {
+  :root {
+    /* 12px */
+    --font-size-xs: 0.75rem;
+    /* 14px */
+    --font-size-sm: 0.875rem;
+    /* 16px */
+    --font-size-base: 1rem;
+    /* 18px */
+    --font-size-lg: 1.125rem;
+    /* 20px */
+    --font-size-xl: 1.25rem;
+    /* 24px */
+    --font-size-2xl: 1.5rem;
+    /* 30px */
+    --font-size-3xl: 1.875rem;
+    /* 36px */
+    --font-size-4xl: 2.25rem;
+    /* 42px */
+    --font-size-5xl: 2.625rem;
+    /* 48px */
+    --font-size-6xl: 3rem;
+    /* 54px */
+    --font-size-7xl: 3.375rem;
+    /* 60px */
+    --font-size-8xl: 3.75rem;
+
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-ultrabold: 900;
+
+    --line-height-tight: 1.1;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
+    --letter-spacing-tight: -0.02em;
+    --letter-spacing-normal: 0;
+    --letter-spacing-wide: 0.05em;
+  }
+}

package/src/styles/base/z-index.css

@@ -0,0 +1,12 @@
+@layer byline-base {
+  :root {
+    /* ========================================
+       Z-INDEX SYSTEM
+    ======================================== */
+    --z-index-low: 10;
+    --z-index-medium: 100;
+    --z-index-high: 1000;
+    --z-index-modal: 1050;
+    --z-index-toast: 1100;
+  }
+}

package/src/styles/components/components.css

@@ -0,0 +1,4 @@
+/* @import "./scroll-to-top.css"; */
+@import "./hamburger.css";
+/* @import "./loaders.css"; */
+@import "./fade-in-lift.css";

package/src/styles/components/fade-in-lift.css

@@ -0,0 +1,15 @@
+.component--fade-in-lift {
+  opacity: 0;
+  visibility: hidden;
+  transform: matrix(1, 0, 0, 1, 0, 18);
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.7s ease-out;
+  will-change: opacity, visibility;
+}
+
+.component--fade-in-lift.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: matrix(1, 0, 0, 1, 0, 0);
+}

package/src/styles/components/hamburger.css

@@ -0,0 +1,122 @@
+/* No longer used in our actual hamburger React and Astro components
+but left here as a reference. */
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .component--hamburger {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  /* .component--hamburger:hover {
+  @apply bg-primary-200;
+} */
+
+  .component--hamburger:active,
+  .component--hamburger:focus {
+    outline: none;
+    border-color: white;
+    border-width: 0.5px;
+    border-style: dashed;
+    /* border: dashed 0.5px #ffffff; */
+    border-radius: 4px;
+  }
+
+  .component--hamburger .box {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  .component--hamburger .inner {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .component--hamburger .inner,
+  .component--hamburger .inner::before,
+  .component--hamburger .inner::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    /* background-color: white; */
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  /* .dark .component--hamburger .inner,
+.dark .component--hamburger .inner::before,
+.dark .component--hamburger .inner::after {
+  background-color: white;
+} */
+
+  .component--hamburger .inner::before,
+  .component--hamburger .inner::after {
+    content: "";
+    display: block;
+  }
+
+  .component--hamburger .inner::before {
+    top: -8px;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
+  }
+
+  .component--hamburger .inner::after {
+    bottom: -8px;
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .component--hamburger.is_active .inner {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .component--hamburger.is_active .inner::before {
+    top: 0;
+    opacity: 0;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
+  }
+
+  .component--hamburger.is_active .inner::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+}