@microphi/styles 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.2.0 (2024-11-15)
+
+### Features
+
+* **styles:** fix deprecation warnings ([4fba924](https://example.com/commits/4fba924c5bcbfa9e4019cdfee33019e16561fbff))
+
+# [1.1.0](/compare/v0.2.10...v1.1.0) (2023-01-16)
+
+**Note:** Version bump only for package @microphi/styles

package/README.md

@@ -0,0 +1,122 @@
+# fx-scss
+
+Welcome to the **fx-scss**, a flex first set of css classes to ease
+
+## Motivations
+While working on Microgamma we went through all available scss libraries. All lacked a flex first approach to layouting.
+We believe in a flex first approach when it comes to layouting. This library is the result of our though process in term of layouting and utilities.
+
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Getting Started](#getting-started)
+- [Folder Structure](#folder-structure)
+- [Customization](#customization)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Modular Architecture:** A well-organized structure with reusable components and utilities.
+- **Flex layout system:** Flex layout system for clear and powerful layouting.
+- **Utility Classes:** Commonly used utility classes for margin, padding, colors, typography, etc.
+# - **Mixins and Functions:** Custom mixins and functions to reduce repetitive CSS and enhance your workflow.
+# - **Theming Support:** Easy customization of themes through variables for colors, typography, and other design elements.
+- **Compatibility:** Fully compatible with modern browsers and responsive across all device sizes.
+
+## Installation
+
+Install using your favorite package manager
+
+```bash
+@microphi/flexus
+```
+
+Alternatively, you can manually download the SCSS files and include them in your project.
+
+## Getting Started
+
+library_name is made of the following scss modules
+
+
+```scss
+@import 'path/to/scss-library/main.scss';
+```
+
+This will include the core styles and utilities in your project. You can then start building your styles on top of the provided components.
+
+### Example Usage
+
+Here's a basic example using the grid system and utility classes:
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col-6">
+      <p class="text-primary">This is a column</p>
+    </div>
+    <div class="col-6">
+      <p class="text-secondary">This is another column</p>
+    </div>
+  </div>
+</div>
+```
+
+## Folder Structure
+
+The SCSS library follows a clean, modular structure:
+
+```
+scss-library/
+│
+├── base/           # Base styles (normalize, resets, typography, etc.)
+├── components/     # Reusable components (buttons, cards, forms, etc.)
+├── layout/         # Layout helpers (grid, containers, spacing, etc.)
+├── mixins/         # Utility mixins (media queries, typography helpers, etc.)
+├── themes/         # Theming (color palettes, variables, dark/light modes)
+└── utilities/      # Utility classes (margin, padding, display, etc.)
+```
+
+### Key Files
+
+- `main.scss`: The primary file to import into your project.
+- `variables.scss`: Defines default variables for colors, typography, spacing, etc.
+- `mixins.scss`: Contains mixins to simplify responsive design, typography, and other features.
+
+## Customization
+
+The library is designed to be easily customizable. You can override the default variables by creating your own SCSS file and importing the library below your custom settings:
+
+```scss
+// Custom variables
+$primary-color: #007bff;
+$secondary-color: #6c757d;
+
+// Import library after customizations
+@import 'path/to/scss-library/main.scss';
+```
+
+### Theming
+
+To create a custom theme, simply modify the variables in the `themes/` folder or define new ones in your project. You can switch between themes dynamically by overriding these variables.
+
+## Contributing
+
+We welcome contributions to improve the library! To contribute, please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix.
+3. Make your changes and ensure all SCSS is properly compiled.
+4. Submit a pull request with a detailed explanation of your changes.
+
+Please follow the [contribution guidelines](CONTRIBUTING.md) for more details.
+
+## License
+
+This SCSS library is open-source and available under the [MIT License](LICENSE).
+
+---
+
+Feel free to open an issue if you have any questions or run into any issues while using the library. Happy coding!

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@microphi/styles",
+  "version": "1.2.0",
+  "description": "helper styles",
+  "scripts": {},
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": " "
+  },
+  "keywords": [
+    "styles",
+    "css",
+    "scss",
+    "helpers"
+  ],
+  "author": "cavaliere.davide@gmail.com",
+  "license": "ISC",
+  "devDependencies": {
+    "utopia-core-scss": "*"
+  },
+  "peerDependencies": {
+    "utopia-core-scss": "^1.2.0"
+  }
+}

package/scss/_border-radius.scss

@@ -0,0 +1,23 @@
+@import "variables";
+@import "mixins";
+
+$radius-map: (
+  "border-radius": (
+    property: border-radius,
+    shortcut: rounded,
+    values: (
+      none: 0px,
+      sm: $space-base * 0.125,
+      base: $space-base * 0.25,
+      lg: $space-base * 0.5,
+      xl: $space-base * 0.75,
+      2xl: $space-base * 1,
+      3xl: $space-base * 1.5,
+      full: 9999px
+    )
+  ),
+);
+
+@each $key, $utility in $radius-map {
+  @include generate-utilities($utility)
+}

package/scss/_display.scss

@@ -0,0 +1,28 @@
+@use "variables" as v;
+@use "mixins" as m;
+
+$display-map: (
+  "display": (
+    property: display,
+    shortcut: null,
+    values: (block, inline-block, inline, flex, inline-flex)
+  ),
+  "overflow": (
+    property: overflow,
+    shortcut: 'overflow',
+    values: (hidden, auto)
+  )
+);
+
+@each $key, $utility in $display-map {
+  @include m.generate-utilities($utility)
+}
+
+
+.#{v.$prefix}-hidden {
+  display: none;
+}
+
+@include m.generate-mq(#{v.$prefix}-hidden) {
+  display: none !important;
+}

package/scss/_flex.scss

@@ -0,0 +1,74 @@
+@use "variables" as var;
+@use "mixins" as mix;
+
+// Flex utilities map
+$flex-map: (
+  "flex": (
+    property: flex,
+    values: (
+      1: 1 0 0,
+      auto: 1 1 auto,
+      initial: 0 1 auto,
+      none: none,
+    )
+  ),
+  "flex-direction": (
+    property: flex-direction,
+    shortcut: flex,
+    values: (
+      row: row,
+      row-reverse: row-reverse,
+      col: column,
+      col-reverse: column-reverse
+    )
+  ),
+  "flex-wrap": (
+    property: flex-wrap,
+    shortcut: flex,
+    values: (wrap, wrap-reverse, nowrap)
+  ),
+  "flex-grow": (
+    property: flex-grow,
+    shortcut: grow,
+    values: (1, 0)
+  ),
+  "flex-shrink": (
+    property: flex-shrink,
+    shortcut: shrink,
+    values: (1, 0)
+  ),
+  "justify-content": (
+    property: justify-content,
+    shortcut: justify,
+    values: (
+      normal: normal,
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+      stretch: stretch
+    )
+  ),
+  "align-items": (
+    property: align-items,
+    shortcut: items,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch
+    )
+  ),
+  "gap": (
+    property: gap,
+    shortcut: gap,
+    values: var.$values
+  ),
+);
+
+@each $key, $utility in $flex-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_fx-flex.scss

@@ -0,0 +1,259 @@
+// flex utilities
+.fx-flex {
+  display: flex;
+}
+
+.fx-flex-fill {
+  width: 100%;
+  height: 100%;
+}
+
+.fx-fill-column {
+  height: 100%;
+}
+
+.fx-fill-row {
+  width: 100%;
+}
+
+.fx-flex-grow {
+  flex-grow: 1;
+}
+
+@mixin styles($prefix: '') {
+  $actual-prefix: if($prefix == '', '', #{$prefix}--);
+
+  .#{$actual-prefix}hidden {
+    display: none !important;
+  }
+
+  .#{$actual-prefix}fx-flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$actual-prefix}fx-flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$actual-prefix}fx-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .#{$actual-prefix}fx-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .#{$actual-prefix}fx-flex-align-items-center {
+    align-items: center;
+  }
+
+  .#{$actual-prefix}fx-flex-align-items-baseline {
+    align-items: baseline;
+  }
+
+  .#{$actual-prefix}fx-flex-justify-center {
+    justify-content: center;
+  }
+
+  .#{$actual-prefix}fx-flex-align-items-start {
+    align-items: flex-start;
+  }
+
+  .#{$actual-prefix}fx-flex-align-items-end {
+    align-items: flex-end;
+  }
+
+  .#{$actual-prefix}fx-flex-align-items-baseline {
+    align-items: baseline;
+  }
+
+  .#{$actual-prefix}fx-flex-align-center-center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .#{$actual-prefix}fx-flex-justify-space-evenly {
+    justify-content: space-around;
+  }
+
+  .#{$actual-prefix}fx-flex-justify-space-around {
+    justify-content: space-around;
+  }
+
+  .#{$actual-prefix}fx-flex-justify-space-between {
+    justify-content: space-between;
+  }
+
+  .#{$actual-prefix}fx-flex-justify-end {
+    justify-content: end;
+  }
+
+
+  $i: 0;
+  @while $i <= 100 {
+
+    .#{$actual-prefix}fx-w-#{$i} {
+      width: #{$i}vw;
+    }
+
+    .#{$actual-prefix}fx-h-#{$i} {
+      height: #{$i}vh;
+    }
+
+
+    // do stuff
+    $i: $i + 10;
+  }
+
+  .#{$actual-prefix}fx-flex-grow {
+    flex-grow: 1;
+  }
+
+  $j: 0;
+
+  @while $j < 4 {
+
+    .#{$actual-prefix}fx-flex-grow-#{$j} {
+      flex-grow: $j;
+    }
+
+    $j: $j + 1;
+
+  }
+}
+
+@include styles();
+
+@media (min-aspect-ratio: 4/4) {
+  /* Styles for wide screens */
+  @include styles('wider');
+
+}
+
+@media (min-aspect-ratio: 5/4) {
+  /* Styles for very wide screens */
+  @include styles('very-wide');
+}
+
+
+@media (max-aspect-ratio: 4/4) {
+  /* Styles for tall screens */
+  @include styles('taller');
+}
+
+$breakpoints : (
+  '': null,
+  'xs-': 400,
+  'sm-': 750,
+  'md-': 900,
+  'lg-': 1200,
+  'xlg-': 1450,
+) !default;
+
+@each $media-shortcut, $max-width in $breakpoints {
+
+  @if $max-width != null {
+    @media (max-width: #{$max-width}px) {
+
+      .below-#{$media-shortcut} {
+
+        &-hidden {
+          display: none !important;
+        }
+
+        &-fx-flex-row {
+          display: flex;
+          flex-direction: row;
+        }
+
+        &-fx-flex-row-reverse {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+
+        &-fx-flex-column {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &-fx-flex-column-reverse {
+          display: flex;
+          flex-direction: column-reverse;
+        }
+
+        &-fx-flex-grow {
+          flex-grow: 1;
+        }
+      }
+    }
+
+    @media (min-width: #{$max-width}px) {
+
+      .above-#{$media-shortcut} {
+
+        &-hidden {
+          display: none !important;
+        }
+
+
+        &-fx-flex-column {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &-fx-flex-row {
+          display: flex;
+          flex-direction: row;
+        }
+
+        &-fx-flex-grow {
+          flex-grow: 1;
+        }
+      }
+
+    }
+
+  }
+
+
+  // hidden utilities
+  @media (max-width: #{$max-width}px) {
+    .#{$media-shortcut}-hidden {
+      display: none !important;
+    }
+  }
+
+}
+
+/// end fx-flex helpers.... refactor every thing below this
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+
+.w-0 {
+  width: 0;
+}
+
+.h-0 {
+  width: 0;
+}
+
+.fx-fill-height {
+  height: calc(100vh - 2*var(--mat-toolbar-standard-height, 65px));
+}
+
+.fx-flex-000 {
+  flex: 0 0 0;
+}
+
+.fx-flex-100 {
+  flex: 1 0 0;
+}

package/scss/_fx-font.scss

@@ -0,0 +1,32 @@
+@use "sass:math";
+
+$i: 100;
+
+@while $i < 700 {
+
+
+  .fx-f-#{$i} {
+    font-weight: $i;
+  }
+
+  // do stuff
+  $i: $i + 100;
+}
+
+
+$j: 1;
+
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.fx-f-capitalize {
+  text-transform: capitalize;
+}

package/scss/_helpers.scss

@@ -0,0 +1,33 @@
+
+.phi-pad {
+  padding: 4vh 12vw
+}
+
+.phi-pad-h {
+  padding: 4vh 0;
+}
+
+.phi-pad-v {
+  padding: 0 12vw;
+}
+
+.phi-as-pointer {
+  cursor: pointer;
+}
+
+.phi-backdrop-fixed {
+  background-attachment: fixed;
+}
+
+.phi-background {
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.phi-background-image-contain {
+  background-size: contain;
+}
+
+.phi-background-image-cover {
+  background-size: cover;
+}

package/scss/_mixins.scss

@@ -0,0 +1,47 @@
+@use "variables" as v;
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@mixin generate-utilities($utility) {
+  $values: map.get($utility, values);
+  $properties: map.get($utility, property);
+
+  // Use shortcut if present
+  $property-shortcut: if(map.has-key($utility, shortcut), map.get($utility, shortcut), list.nth($properties, 1));
+  $property-shortcut: if($property-shortcut == null, "", $property-shortcut);
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+    $values: list.zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    // Remove property in selector name if shortcut is null
+    $selector: if($property-shortcut == '', #{v.$prefix}-#{$key}, #{v.$prefix}-#{$property-shortcut}-#{$key});
+
+    .#{$selector} {
+      @each $property in $properties {
+        #{$property}: #{$value};
+      }
+    }
+
+    @include generate-mq($selector) {
+      @each $property in $properties {
+        #{$property}: #{$value} !important;
+      }
+    }
+  }
+}
+
+// Generate media queries classes
+// e.g. .md:fx-flex or .xl:fx-inline-flex
+@mixin generate-mq($selector, $breakpoints: v.$breakpoints) {
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}px) {
+      .#{$breakpoint}\:#{$selector} {
+        @content;
+      }
+    }
+  }
+}

package/scss/_sizing.scss

@@ -0,0 +1,72 @@
+@use "mixins" as mix;
+
+$sizing-map: (
+  "width": (
+    property: width,
+    shortcut: w,
+    values: (
+      0: 0,
+      25: 25%,
+      50: 50%,
+      75: 75%,
+      full: 100%,
+      auto: auto
+    )
+  ),
+  "viewport-width": (
+    property: width,
+    shortcut: vw,
+    values: (
+      10: 10vw,
+      25: 25vw,
+      33: 33vw,
+      40: 40vw,
+      50: 50vw,
+      60: 60vw,
+      66: 66vw,
+      75: 75vw,
+      full: 100vw
+    )
+  ),
+  "height": (
+    property: height,
+    shortcut: h,
+    values: (
+      0: 0,
+      25: 25%,
+      50: 50%,
+      75: 75%,
+      full: 100%,
+      auto: auto
+    )
+  ),
+  "viewport-height": (
+    property: height,
+    shortcut: vh,
+    values: (
+      10: 10vh,
+      25: 25vh,
+      33: 33vh,
+      40: 40vh,
+      50: 50vh,
+      60: 60vh,
+      66: 66vh,
+      75: 75vh,
+      full: 100vh
+    )
+  ),
+  "size": (
+    property: (width, height),
+    shortcut: size,
+    values: (
+      1\/4: 25%,
+      2\/4: 50%,
+      3\/4: 75%,
+      full: 100%
+    )
+  ),
+);
+
+@each $key, $utility in $sizing-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_spacing-v2.scss

@@ -0,0 +1,82 @@
+@use "sass:map";
+
+@use "variables" as var;
+@use "mixins" as mix;
+
+
+$spacing-map: (
+  "margin": (
+    property: margin,
+    shortcut: m,
+    values: var.$values
+  ),
+  "margin-top": (
+    property: margin-top,
+    shortcut: mt,
+    values: var.$values
+  ),
+  "margin-right": (
+    property: margin-right,
+    shortcut: mr,
+    values: var.$values
+  ),
+  "margin-bottom": (
+    property: margin-bottom,
+    shortcut: mb,
+    values: var.$values
+  ),
+  "margin-left": (
+    property: margin-left,
+    shortcut: ml,
+    values: var.$values
+  ),
+  "margin-x": (
+    property: (margin-right, margin-left),
+    shortcut: mx,
+    values: var.$values
+  ),
+  "margin-y": (
+    property: (margin-top, margin-bottom),
+    shortcut: my,
+    values: var.$values
+  ),
+  "padding": (
+    property: padding,
+    shortcut: p,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-top": (
+    property: padding-top,
+    shortcut: pt,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-right": (
+    property: padding-right,
+    shortcut: pr,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-bottom": (
+    property: padding-bottom,
+    shortcut: pb,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-left": (
+    property: padding-left,
+    shortcut: pl,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-x": (
+    property: (padding-right, padding-left),
+    shortcut: px,
+    values: map.deep-remove(var.$values, "a")
+  ),
+  "padding-y": (
+    property: (padding-top, padding-bottom),
+    shortcut: py,
+    values: map.deep-remove(var.$values, "a")
+  ),
+);
+
+@each $key, $utility in $spacing-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_spacing.scss

@@ -0,0 +1,121 @@
+$space-xxs: 2px;
+$space-xs: 4px;
+$space-sm: 8px;
+$space-md: 12px;
+$space-lg: 16px;
+$space-xl: 24px;
+$space-xxl: 32px;
+$space-auto: auto;
+
+$spacing-shortcuts: (
+  "margin": "m",
+  "padding": "p"
+) !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: (
+  "0": 0,
+  "1": $space-xxs,
+  "2": $space-xs,
+  "3": $space-sm,
+  "4": $space-md,
+  "5": $space-lg,
+  "6": $space-xl,
+  "7": $space-xxl,
+  "8": 64px,
+  "9": 128px,
+  "a": $space-auto,
+) !default;
+
+$breakpoints : (
+  '': null,
+  'xs-': 400,
+  'sm-': 750,
+  'md-': 850,
+  'lg-': 1200,
+  'xlg-': 1450,
+) !default;
+
+@each $media-shortcut, $width in $breakpoints {
+  @if $width == null {
+    @each $property, $shortcut in $spacing-shortcuts {
+      @each $name, $value in $spacing-values {
+
+
+
+        // such as: m-3 or p-4
+        .#{$shortcut}-#{$name} {
+          #{$property}: $value
+        }
+
+        .gap-#{$name} {
+          gap: $value;
+        }
+
+        @each $direction, $suffix in $spacing-directions {
+          // such as: mr-3 or pb-4
+          .#{$shortcut}#{$suffix}-#{$name} {
+            #{$property}-#{$direction}: $value;
+          }
+
+        }
+
+        @if $spacing-horizontal != null {
+          .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+            #{$property}-left: $value;
+            #{$property}-right: $value;
+          }
+
+        }
+
+        @if $spacing-vertical != null {
+          .#{$shortcut}#{$spacing-vertical}-#{$name} {
+            #{$property}-top: $value;
+            #{$property}-bottom: $value;
+          }
+
+        }
+
+      }
+    }
+  }
+
+  //@debug "media-shortcut: #{$media-shortcut}";
+
+  @media (max-width: #{$width}px) {
+    //@debug "";
+    @each $property, $shortcut in $spacing-shortcuts {
+      @each $name, $value in $spacing-values {
+
+        //@debug "rule: .#{$media-shortcut}-#{$shortcut}-#{$name}";
+
+        .#{$media-shortcut}-#{$shortcut}-#{$name} {
+          #{$property}: $value
+        }
+
+        @each $direction, $suffix in $spacing-directions {
+          .#{$media-shortcut}-#{$shortcut}#{$suffix}-#{$name} {
+            #{$property}-#{$direction}: $value;
+          }
+        }
+
+        @if $spacing-horizontal != null {
+          .#{$media-shortcut}-#{$shortcut}#{$spacing-horizontal}-#{$name} {
+            #{$property}-left: $value;
+            #{$property}-right: $value;
+          }
+        }
+
+        @if $spacing-vertical != null {
+          .#{$media-shortcut}-#{$shortcut}#{$spacing-vertical}-#{$name} {
+            #{$property}-top: $value;
+            #{$property}-bottom: $value;
+          }
+        }
+
+      }
+    }
+
+  }
+}

package/scss/_typography.scss

@@ -0,0 +1,100 @@
+@use 'sass:math';
+@use "sass:map";
+
+$font-weight-map: (
+  font-thin: 100,
+  font-extralight: 200,
+  font-light: 300,
+  font-normal: 400,
+  font-medium: 500,
+  font-semibold: 600,
+  font-bold: 700,
+  font-extrabold: 800,
+  font-black: 900
+) !default;
+
+
+@each $key, $value in $font-weight-map {
+  .fx-#{$key} {
+    font-weight: #{$value};
+  }
+}
+
+
+@function project($min, $max) {
+  $r_min: 400px;
+  $r_max: 1000px;
+
+  $m: calc(($max - $min)/($r_max - $r_min) * 100);
+  @return clamp($min, min(#{$m}vw, #{$m}vh), $max);
+}
+
+// TODO: Check the line-height for headlines and subtitles
+.fx-headline-1 {
+  font-size: var(--fx-typography-6);
+  /* font-size: project(60px, 112px); */
+  font-weight: map.get($font-weight-map, font-semibold);
+  line-height: initial;
+}
+
+.fx-headline-2 {
+  font-size: var(--fx-typography-5);
+  /* font-size: project(40px, 84px); */
+  font-weight: map.get($font-weight-map, font-medium);
+  line-height: initial;
+}
+
+.fx-headline-3 {
+  font-size: var(--fx-typography-4);
+  /* font-size: project(30px, 64px); */
+  font-weight: map.get($font-weight-map, font-semibold);
+  line-height: initial;
+}
+
+.fx-headline-4 {
+  font-size: var(--fx-typography-3);
+  font-weight: map.get($font-weight-map, font-semibold);
+  line-height: initial;
+}
+
+.fx-headline-5 {
+  font-size: var(--fx-typography-3);
+  font-weight: map.get($font-weight-map, font-normal);
+  line-height: initial;
+}
+
+.fx-title {
+  font-size: var(--fx-typography-2);
+  font-weight: map.get($font-weight-map, font-medium);
+  line-height: 1.6rem;
+}
+
+.fx-subtitle {
+  font-size: var(--fx-typography-1);
+  font-weight: map.get($font-weight-map, font-normal);
+  line-height: 1.6rem;
+}
+
+.fx-body-1 {
+  font-size: var(--fx-typography-0);
+  font-weight: map.get($font-weight-map, font-normal);
+  line-height: 1.5rem;
+}
+
+.fx-body-2 {
+  font-size: var(--fx-typography--1);
+  font-weight: map.get($font-weight-map, font-light);
+  line-height: var(--fx-typography-1);
+  }
+
+.fx-caption {
+  font-size: var(--fx-typography--2);
+  font-weight: map.get($font-weight-map, font-normal);
+  line-height: initial;
+}
+
+.fx-overline {
+  font-size: var(--fx-typography--3);
+  font-weight: map.get($font-weight-map, font-light);
+  line-height: initial;
+}

package/scss/_variables.scss

@@ -0,0 +1,57 @@
+$prefix: fx !default;
+
+$space-base: 16px !default;
+$space-auto: "auto" !default;
+
+$_spacing-values: (
+  "0": 0,
+  "1": $space-base * 0.25,
+  "2": $space-base * 0.5,
+  "3": $space-base * 0.75,
+  "4": $space-base,
+  "5": $space-base * 1.25,
+  "6": $space-base * 1.5,
+  "7": $space-base * 1.75,
+  "8": $space-base * 2,
+  "9": $space-base * 2.25,
+  "10": $space-base * 2.5,
+  "11": $space-base * 2.75,
+  "12": $space-base * 3,
+  "14": $space-base * 3.5,
+  "16": $space-base * 4,
+  "20": $space-base * 5,
+  "24": $space-base * 6,
+  "28": $space-base * 7,
+  "32": $space-base * 8,
+  "a": $space-auto,
+) !default;
+
+
+$values: (
+  "0": 0,
+  "1": var(--fx-xs),
+  "2": var(--fx-2xs),
+  "3": var(--fx-3xs),
+  "4": var(--fx-s),
+  "5": var(--fx-m),
+  "6": var(--fx-l),
+  "7": var(--fx-xl),
+  "8": var(--fx-2xl),
+  "a": $space-auto,
+) !default;
+
+$_breakpoints: (
+  'sm': 640,
+  'md': 768,
+  'lg': 1024,
+  'xl': 1280,
+  'xxl': 1536
+) !default;
+
+$breakpoints: (
+  'sm': 640,
+  'md': 768,
+  'lg': 1024,
+  'xl': 1280,
+  'xxl': 1536
+) !default;