@minvws/manon-themes 17.0.0 → 18.0.0-alpha.1

package/icore-open/semantic/_index.scss

@@ -0,0 +1,40 @@
+@use "../core/color-scheme/" as color-scheme;
+
+// font
+$font-size: 1rem;
+$font-size: 1rem;
+$font-family:
+  "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  Helvetica, Arial, "Helvetica Neue", sans-serif;
+$font-family-secondary: serif;
+
+// @use "base";
+$base-background-color: #{color-scheme.$oc-gray-1};
+$base-darker: #{color-scheme.$oc-gray-2};
+$base-offset: #{color-scheme.$oc-gray-0};
+
+// @use "border";
+$color-border-default: #{color-scheme.$oc-gray-4};
+$color-border-subtle: #{color-scheme.$oc-gray-2};
+$color-border-intense: #{color-scheme.$oc-gray-6};
+
+// @use "brand";
+/* Primary */
+$color-brand-primary-default: #{color-scheme.$oc-blue-8};
+$color-brand-primary-muted: #{color-scheme.$oc-blue-3};
+$color-brand-primary-subtle: #{color-scheme.$oc-blue-0};
+
+/* Secundary */
+$color-brand-secondary-default: #{color-scheme.$oc-gray-9};
+$color-brand-secondary-muted: #{color-scheme.$oc-gray-7};
+$color-brand-secondary-subtle: #{color-scheme.$oc-gray-2};
+
+// @use "destructive";
+$color-destructive-default: #{color-scheme.$oc-red-8};
+$color-destructive-subtle: #{color-scheme.$oc-red-2};
+$color-destructive-intense: #{color-scheme.$oc-red-9};
+
+// @use "text";
+$color-text-default: #{color-scheme.$oc-gray-9};
+$color-text-subtle: #{color-scheme.$oc-gray-7};
+$color-text-intense: #{color-scheme.$oc-gray-2};

package/kat/_index.scss

@@ -0,0 +1,373 @@
+/* Theme configuration */
+@forward "config";
+
+/* Fonts (@font-faces) */
+@use "fonts";
+
+/* Core variables */
+/* These are core sets like color schemes, fonts
+and spacing sets */
+@use "core/border-radii" as border-radii;
+@use "core/color-scheme" as color-scheme;
+@use "core/shadow" as shadow;
+@use "core/spacing" as spacing;
+@use "core/typography/font-size/body-text" as body-text;
+@use "core/typography/font-size/heading" as heading;
+@use "core/typography/font-style" as font-style;
+@use "core/typography/font-weight" as font-weight;
+@use "core/typography/letter-spacing" as letter-spacing;
+@use "core/typography/line-height" as line-height;
+@use "core/typography/paragraph-spacing" as paragraph-spacing;
+
+/* Semantic variables */
+/* These are variables that have a semantic value. Like branding color */
+@use "semantic" as semantic;
+
+/* Component variables */
+@use "@minvws/manon/variables" with (
+  $theme-name: "kat",
+
+  // article
+  $article-gap: spacing.$spacing-200,
+
+  // avatar
+  $avatar-font-weight: bold,
+  $avatar-border-radius: 50%,
+  $avatar-background-color: semantic.$color-brand-primary,
+  $avatar-hover-background-color: semantic.$color-brand-primary-muted,
+
+  // base
+  $base-background-color: semantic.$base-background-color,
+  $base-font-size: 1rem,
+  $base-font-weight: 300,
+  $base-font-family: semantic.$font-family,
+
+  // button
+  $button-text-color: semantic.$color-text-default,
+  $button-background-color: semantic.$color-brand-primary,
+  $button-border-width: 0,
+  $button-border-color: semantic.$color-brand-primary,
+  $button-padding-top: spacing.$spacing-075,
+  $button-padding-right: spacing.$spacing-100,
+  $button-padding-bottom: spacing.$spacing-075,
+  $button-padding-left: spacing.$spacing-100,
+  $button-border-radius: border-radii.$border-radius-l,
+  $button-font-weight: font-weight.$font-weight-bold,
+  $button-font-size: body-text.$body-text-m,
+
+  // button hover
+  $button-hover-background-color: color-scheme.$yellow-300,
+  $button-hover-text-color: color-scheme.$grey-900,
+  $button-hover-border-color: color-scheme.$yellow-300,
+
+  // button destructive
+  $button-destructive-background-color: semantic.$color-destructive-default,
+  $button-destructive-text-color: color-scheme.$white,
+  $button-destructive-border-color: semantic.$color-destructive-default,
+
+  // button destructive hover
+  $button-destructive-hover-background-color: color-scheme.$red-600,
+  $button-destructive-hover-text-color: color-scheme.$white,
+  $button-destructive-hover-border-color: color-scheme.$red-600,
+
+  // button secondary
+  $button-secondary-background-color: color-scheme.$white,
+  $button-secondary-border-width: 1px,
+  $button-secondary-border-style: solid,
+  $button-secondary-border-color: color-scheme.$grey-200,
+  $button-secondary-text-color: color-scheme.$blue-600,
+
+  // breadcrumb bar
+  $breadcrumb-bar-padding-top: spacing.$spacing-050,
+  $breadcrumb-bar-padding-right: spacing.$spacing-100,
+  $breadcrumb-bar-padding-bottom: spacing.$spacing-050,
+  $breadcrumb-bar-padding-left: spacing.$spacing-100,
+  $breadcrumb-bar-background-color: semantic.$color-brand-secondary-subtle,
+  $breadcrumb-bar-link-text-decoration: none,
+  $breadcrumb-bar-gap: spacing.$spacing-050,
+
+  // code block
+  $code-block-padding: spacing.$spacing-200,
+  $code-block-background-color: semantic.$color-brand-secondary-subtle,
+  $code-block-border-radius: border-radii.$border-radius-s,
+
+  // expando rows
+  $expando-rows-border-width: 0 0 2px 0,
+  $expando-rows-border-style: solid,
+  $expando-rows-border-color: color-scheme.$violet-200,
+
+  // emphasized
+  $emphasized-font-size: body-text.$body-text-l,
+  $emphasized-font-weight: font-weight.$font-weight-medium,
+  $emphasized-line-height: line-height.$line-height-l,
+
+  // de-emphasized
+  $de-emphasized-font-size: body-text.$body-text-s,
+  $de-emphasized-font-weight: font-weight.$font-weight-regular,
+  $de-emphasized-line-height: line-height.$line-height-s,
+  $de-emphasized-text-color: color-scheme.$grey-700,
+
+  // form combined field
+  $form-combined-field-input-border-radius: #{border-radii.$border-radius-m} 0 0
+    #{border-radii.$border-radius-m},
+  $form-combined-field-button-border-radius: 0 #{border-radii.$border-radius-m}
+    #{border-radii.$border-radius-m} 0,
+  $form-combined-field-button-min-height: 3rem,
+
+  // footer
+  $footer-background-color: color-scheme.$white,
+  $footer-text-color: semantic.$color-text-default,
+  $footer-padding-top: spacing.$spacing-200,
+  $footer-padding-right: spacing.$spacing-300,
+  $footer-padding-bottom: spacing.$spacing-200,
+  $footer-padding-left: spacing.$spacing-300,
+  $footer-list-style: none,
+  $footer-gap: spacing.$spacing-100,
+  $footer-flex-wrap: wrap,
+  $footer-justify-content: space-between,
+  $footer-navigation-flex-direction: row,
+  $footer-border-width: 1px 0 0 0,
+  $footer-border-style: solid,
+  $footer-border-color: color-scheme.$grey-200,
+  $footer-min-height: 5.5rem,
+
+  // footer nav
+  $footer-navigation-gap: spacing.$spacing-200,
+  $footer-navigation-justify-content: space-between,
+  $footer-navigation-align-items: center,
+  $footer-navigation-flex-wrap: wrap,
+
+  // form
+  $form-align-items: flex-start,
+  $form-text-color: semantic.$color-text-default,
+  $form-gap: spacing.$spacing-200,
+  $form-max-width: 40rem,
+  $form-accent-color: semantic.$color-brand-primary,
+
+  // form group
+  $form-group-gap: spacing.$spacing-050,
+
+  // form input
+  $form-input-padding-top: spacing.$spacing-025,
+  $form-input-padding-right: spacing.$spacing-075,
+  $form-input-padding-bottom: spacing.$spacing-025,
+  $form-input-padding-left: spacing.$spacing-075,
+  $form-input-border-width: 1px,
+  $form-input-border-style: solid,
+  $form-input-border-color: color-scheme.$grey-500,
+  $form-input-border-radius: border-radii.$border-radius-s,
+  $form-input-min-height: 3rem,
+
+  // headings
+  $h1-font-family: semantic.$font-family-secondary,
+  $h1-font-size: heading.$heading-xxl,
+  $h2-font-family: semantic.$font-family-secondary,
+  $h2-font-size: heading.$heading-xl,
+  $h3-font-family: semantic.$font-family-secondary,
+  $h3-font-size: heading.$heading-l,
+  $h4-font-family: semantic.$font-family-secondary,
+  $h4-font-size: heading.$heading-m,
+  $h5-font-size: heading.$heading-s,
+  $h6-font-size: heading.$heading-xs,
+
+  // header
+  $header-background-color: color-scheme.$white,
+  $header-font-weight: bold,
+  $header-min-height: 3.5rem,
+  $header-text-color: semantic.$color-text-default,
+  $header-padding-right: spacing.$spacing-300,
+  $header-padding-left: spacing.$spacing-300,
+
+  // header nav
+  $header-navigation-width: 100%,
+  $header-navigation-gap: spacing.$spacing-200,
+  $header-navigation-justify-content: space-between,
+
+  // header list item
+  $header-list-item-align-items: center,
+
+  // header list item link
+  $header-link-align-items: center,
+  $header-link-padding: spacing.$spacing-100,
+  $header-link-text-decoration: none,
+  $header-link-border-width: 0 0 4px 0,
+  $header-link-border-style: solid,
+  $header-link-border-color: transparent,
+  $header-link-min-height: 100%,
+
+  // header current page
+  $header-link-current-text-color: semantic.$color-brand-secondary,
+  $header-link-current-border-width: 0 0 4px 0,
+  $header-link-current-border-style: solid,
+  $header-link-current-border-color: semantic.$color-brand-secondary,
+
+  // header content wrapper
+  $header-content-wrapper-flex-direction: row,
+  $header-content-wrapper-width: 100%,
+
+  // hero
+  $hero-height: 25rem,
+  $hero-max-width: calc(100% + 16rem),
+  $hero-width: calc(100% + 16rem),
+  $hero-margin: -4rem 0 0 -8rem,
+  $hero-border-radius: 0,
+  $hero-font-size: body-text.$body-text-l,
+  $hero-background-color: color-scheme.$violet-200,
+  $hero-justify-content: center,
+  $hero-flex-direction: column,
+  $hero-title-font-size: heading.$heading-xxl,
+  $hero-text-color: semantic.$color-text-default,
+  $hero-content-wrapper-padding: 0,
+  $hero-content-wrapper-max-width: 40rem,
+  $hero-content-wrapper-text-align: center,
+  $hero-content-wrapper-margin: 0 auto,
+  $hero-content-wrapper-background-color: transparent,
+
+  // link
+  $link-text-color: color-scheme.$blue-600,
+
+  // list
+  $list-gap: spacing.$spacing-050,
+  $list-item-padding: spacing.$spacing-025,
+
+  // link hover
+  $link-hover-text-color: color-scheme.$blue-800,
+
+  // link visited
+  $link-visited-text-color: color-scheme.$violet-600,
+  $link-visited-hover-text-color: color-scheme.$violet-800,
+
+  // logo
+  $logo-font-size: 0,
+  $logo-img-background-color: semantic.$color-text-default,
+  $logo-img-padding: 0.25rem 0.5rem,
+  $logo-img-border-radius: border-radii.$border-radius-s,
+
+  // nav
+  $navigation-link-text-decoration: none,
+
+  // notification
+  $notification-padding-top: spacing.$spacing-100,
+  $notification-padding-right: spacing.$spacing-100,
+  $notification-padding-bottom: spacing.$spacing-100,
+  $notification-padding-left: spacing.$spacing-100,
+  $notification-border-style: solid,
+  $notification-border-width: 1px,
+  $notification-gap: spacing.$spacing-100,
+  $notification-border-radius: border-radii.$border-radius-m,
+
+  // notification block element
+  $notification-block-element-padding-top: spacing.$spacing-100,
+  $notification-block-element-padding-right: spacing.$spacing-100,
+  $notification-block-element-padding-bottom: spacing.$spacing-100,
+  $notification-block-element-padding-left: spacing.$spacing-100,
+  $notification-block-element-gap: spacing.$spacing-050,
+
+  // notification type
+  $notification-span-font-weight: bold,
+
+  // notification error
+  $notification-error-background-color:
+    semantic.$color-notification-error-subtle,
+  $notification-error-text-color: semantic.$color-text-default,
+  $notification-error-border-color: color-scheme.$black-05,
+
+  // notification warning
+  $notification-warning-background-color:
+    semantic.$color-notification-warning-subtle,
+  $notification-warning-text-color: semantic.$color-text-default,
+  $notification-warning-border-color: color-scheme.$black-05,
+
+  // notification explanation
+  $notification-explanation-background-color:
+    semantic.$color-notification-explanation-subtle,
+  $notification-explanation-text-color: semantic.$color-text-default,
+  $notification-explanation-border-color: color-scheme.$black-05,
+
+  // notification confirmation
+  $notification-confirmation-background-color:
+    semantic.$color-notification-confirmation-subtle,
+  $notification-confirmation-text-color: semantic.$color-text-default,
+  $notification-confirmation-border-color: color-scheme.$black-05,
+
+  // notification system
+  $notification-system-background-color:
+    semantic.$color-notification-system-subtle,
+  $notification-system-text-color: semantic.$color-text-default,
+  $notification-system-border-color: color-scheme.$black-05,
+
+  // main
+  $main-padding-top: #{spacing.$spacing-400},
+  $main-padding-right: #{spacing.$spacing-800},
+  $main-padding-bottom: #{spacing.$spacing-400},
+  $main-padding-left: #{spacing.$spacing-800},
+  $main-gap: #{spacing.$spacing-250},
+
+  // section
+  $section-padding-top: spacing.$spacing-100,
+  $section-padding-right: spacing.$spacing-100,
+  $section-padding-bottom: spacing.$spacing-100,
+  $section-padding-left: spacing.$spacing-100,
+  $section-max-width: 90rem,
+  $section-gap: spacing.$spacing-200,
+  $section-flex-direction: column,
+
+  // sidemenu page
+  $sidemenu-page-padding-top: spacing.$spacing-400,
+  $sidemenu-page-padding-right: spacing.$spacing-400,
+  $sidemenu-page-padding-bottom: spacing.$spacing-400,
+  $sidemenu-page-padding-left: spacing.$spacing-400,
+
+  // sidemenu nav
+  $sidemenu-nav-width: 20rem,
+  $sidemenu-nav-padding-top: spacing.$spacing-400,
+  $sidemenu-nav-padding-right: spacing.$spacing-200,
+  $sidemenu-nav-padding-bottom: spacing.$spacing-400,
+  $sidemenu-nav-padding-left: spacing.$spacing-200,
+  $sidemenu-nav-border-width: 0 1px 0 0,
+  $sidemenu-nav-border-style: solid,
+  $sidemenu-nav-border-color: color-scheme.$grey-200,
+
+  // tabs
+  $tabs-gap: spacing.$spacing-100,
+  $tabs-item-border-color: color-scheme.$grey-200,
+  $tabs-item-border-style: solid,
+  $tabs-item-border-width: 0 0 1px 0,
+  $tabs-item-padding: spacing.$spacing-050 0,
+  $tabs-item-text-color: color-scheme.$grey-600,
+  $tabs-item-text-decoration: none,
+  $tabs-item-current-border-color: color-scheme.$violet-500,
+  $tabs-item-current-border-width: 0 0 2px 0,
+  $tabs-item-current-font-weight: bold,
+  $tabs-item-current-text-color: semantic.$color-text-default,
+  $tabs-item-hover-text-color: semantic.$color-text-default,
+
+  // table
+  $table-head-border-width: 0 0 2px 0,
+  $table-head-border-style: solid,
+  $table-head-border-color: semantic.$color-brand-secondary,
+  $table-head-text-align: left,
+
+  // table head
+  $table-head-padding: spacing.$spacing-075 spacing.$spacing-075
+    spacing.$spacing-075 0,
+
+  // table cell
+  $table-cell-border-width: 0 0 1px 0,
+  $table-cell-border-style: solid,
+  $table-cell-border-color: color-scheme.$grey-150,
+  $table-cell-padding: spacing.$spacing-075 spacing.$spacing-075
+    spacing.$spacing-075 0,
+
+  // table foot
+  $table-foot-header-padding: spacing.$spacing-075 spacing.$spacing-075
+    spacing.$spacing-075 0,
+
+  // table caption
+  $table-caption-text-align: left,
+  $table-caption-text-color: color-scheme.$grey-700,
+  $table-caption-font-size: body-text.$body-text-s,
+
+  // helpers
+  $horizontal-gap: spacing.$spacing-100
+);

package/kat/config/_index.scss

@@ -0,0 +1,2 @@
+$font-path: "@minvws/manon-themes/kat/fonts" !default;
+$font-display: swap !default;

package/kat/core/border-radii.scss

@@ -0,0 +1,35 @@
+$border-radius-xs: 0.125rem;
+$border-radius-s: 0.25rem;
+$border-radius-m: 0.5rem;
+$border-radius-l: 1rem;
+$border-radius-xl: 1.5rem;
+$border-radius-xxl: 2rem;
+$border-radius-round: 50%;
+
+.border-radius-xs {
+  border-radius: $border-radius-xs;
+}
+
+.border-radius-s {
+  border-radius: $border-radius-s;
+}
+
+.border-radius-m {
+  border-radius: $border-radius-m;
+}
+
+.border-radius-l {
+  border-radius: $border-radius-l;
+}
+
+.border-radius-xl {
+  border-radius: $border-radius-xl;
+}
+
+.border-radius-xxl {
+  border-radius: $border-radius-xxl;
+}
+
+.border-radius-round {
+  border-radius: $border-radius-round;
+}

package/kat/core/color-scheme/_index.scss

@@ -0,0 +1 @@
+@forward "colors";

package/kat/core/color-scheme/colors.scss

@@ -0,0 +1,116 @@
+$white: #ffffff;
+
+/* Black */
+$black: #000000;
+$black-05: rgb(0 0 0 / 5%);
+$black-10: rgb(0 0 0 / 10%);
+$black-15: rgb(0 0 0 / 15%);
+
+/* Grey */
+$grey-50: #f6f6f6;
+$grey-100: #ededed;
+$grey-150: #efefef;
+$grey-200: #d4d4d4;
+$grey-300: #bcbcbc;
+$grey-400: #a4a4a4;
+$grey-500: #888888;
+$grey-600: #6a6a6a;
+$grey-700: #585858;
+$grey-800: #4b4b4b;
+$grey-900: #3b3b3b;
+
+/* Red */
+$red-50: #fff4f3;
+$red-100: #ffe9e7;
+$red-150: #ffc7c3;
+$red-200: #ffa49d;
+$red-300: #ff7d73;
+$red-400: #f95f53;
+$red-500: #f84638;
+$red-600: #c3372c;
+$red-700: #a22e25;
+$red-800: #8a271f;
+$red-900: #6e1f19;
+$red-1000: #531713;
+
+/* Blue */
+$blue-50: #eef8fe;
+$blue-100: #ddf0fc;
+$blue-150: #c7e7fa;
+$blue-200: #abdbf8;
+$blue-300: #78c5f4;
+$blue-400: #40adef;
+$blue-500: #008de4;
+$blue-600: #006fb3;
+$blue-700: #005c94;
+$blue-800: #004e7e;
+$blue-900: #003e64;
+$blue-1000: #002033;
+
+/* Yellow */
+$yellow-50: #fff7cf;
+$yellow-100: #ffef99;
+$yellow-150: #ffe661;
+$yellow-200: #f9d100;
+$yellow-300: #ddb900;
+$yellow-400: #c1a200;
+$yellow-500: #a08700;
+$yellow-600: #7d6900;
+$yellow-700: #685700;
+$yellow-800: #584a00;
+$yellow-900: #463b00;
+
+/* Green */
+$green-50: #ebfaef;
+$green-100: #d5f5de;
+$green-150: #b0edc1;
+$green-200: #94e6ab;
+$green-300: #4ad571;
+$green-400: #20bd4c;
+$green-500: #1b9d3f;
+$green-600: #157b31;
+$green-700: #116629;
+$green-800: #0f5723;
+$green-900: #134421;
+$green-1000: #09200f;
+
+/* Orange */
+$orange-50: #fff5ed;
+$orange-100: #ffead9;
+$orange-150: #ffdcc2;
+$orange-200: #ffcaa1;
+$orange-250: #ffb780;
+$orange-300: #ffa865;
+$orange-400: #ff8120;
+$orange-500: #d66a17;
+$orange-600: #a75312;
+$orange-700: #8b450f;
+$orange-800: #763b0d;
+$orange-900: #5e2f0a;
+$orange-1000: #2e1705;
+
+/* Purple */
+$violet-50: #f7f6fc;
+$violet-100: #eeecf8;
+$violet-200: #d6d1ef;
+$violet-300: #bfb6e6;
+$violet-400: #a89cdd;
+$violet-500: #8c7cd2;
+$violet-600: #6e5fae;
+$violet-700: #5b4f90;
+$violet-800: #4d437a;
+$violet-900: #3d3560;
+$violet-1000: #1f1b31;
+
+/* Ochre */
+$ochre-50: #fff7e0;
+$ochre-100: #ffeaae;
+$ochre-150: #fedc7b;
+$ochre-200: #fecf48;
+$ochre-300: #ecb927;
+$ochre-400: #d4a00c;
+$ochre-500: #a87f05;
+$ochre-600: #916f08;
+$ochre-700: #614a05;
+$ochre-800: #584304;
+$ochre-900: #493803;

package/kat/core/shadow.scss

@@ -0,0 +1,2 @@
+$shadow-s: 4;
+$shadow-m: 8;

package/kat/core/spacing.scss

@@ -0,0 +1,90 @@
+$spacing-0: 0;
+$spacing-0125: 0.125rem;
+$spacing-025: 0.25rem;
+$spacing-0375: 0.375rem;
+$spacing-050: 0.5rem;
+$spacing-075: 0.75rem;
+$spacing-100: 1rem;
+$spacing-125: 1.25rem;
+$spacing-150: 1.5rem;
+$spacing-175: 1.75rem;
+$spacing-200: 2rem;
+$spacing-225: 2.25rem;
+$spacing-250: 2.5rem;
+$spacing-300: 3rem;
+$spacing-400: 4rem;
+$spacing-500: 5rem;
+$spacing-800: 8rem;
+$spacing-1200: 12rem;
+
+.spacing-0 {
+  gap: $spacing-0;
+}
+
+.spacing-0125 {
+  gap: $spacing-0125;
+}
+
+.spacing-025 {
+  gap: $spacing-025;
+}
+
+.spacing-0375 {
+  gap: $spacing-0375;
+}
+
+.spacing-050 {
+  gap: $spacing-050;
+}
+
+.spacing-075 {
+  gap: $spacing-075;
+}
+
+.spacing-100 {
+  gap: $spacing-100;
+}
+
+.spacing-125 {
+  gap: $spacing-125;
+}
+
+.spacing-150 {
+  gap: $spacing-150;
+}
+
+.spacing-175 {
+  gap: $spacing-175;
+}
+
+.spacing-200 {
+  gap: $spacing-200;
+}
+
+.spacing-225 {
+  gap: $spacing-225;
+}
+
+.spacing-250 {
+  gap: $spacing-250;
+}
+
+.spacing-300 {
+  gap: $spacing-300;
+}
+
+.spacing-400 {
+  gap: $spacing-400;
+}
+
+.spacing-500 {
+  gap: $spacing-500;
+}
+
+.spacing-800 {
+  gap: $spacing-800;
+}
+
+.spacing-1200 {
+  gap: $spacing-1200;
+}

package/kat/core/typography/font-size/body-text.scss

@@ -0,0 +1,3 @@
+$body-text-s: 0, 875rem;
+$body-text-m: 1rem;
+$body-text-l: 1.5rem;

package/kat/core/typography/font-size/heading.scss

@@ -0,0 +1,6 @@
+$heading-xs: 0.875rem;
+$heading-s: 1.25rem;
+$heading-m: 1.5rem;
+$heading-l: 1.75rem;
+$heading-xl: 2rem;
+$heading-xxl: 2.25rem;

package/kat/core/typography/font-style.scss

@@ -0,0 +1,2 @@
+$font-style-normal: regular;
+$font-style-italic: italic;

package/kat/core/typography/font-weight.scss

@@ -0,0 +1,4 @@
+$font-weight-regular: regular;
+$font-weight-medium: medium;
+$font-weight-semibold: semibold;
+$font-weight-bold: bold;

package/kat/core/typography/letter-spacing.scss

@@ -0,0 +1 @@
+$letter-spacing: 0.15;

package/kat/core/typography/line-height.scss

@@ -0,0 +1,6 @@
+$line-height-xs: 1.25;
+$line-height-s: 1.375;
+$line-height-m: 1.5;
+$line-height-l: 1.75;
+$line-height-xl: 2.125;
+$line-height-xxl: 3;