@jotyping/jo-designsystem 0.1.12-alpha → 0.1.14-alpha

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Jo Design System",
-  "version": "0.1.12-alpha",
+  "version": "0.1.14-alpha",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/button/jd-button.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -7,16 +7,16 @@
 
 :host([active]) button {
   &.primary {
-    color: colors.$color-black;
-    background-color: colors.$color-white;
+    color: tokens.$color-black;
+    background-color: tokens.$color-white;
   }
   &.secondary {
     color: #3a3a3a;
-    background-color: colors.$color-white;
-    outline: 3px solid colors.$color-black;
+    background-color: tokens.$color-white;
+    outline: 3px solid tokens.$color-black;
     outline-offset: -3px;
     &:hover {
-      outline: 4px solid colors.$color-black;
+      outline: 4px solid tokens.$color-black;
       outline-offset: -4px;
     }
   }
@@ -34,22 +34,22 @@ button {
   overflow: hidden;
   text-overflow: ellipsis;
   &.primary {
-    color: colors.$color-black;
-    background-color: colors.$color-white;
-    outline: 3px solid colors.$color-black;
+    color: tokens.$color-black;
+    background-color: tokens.$color-white;
+    outline: 3px solid tokens.$color-black;
     outline-offset: -3px;
     &:hover {
-      outline: 4px solid colors.$color-black;
+      outline: 4px solid tokens.$color-black;
       outline-offset: -4px;
     }
   }
   &.secondary {
     color: #3a3a3a;
-    background-color: colors.$color-white;
-    outline: 1px solid colors.$color-neutral-200;
+    background-color: tokens.$color-white;
+    outline: 1px solid tokens.$color-neutral-200;
     outline-offset: -1px;
     &:hover {
-      outline: 3px solid colors.$color-neutral-200;
+      outline: 3px solid tokens.$color-neutral-200;
       outline-offset: -3px;
     }
   }

package/src/components/flash/jd-flash.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -23,18 +23,18 @@
     @include mixins.font-03-subheadline;
   }
   &.red {
-    color: colors.$color-accent-red;
+    color: tokens.$color-accent-red;
   }
   &.purple {
-    color: colors.$color-accent-purple;
+    color: tokens.$color-accent-purple;
   }
   &.blue {
-    color: colors.$color-accent-blue;
+    color: tokens.$color-accent-blue;
   }
 }
 
 .icon-wrapper {
-  color: colors.$color-black;
+  color: tokens.$color-black;
   &.m,
   &.l {
     width: 72px;

package/src/components/footer/jd-footer.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: block;
@@ -7,7 +7,7 @@
 .footer-wrapper {
   display: flex;
   justify-content: start;
-  border-top: 2px solid colors.$color-black;
+  border-top: 2px solid tokens.$color-black;
   @include mixins.font-03-copy;
   &.s {
     flex-direction: column;
@@ -38,5 +38,5 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  color: colors.$color-black;
+  color: tokens.$color-black;
 }

package/src/components/header/jd-header.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: block;
@@ -43,6 +43,6 @@
 
 .logo {
   @include mixins.font-logo;
-  color: colors.$color-black;
+  color: tokens.$color-black;
   cursor: pointer;
 }

package/src/components/heading/jd-heading.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -12,7 +12,7 @@
 }
 
 .title-wrapper {
-  color: colors.$color-black;
+  color: tokens.$color-black;
   display: flex;
   flex-direction: column;
   gap: 0px;
@@ -28,7 +28,7 @@
 }
 
 .subtitle-wrapper {
-  color: colors.$color-black;
+  color: tokens.$color-black;
   &.l {
     @include mixins.font-01-subheadline;
   }

package/src/components/icon/jd-icon.scss

@@ -1,4 +1,4 @@
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -9,27 +9,27 @@
   align-items: center;
   justify-content: center;
   &.blue {
-    color: colors.$color-accent-blue;
+    color: tokens.$color-accent-blue;
   }
   &.red {
-    color: colors.$color-accent-red;
+    color: tokens.$color-accent-red;
   }
   &.purple {
-    color: colors.$color-accent-purple;
+    color: tokens.$color-accent-purple;
   }
   &.black {
-    color: colors.$color-black;
+    color: tokens.$color-black;
   }
   &.white {
-    color: colors.$color-white;
+    color: tokens.$color-white;
   }
   &.neutral-200 {
-    color: colors.$color-neutral-200;
+    color: tokens.$color-neutral-200;
   }
   &.neutral-400 {
-    color: colors.$color-neutral-400;
+    color: tokens.$color-neutral-400;
   }
   &.neutral-600 {
-    color: colors.$color-neutral-600;
+    color: tokens.$color-neutral-600;
   }
 }

package/src/components/icon-button/jd-icon-button.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -9,7 +9,7 @@
 
 :host([active]) button {
   &.borderless {
-    color: colors.$color-black;
+    color: tokens.$color-black;
   }
 }
 
@@ -20,16 +20,16 @@ button {
   width: 48px;
   height: 48px;
   &.borderless {
-    color: colors.$color-black;
-    background-color: colors.$color-white;
+    color: tokens.$color-black;
+    background-color: tokens.$color-white;
     &:hover {
-      color: colors.$color-accent-red;
+      color: tokens.$color-accent-red;
     }
   }
   &.border {
     color: #3a3a3a;
-    background-color: colors.$color-white;
-    outline: 2px solid colors.$color-black;
+    background-color: tokens.$color-white;
+    outline: 2px solid tokens.$color-black;
     outline-offset: -2px;
     border-radius: 24px;
   }

package/src/components/image-link/jd-image-link.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -13,11 +13,11 @@
 }
 
 a {
-  color: colors.$color-black;
+  color: tokens.$color-black;
   text-decoration: none;
   background-color: transparent;
   &:hover {
-    color: colors.$color-black;
+    color: tokens.$color-black;
   }
 }
 
@@ -32,7 +32,7 @@ a {
 }
 
 .divider {
-  border-bottom: solid 2px colors.$color-black;
+  border-bottom: solid 2px tokens.$color-black;
   height: 1px;
 }
 

package/src/components/link/jd-link.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -13,11 +13,11 @@
 }
 
 a {
-  color: colors.$color-black;
+  color: tokens.$color-black;
   text-decoration: none;
   background-color: transparent;
   &:hover {
-    color: colors.$color-black;
+    color: tokens.$color-black;
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 6px;

package/src/components/modal/jd-modal.scss

@@ -1,9 +1,9 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 .content {
   display: flex;
-  background-color: colors.$color-white;
+  background-color: tokens.$color-white;
   position: fixed;
   &.s {
     top: 0;

package/src/components/tag/jd-tag.scss

@@ -1,5 +1,5 @@
 @use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/colors.scss" as colors;
+@use "/src/styles/tokens.scss" as tokens;
 
 :host {
   display: inline-block;
@@ -14,6 +14,6 @@
   border-radius: 32px;
   height: 64px;
   border: none;
-  color: colors.$color-black;
-  background-color: colors.$color-neutral-200;
+  color: tokens.$color-black;
+  background-color: tokens.$color-neutral-200;
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 import "./styles/variables.scss";
-import "./styles/font.css";
+import "./styles/fonts.css";
 
 export * from "./components/button/jd-button.js";
 export * from "./components/flash/jd-flash.js";

package/src/styles/_mixins.scss

@@ -1,91 +1,91 @@
-@use "fonts" as font;
+@use "tokens" as token;
 
-/* Regular fonts */
+/* Regular tokens */
 @mixin font-01-copy {
-  font-family: #{font.$font-regular};
-  font-size: #{font.$font-size-01-copy}; /* 34x */
-  line-height: #{font.$line-height-01-copy}; /* 52px */
+  font-family: #{token.$font-regular};
+  font-size: #{token.$font-size-01-copy}; /* 34x */
+  line-height: #{token.$line-height-01-copy}; /* 52px */
 }
 
 @mixin font-02-copy {
-  font-family: #{font.$font-regular};
-  font-size: #{font.$font-size-02-copy}; /* 28x */
-  line-height: #{font.$line-height-02-copy}; /* 42px */
+  font-family: #{token.$font-regular};
+  font-size: #{token.$font-size-02-copy}; /* 28x */
+  line-height: #{token.$line-height-02-copy}; /* 42px */
 }
 
 @mixin font-03-copy {
-  font-family: #{font.$font-regular};
-  font-size: #{font.$font-size-03-copy}; /* 22x */
-  line-height: #{font.$line-height-03-copy}; /* 32px */
+  font-family: #{token.$font-regular};
+  font-size: #{token.$font-size-03-copy}; /* 22x */
+  line-height: #{token.$line-height-03-copy}; /* 32px */
 }
 
 /* Italic fonts */
 @mixin font-01-copy-italic {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-01-copy}; /* 34x */
-  line-height: #{font.$line-height-01-copy}; /* 52px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-01-copy}; /* 34x */
+  line-height: #{token.$line-height-01-copy}; /* 52px */
 }
 
 @mixin font-02-copy-italic {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-02-copy}; /* 28x */
-  line-height: #{font.$line-height-02-copy}; /* 42px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-02-copy}; /* 28x */
+  line-height: #{token.$line-height-02-copy}; /* 42px */
 }
 
 @mixin font-03-copy-italic {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-03-copy}; /* 22x */
-  line-height: #{font.$line-height-03-copy}; /* 32px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-03-copy}; /* 22x */
+  line-height: #{token.$line-height-03-copy}; /* 32px */
 }
 
 /* Button fonts */
 @mixin font-button {
-  font-family: #{font.$font-bold};
-  font-size: #{font.$font-size-button}; /* 24x */
-  line-height: #{font.$line-height-button}; /* 42px */
+  font-family: #{token.$font-bold};
+  font-size: #{token.$font-size-button}; /* 24x */
+  line-height: #{token.$line-height-button}; /* 42px */
 }
 
 /* Headline fonts */
 @mixin font-01-headline {
-  font-family: #{font.$font-black};
-  font-size: #{font.$font-size-01-headline}; /* 130px */
-  line-height: #{font.$line-height-01-headline}; /* 112px */
+  font-family: #{token.$font-black};
+  font-size: #{token.$font-size-01-headline}; /* 130px */
+  line-height: #{token.$line-height-01-headline}; /* 112px */
 }
 
 @mixin font-02-headline {
-  font-family: #{font.$font-black};
-  font-size: #{font.$font-size-02-headline}; /* 100x */
-  line-height: #{font.$line-height-02-headline}; /* 90px */
+  font-family: #{token.$font-black};
+  font-size: #{token.$font-size-02-headline}; /* 100x */
+  line-height: #{token.$line-height-02-headline}; /* 90px */
 }
 
 @mixin font-03-headline {
-  font-family: #{font.$font-black};
-  font-size: #{font.$font-size-03-headline}; /* 80x */
-  line-height: #{font.$line-height-03-headline}; /* 72px */
+  font-family: #{token.$font-black};
+  font-size: #{token.$font-size-03-headline}; /* 80x */
+  line-height: #{token.$line-height-03-headline}; /* 72px */
 }
 
 /* Subheadline fonts */
 @mixin font-01-subheadline {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-01-subheadline}; /* 130x */
-  line-height: #{font.$line-height-01-subheadline}; /* 112px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-01-subheadline}; /* 130x */
+  line-height: #{token.$line-height-01-subheadline}; /* 112px */
 }
 
 @mixin font-02-subheadline {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-02-subheadline}; /* 100x */
-  line-height: #{font.$line-height-02-subheadline}; /* 90px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-02-subheadline}; /* 100x */
+  line-height: #{token.$line-height-02-subheadline}; /* 90px */
 }
 
 @mixin font-03-subheadline {
-  font-family: #{font.$font-italic};
-  font-size: #{font.$font-size-03-subheadline}; /* 80x */
-  line-height: #{font.$line-height-03-subheadline}; /* 72px */
+  font-family: #{token.$font-italic};
+  font-size: #{token.$font-size-03-subheadline}; /* 80x */
+  line-height: #{token.$line-height-03-subheadline}; /* 72px */
 }
 
 /* Logo font */
 @mixin font-logo {
-  font-family: #{font.$font-black};
+  font-family: #{token.$font-black};
   font-size: 30px;
   line-height: 168px;
 }

package/src/styles/{_fonts.scss → _tokens.scss}

@@ -1,4 +1,4 @@
-@import "font.css";
+@import "fonts.css";
 
 /* --- FONT FAMILIES --- */
 $font-regular: "Satoshi_Regular", sans-serif;
@@ -37,3 +37,14 @@ $line-height-02-subheadline: 50px;
 
 $font-size-03-subheadline: 34px;
 $line-height-03-subheadline: 36px;
+
+$color-black: #3a3a3a;
+$color-white: #ffffff;
+
+$color-neutral-200: #f3f3f3;
+$color-neutral-400: #d5d5d5;
+$color-neutral-600: #898989;
+
+$color-accent-blue: #2a91ff;
+$color-accent-purple: #bf2aff;
+$color-accent-red: #ff4d2a;

package/src/styles/fonts.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Satoshi_Regular";
+  font-display: swap;
+  src: url(../assets/satoshi-regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Bold";
+  font-display: swap;
+  src: url(../assets/satoshi-bold.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Black";
+  font-display: swap;
+  src: url(../assets/satoshi-black.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Italic";
+  font-display: swap;
+  src: url(../assets/satoshi-italic.ttf) format("truetype");
+}

package/src/styles/variables.scss

@@ -1,5 +1,4 @@
-@use "fonts" as font;
-@use "colors" as color;
+@use "tokens" as t;
 @use "mixins" as *;
 
 body,