sate-lib 1.1.2 → 1.1.3

package/README.md

@@ -21,7 +21,16 @@ A lightweight and modular React component library designed for modern web interf
   pnpm dev
 ```
 
-## Usage
+## Fonts
+
+SATE Lib uses custom fonts to define the typographic styles used in components like Typography.
+To keep the bundle lightweight and flexible, fonts are not bundled with the main library output but are still included in the dist/assets/fonts directory.
+
+```bash
+import "sate-lib/dist/assets/styles/fonts.scss";
+```
+
+## Component usage
 
 ```bash
 import { Badge } from "sate-lib";

package/dist/assets/styles/fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "Author";
+  src: url("../fonts/author-bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Golos UI";
+  src: url("../fonts/golos-ui-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Golos UI";
+  src: url("../fonts/golos-ui-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Golos UI";
+  src: url("../fonts/golos-ui-bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/assets/styles/index.css

@@ -1,164 +1 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  outline: none;
-}
-
-ul,
-ol {
-  list-style: none;
-}
-
-html:focus-within {
-  scroll-behavior: smooth;
-}
-
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-  color: inherit;
-}
-
-img,
-picture,
-svg,
-video,
-canvas {
-  max-width: 100%;
-  height: auto;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  color: inherit;
-  border: none;
-  background: none;
-  outline: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-    transition: none;
-  }
-}
-body,
-html {
-  height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-button {
-  cursor: pointer;
-}
-
-:root {
-  --box-shadow-1: 0px 1px 0px 0px rgba(17, 17, 26, 0.1);
-  --box-shadow-2: 0px 1px 0px rgba(17, 17, 26, 0.05),
-    0px 0px 8px rgba(17, 17, 26, 0.1);
-  --opacity-disabled: 0.38;
-  --color-theme-core-bright: #317c6c;
-  --color-theme-core-dark: #b80f0f;
-  --color-system-content-primary: #0e0e0e;
-  --color-system-content-secondary: #474747;
-  --color-system-content-tertiary: #767676;
-  --radius-radii-10: 0.625rem;
-  --radius-radii-16: 1rem;
-  --radius-radii-24: 1.5rem;
-  --radius-large-container: 1rem;
-  --radius-chip: 0.5rem;
-  --radius-medium-container: 0.75rem;
-  --typeface-theme: "Bebas Neue";
-  --typescale-display-large-font: "Bebas Neue";
-  --typescale-display-large-font-size: 6rem;
-  --typescale-display-large-weight: 600;
-  --typescale-display-large-font-size: 6rem;
-  --typescale-display-large-letter-spacing: 0;
-  --spacing-size-4: 0.25rem;
-  --spacing-size-154: 9.625rem;
-  --spacing-size-0: 0;
-  --padding-x-small: 0.5rem;
-  --padding-small: 1rem;
-  --padding-medium: 1.5rem;
-  --padding-large: 2rem;
-  --size-x-small: 1.5rem;
-  --size-medium: 2.5rem;
-  --size-large: 3rem;
-  --size-x-large: 3.5rem;
-  --size-small: 2rem;
-  --size-2x-large: 4.5rem;
-  --size-2x-small: 1rem;
-  --spacing-column-gap-cards: 0.75rem;
-  --spacing-column-gap-chips: 0.5rem;
-  --spacing-column-margin-screen-mobile: 1.5rem;
-  --typescale-title-screen-paragraph-spacing: 0.5rem;
-  --typescale-title-section-paragraph-spacing: 0.5rem;
-}
-
-html {
-  --zindex-input: 1;
-  --zindex-input-hover: 2;
-  --zindex-input-focus: 3;
-  --zindex-input-active: 4;
-  --zindex-input-clear-button: 5;
-  --zindex-modal: 50;
-}
-
-@font-face {
-  font-family: "Bebas Neue";
-  src: url("../fonts/bebas-neue-v14-latin-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}.c-test {
-  border-radius: 0.25rem;
-}@font-face {
-  font-family: "Bebas Neue";
-  src: url("../fonts/bebas-neue-v14-latin-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-.c-badge {
-  font-family: var(--typescale-display-large-font, "Bebas Neue");
-  font-size: var(--typescale-display-large-font-size, 6rem);
-  font-weight: var(--typescale-display-large-weight, 700);
-  line-height: var(--typescale-display-large-line-height, 5.125rem);
-  letter-spacing: var(--typescale-display-large-letter-spacing, 0rem);
-  padding: var(--spacing-size-4, 0.25rem);
-  color: var(--color-system-content-secondary, #474747);
-  border-radius: 0.25rem;
-}
+*,:after,:before{box-sizing:border-box}*{margin:0;outline:none;padding:0}ol,ul{list-style:none}html:focus-within{scroll-behavior:smooth}a:not([class]){color:inherit;text-decoration-skip-ink:auto}canvas,img,picture,svg,video{background-repeat:no-repeat;background-size:cover;height:auto;max-width:100%;vertical-align:middle}button,input,select,textarea{background:none;border:none;color:inherit;font:inherit;outline:none}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;transition:none}}body,html{height:100%;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}button{cursor:pointer}:root{--box-shadow-1:0px 1px 0px 0px rgba(17,17,26,.1);--box-shadow-2:0px 1px 0px rgba(17,17,26,.05),0px 0px 8px rgba(17,17,26,.1);--opacity-disabled:0.38;--color-theme-core-bright:#317c6c;--color-theme-core-dark:#b80f0f;--color-system-content-primary:#0e0e0e;--color-system-content-secondary:#474747;--color-system-content-tertiary:#767676;--radius-radii-10:0.625rem;--radius-radii-16:1rem;--radius-radii-24:1.5rem;--radius-large-container:1rem;--radius-chip:0.5rem;--radius-medium-container:0.75rem;--spacing-size-4:0.25rem;--spacing-size-154:9.625rem;--spacing-size-0:0;--padding-x-small:0.5rem;--padding-small:1rem;--padding-medium:1.5rem;--padding-large:2rem;--size-x-small:1.5rem;--size-medium:2.5rem;--size-large:3rem;--size-x-large:3.5rem;--size-small:2rem;--size-2x-large:4.5rem;--size-2x-small:1rem;--spacing-column-gap-cards:0.75rem;--spacing-column-gap-chips:0.5rem;--spacing-column-margin-screen-mobile:1.5rem}.c-badge{border-radius:.25rem;color:var(--color-system-content-secondary,#474747);padding:var(--spacing-size-4,.25rem)}.c-typography{color:#111;margin:0}.c-typography-title{font-family:Author,Arial Black,Impact,sans-serif;font-size:4rem;font-weight:700;line-height:1.1}.c-typography-header .c-typography-body .c-typography-caption{font-family:Golos UI,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.c-typography-header{font-size:2rem;font-weight:500;line-height:1.3}.c-typography-body{font-size:1rem;font-weight:400;line-height:1.6}.c-typography-caption{font-size:.875rem;font-weight:400;line-height:1.4;opacity:.7}.c-test{border-radius:.25rem}