twntyx-css 1.0.0

package/styles/typography.css

@@ -0,0 +1,160 @@
+/*----------------------------*/
+/* TYPOGRAPHY */
+/*----------------------------*/
+
+@font-face {
+  font-family: "Instrument Sans";
+  src: url("/fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Instrument Sans";
+  src: url("/fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoRegular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoRegularItalic.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoMedium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoMediumItalic.otf") format("opentype");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoBold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Gazpacho";
+  src: url("/fonts/GazpachoBoldItalic.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+  @apply font-normal font-body;
+}
+
+::selection {
+  @apply bg-brand-default text-text-inverted;
+}
+
+
+/* Typography utilities */
+@utility h1 {
+  @apply text-4xl font-heading font-medium;
+}
+
+@utility h2 {
+  @apply text-3xl font-heading font-medium;
+}
+
+@utility h3 {
+  @apply text-2xl font-medium;
+}
+
+@utility h4 {
+  @apply text-xl font-medium;
+}
+
+@utility h5 {
+  @apply text-lg font-normal font-body;
+}
+
+@utility s1 {
+  @apply text-base font-medium font-body;
+}
+
+@utility s2 {
+  @apply text-sm font-medium font-body;
+}
+
+@utility p1 {
+  @apply text-base font-light font-body;
+}
+
+@utility p2 {
+  @apply text-sm font-light font-body;
+}
+
+@utility caption {
+  @apply text-xs font-normal font-body;
+}
+
+@utility overline {
+  @apply text-xs font-normal uppercase font-body;
+}
+
+/* Base layer styles for elements */
+@layer base {
+hr,
+.separator {
+  @apply h-px border-t border-line-default;
+}
+
+b,
+strong {
+  @apply font-medium;
+}
+
+h1,
+h2 {
+  @apply font-heading;
+}
+
+/* h3,
+h4,
+h5,
+h6 {
+  @apply font-normal;
+} */
+
+.prose {
+  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply font-medium;
+  }
+
+  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply text-text-default;
+  }
+
+  &,
+  :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply text-text-default;
+  }
+}
+}

package/styles/utility.css

@@ -0,0 +1,20 @@
+/*----------------------------*/
+/* Utility */
+/*----------------------------*/
+
+
+body:has(.translation-key:hover) .translation-key:not(:hover) {
+  @apply z-50 opacity-30;
+}
+
+body:has(.translation-key:hover) .translation-key:hover {
+  @apply opacity-100 z-[60];
+}
+
+.translation-key {
+  @apply inline-flex absolute top-0 left-0 gap-1 items-center px-1.5 py-0 text-xs truncate rounded opacity-100 transition duration-100 -translate-y-full text-text-default bg-background-surface inverted group-hover:bg-background-error active:opacity-50;
+
+  &:hover {
+    @apply z-10;
+  }
+}

package/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};