@atom-learning/components 6.0.0-beta.0 → 6.0.0-beta.10

package/src/index.css

@@ -0,0 +1,167 @@
+@import 'tailwindcss';
+
+@import '@atom-learning/theme/lib/theme-atom.css';
+
+@source '../src/';
+
+@theme {
+  --default-font-family: var(--font-body);
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --bg-chevron: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
+
+  /**
+    * Font Feature Settings for Inter
+    *
+    * https://rsms.me/inter/#feature-examples
+    * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+    *
+    * These font-settings apply various character variants and stylistic alternatives
+    * to improve the readability of text.
+    *
+    * This will usually be applied across all app UI when used by a student.
+    */
+  --readability-features: 'cv02, cv04, cv05, cv08, cv11, ss03';
+  --readability-number-features: 'cv02, cv04, tnum';
+
+  /**
+   * Animations
+   */
+  --animate-accordion-open: accordion-open 300ms ease-out;
+  --animate-accordion-close: accordion-close 300ms ease-out;
+
+  @keyframes accordion-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-close {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  --animate-fade-in: fade-in 550ms var(--easing);
+  --animate-fade-out: fade-out 550ms var(--easing);
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  --animate-slide-direction-in: slide-direction-in 225ms ease-out;
+  --animate-slide-direction-out: slide-direction-out 125ms ease-out;
+
+  @keyframes slide-direction-in {
+    0% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+  }
+  @keyframes slide-direction-out {
+    0% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+  }
+
+  --animate-slide-in-center: slide-in-center 550ms var(--easing);
+  --animate-slide-out-center: slide-out-center 550ms var(--easing);
+
+  @keyframes slide-in-center {
+    0% {
+      translate: -50% 50vh;
+    }
+    100% {
+      translate: -50% -50%;
+    }
+  }
+  @keyframes slide-out-center {
+    0% {
+      translate: -50% -50%;
+    }
+    100% {
+      translate: -50% 50vh;
+    }
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+}
+
+@utility capsize-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-before-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-after-* {
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+/**
+ * Font Feature Settings for Inter
+ */
+@utility readability-features {
+  font-feature-settings: var(--readability-features);
+}
+
+@utility readability-number-features {
+  font-feature-settings: var(--readability-number-features);
+}
+
+@custom-variant supports-color-mix {
+  @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
+    @slot;
+  }
+}