@maggioli-design-system/styles 15.11.0 → 16.0.0

package/dist/tailwind/reset.css

@@ -1,115 +1,132 @@
-html {
-  color-scheme: dark light;
-  hanging-punctuation: first last;
-  interpolate-size: allow-keywords;
-  transition-duration: theme('transitionDuration.200');
-  transition-timing-function: theme('transitionTimingFunction.out');
-}
+@reference "tailwindcss";
+@reference "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css";
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  overflow-wrap: anywhere;
-}
+@layer reset {
+  :root {
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+  }
 
-body,
-html {
-  margin: 0;
-}
+  html {
+    @apply ease-out;
 
-body {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  min-height: 100svh;
-  -webkit-tap-highlight-color: transparent;
-  text-rendering: optimizelegibility;
-  text-size-adjust: 100%;
-}
+    hanging-punctuation: first last;
+    interpolate-size: allow-keywords;
+    scrollbar-gutter: stable;
+    transition-duration: 200ms;
+  }
 
-input,
-textarea {
-  appearance: none;
-  font-family: inherit;
-}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+  }
 
-a {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
+  body,
+  html {
+    margin: 0;
+  }
 
-a,
-aside,
-body,
-code,
-div,
-datalist,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hr,
-html,
-input,
-li,
-main,
-section,
-span,
-ul,
-textarea {
-  box-sizing: border-box;
-}
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  max-width: theme('spacing.title');
-  text-wrap: balance;
-}
+    /* min-block-size: 100svh; */
+    min-height: 100svh;
+    -webkit-tap-highlight-color: transparent;
+    text-rendering: optimizelegibility;
+    text-size-adjust: 100%;
+  }
 
-p {
-  margin: 0;
-  max-width: theme('spacing.text');
-  text-wrap: pretty;
-}
+  input,
+  textarea {
+    appearance: none;
+    font-family: inherit;
+  }
 
-li,
-figcaption {
-  max-width: theme('spacing.text');
-  text-wrap: pretty;
-}
+  a {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+  }
 
-header,
-footer,
-section,
-article {
-  container-type: inline-size;
-}
+  a,
+  aside,
+  body,
+  code,
+  div,
+  datalist,
+  footer,
+  form,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hr,
+  html,
+  input,
+  li,
+  main,
+  section,
+  span,
+  ul,
+  textarea {
+    box-sizing: border-box;
+  }
 
-img,
-picture,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply max-w-title;
 
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    scroll-behavior: smooth;
+    margin: 0;
+    text-wrap: balance;
+  }
+
+  p {
+    @apply max-w-text;
+
+    margin: 0;
+    text-wrap: pretty;
   }
 
-  :has(:target) {
-    scroll-behavior: smooth;
+  li,
+  figcaption {
+    @apply max-w-text;
+
+    text-wrap: pretty;
+  }
+
+  header,
+  footer,
+  section,
+  article {
+    container-type: inline-size;
+  }
+
+  img,
+  picture,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+
+    :has(:target) {
+      scroll-behavior: smooth;
+    }
   }
 }

package/dist/tailwind/theme.css

@@ -0,0 +1,5 @@
+/* @import "tailwindcss"; */
+
+/* @import "./dark-mode.css"; */
+@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-color.css' layer(theme);
+@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css';

package/dist/tailwind/typography.css

@@ -1,158 +1,138 @@
-@layer components {
-  .text-title-h1 {
-    @apply
-      antialiased
-      font-black
-      font-title
-      min-h-1200
-      text-size-title-h1;
-  }
-
-  .text-title-h2 {
-    @apply
-      antialiased
-      font-black
-      font-title
-      min-h-1000
-      text-size-title-h2;
-  }
-
-  .text-title-h3 {
-    @apply
-      antialiased
-      font-black
-      font-title
-      min-h-900
-      text-size-title-h3;
-  }
-
-  .text-title-h4 {
-    @apply
-      antialiased
-      font-bold
-      font-title
-      min-h-800
-      text-size-title-h4;
-  }
-
-  .text-title-h5 {
-    @apply
-      antialiased
-      font-bold
-      font-title
-      min-h-700
-      text-size-title-h5;
-  }
-
-  .text-title-h6 {
-    @apply
-      antialiased
-      font-bold
-      font-title
-      min-h-600
-      text-size-title-h6;
-  }
-
-  .text-title-action {
-    @apply
-      antialiased
-      font-medium
-      font-title
-      min-h-600
-      text-size-title-action;
-  }
-
-  .text-info-paragraph {
-    @apply
-      antialiased
-      font-info
-      min-h-800
-      text-size-info-paragraph;
-  }
-
-  .text-info-detail {
-    @apply
-      antialiased
-      font-info
-      min-h-600
-      text-size-info-detail;
-  }
-
-  .text-info-caption {
-    @apply
-      antialiased
-      font-info
-      min-h-500
-      text-size-info-caption;
-  }
-
-  .text-info-label {
-    @apply
-      antialiased
-      font-bold
-      font-info
-      min-h-400
-      text-size-info-label
-      uppercase;
-  }
-
-  .text-info-option {
-    @apply
-      antialiased
-      font-bold
-      font-info
-      min-h-250
-      text-size-info-option
-      uppercase;
-  }
-
-  .text-info-tip {
-    @apply
-      antialiased
-      font-info
-      min-h-400
-      text-size-info-tip;
-  }
-
-  .text-read-paragraph {
-    @apply
-      antialiased
-      font-light
-      font-read
-      min-h-800
-      text-size-read-paragraph;
-  }
-
-  .text-read-detail {
-    @apply
-      antialiased
-      font-light
-      font-read
-      min-h-600
-      text-size-read-detail;
-  }
-
-  .text-read-caption {
-    @apply
-      antialiased
-      font-read
-      min-h-500
-      text-size-read-caption;
-  }
-
-  .text-code-snippet {
-    @apply
-      antialiased
-      font-code
-      min-h-600
-      text-size-code-snippet;
-  }
-
-  .text-code-hack {
-    @apply
-      antialiased
-      font-code
-      min-h-500
-      text-size-code-hack;
-  }
+@utility text-title-h1 {
+  @apply antialiased
+    font-black
+    font-title
+    text-box-vertical-margin
+    text-size-title-h1;
+}
+
+@utility text-title-h2 {
+  @apply antialiased
+    font-black
+    font-title
+    text-box-vertical-margin
+    text-size-title-h2;
+}
+
+@utility text-title-h3 {
+  @apply antialiased
+    font-black
+    font-title
+    text-box-vertical-margin
+    text-size-title-h3;
+}
+
+@utility text-title-h4 {
+  @apply antialiased
+    font-black
+    font-title
+    text-box-vertical-margin
+    text-size-title-h4;
+}
+
+@utility text-title-h5 {
+  @apply antialiased
+    font-black
+    font-title
+    text-box-vertical-margin
+    text-size-title-h5;
+}
+
+@utility text-title-h6 {
+  @apply antialiased
+    font-bold
+    font-title
+    text-box-vertical-margin
+    text-size-title-h6;
+}
+
+@utility text-title-action {
+  @apply antialiased
+    font-medium
+    font-title
+    text-box-vertical-margin
+    text-size-title-action;
+}
+
+@utility text-info-paragraph {
+  @apply antialiased
+    font-info
+    text-box-vertical-margin
+    text-size-info-paragraph;
+}
+
+@utility text-info-detail {
+  @apply antialiased
+    font-info
+    text-box-vertical-margin
+    text-size-info-detail;
+}
+
+@utility text-info-caption {
+  @apply antialiased
+    font-info
+    text-box-vertical-margin
+    text-size-info-caption;
+}
+
+@utility text-info-label {
+  @apply antialiased
+    font-bold
+    font-info
+    text-size-info-label
+    text-box-uppercase
+    uppercase;
+}
+
+@utility text-info-option {
+  @apply antialiased
+    font-bold
+    font-info
+    text-size-info-option
+    text-box-uppercase
+    uppercase;
+}
+
+@utility text-info-tip {
+  @apply antialiased
+    font-info
+    text-box-vertical-margin
+    text-size-info-tip;
+}
+
+@utility text-read-paragraph {
+  @apply antialiased
+    font-light
+    font-read
+    text-box-vertical-margin
+    text-size-read-paragraph;
+}
+
+@utility text-read-detail {
+  @apply antialiased
+    font-light
+    font-read
+    text-box-vertical-margin
+    text-size-read-detail;
+}
+
+@utility text-read-caption {
+  @apply antialiased
+    font-read
+    text-box-vertical-margin
+    text-size-read-caption;
+}
+
+@utility text-code-snippet {
+  @apply antialiased
+    font-code
+    text-box-vertical-margin
+    text-size-code-snippet;
+}
+
+@utility text-code-hack {
+  @apply antialiased
+    font-code
+    text-box-vertical-margin
+    text-size-code-hack;
 }

package/dist/tailwind/utilities.css

@@ -0,0 +1,97 @@
+@utility focus-bounce {
+  animation-duration: var(--magma-outline-animation-duration, 1s);
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: focus-bounce;
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+  outline: var(--magma-outline-blur, 2px solid var(--magma-outline-blur-color, rgb(0 0 0 / 0)));
+  transition-duration: 200ms;
+  transition-property:
+    background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+  transition-timing-function: ease-in-out;
+}
+
+@utility focus-bounce--focused {
+  --magma-outline-blur: var(--magma-outline-focus);
+
+  animation-play-state: running;
+}
+
+@utility text-box-uppercase {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+}
+
+@utility text-box-vertical-margin {
+  min-height: auto;
+  text-box: trim-both text;
+}
+
+@utility text-box-vertical-align {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+}
+
+@utility hide-scrollbar {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility focus-bounce {
+  &:focus-visible {
+    --magma-outline-blur: var(--magma-outline-focus);
+
+    animation-play-state: running;
+  }
+}
+
+@utility not-hydrated {
+  animation-duration: 0s;
+  opacity: 0;
+  transition-delay: 0.1s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+@layer utilities {
+  /* .focus-bounce:focus-visible {
+    --magma-outline-blur: var(--magma-outline-focus);
+
+    animation-play-state: running;
+  } */
+
+  .focus-zoom {
+    @apply duration-200
+      ease-out;
+
+    outline: var(--magma-outline-blur);
+    outline-offset: var(--magma-outline-blur-offset);
+    transition-property:
+      background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+  }
+
+  .focus-zoom--focused,
+  .focus-zoom:focus-visible {
+    --magma-outline-blur-offset: var(--magma-outline-focus-offset);
+    --magma-outline-blur: var(--magma-outline-focus);
+  }
+
+  .focus-zoom--light.focus-zoom--focused,
+  .focus-zoom--light:focus-visible {
+    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+  }
+
+  /* .not-hydrated {
+    animation-duration: 0s;
+    opacity: 0;
+    transition-delay: 0.1s;
+    transition-duration: 0s;
+    visibility: hidden;
+  } */
+}

package/dist/tailwind3/base.css

@@ -0,0 +1,51 @@
+body {
+  @apply font-info
+    text-info-detail;
+
+  background-color: rgb(var(--tone-neutral, theme('colors.tone-neutral')));
+  color: rgb(var(--tone-neutral-03, theme('colors.tone-neutral-03')));
+}
+
+:root.pref-contrast-high body {
+  color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
+}
+
+@media (prefers-contrast: more) {
+  :root.pref-contrast-system body {
+    color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
+  }
+}
+
+::selection {
+  background-color: var(--magma-selection-background, theme('colors.label-sky-09'));
+  color: var(--magma-selection-color, theme('colors.label-sky-01'));
+}
+
+button,
+optgroup,
+select {
+  @apply text-title-action;
+}
+
+b,
+strong {
+  @apply font-semibold
+    tracking-tight;
+}
+
+a {
+  color: rgb(var(--theme-default-02-primary-text, theme('colors.theme-default-02-primary-text')));
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  max-width: theme('spacing.title');
+}
+
+p {
+  max-width: theme('spacing.text');
+}