Skip to content

Commit

Permalink
feat: add tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
JoshTheWanderer committed Sep 18, 2024
1 parent cc0c844 commit 51fea49
Show file tree
Hide file tree
Showing 11 changed files with 429 additions and 0 deletions.
10 changes: 10 additions & 0 deletions src/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@use 'tokens/breakpoint';
@use 'tokens/button';
@use 'tokens/color';
@use 'tokens/container-color';
@use 'tokens/font';
@use 'tokens/input';
@use 'tokens/radius';
@use 'tokens/skin';
@use 'tokens/spacing';
@use 'tokens/transition';
14 changes: 14 additions & 0 deletions src/tokens/breakpoint.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Not sure if these can actually be used - don't think you can use CSS variables in media queries. TODO

:root {
--mobius-breakpoint-xs: 0;
--mobius-breakpoint-sm: 30rem; // 480px
--mobius-breakpoint-md: 37.5rem; // 600px
--mobius-breakpoint-lg: 48rem; // 768px
--mobius-breakpoint-xl: 64rem; // 1024px
--mobius-breakpoint-xxl: 80rem; // 1280px
--mobius-breakpoint-xxxl: 90rem; // 1440px
--mobius-breakpoint-tablet: var(--mobius-breakpoint-lg);
--mobius-breakpoint-desktop: var(--mobius-breakpoint-xl);
--mobius-breakpoint-max: var(--mobius-breakpoint-xxl);
}
120 changes: 120 additions & 0 deletions src/tokens/button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
:root {
--mobius-button-border-radius: calc(var(--mobius-spacing-thumb) / 2);
--mobius-button-border-width: 1px;

// DEFAULT
--mobius-button-background-default: var(--mobius-color-cloud);
--mobius-button-border-color-default: var(--mobius-color-forest-50);
--mobius-button-color-default: var(--mobius-color-forest);

--mobius-button-background-hover-default: var(--mobius-color-cloud-75);
--mobius-button-border-color-hover-default: var(--mobius-color-forest-50);
--mobius-button-color-hover-default: var(--mobius-color-forest-50);

--mobius-button-background-focus-default: var(--mobius-color-cloud);
--mobius-button-border-color-focus-default: var(--mobius-color-forest);
--mobius-button-color-focus-default: var(--mobius-color-forest);

--mobius-button-background-disabled-default: var(--mobius-color-cloud-75);
--mobius-button-border-color-disabled-default: var(--mobius-color-forest-25);
--mobius-button-color-disabled-default: var(--mobius-color-forest-50);

// PRIMARY
--mobius-button-background-primary: var(--mobius-color-lime);
--mobius-button-border-color-primary: var(--mobius-color-lime);
--mobius-button-color-primary: var(--mobius-color-forest);

--mobius-button-background-hover-primary: var(--mobius-color-lime-75);
--mobius-button-border-color-hover-primary: var(--mobius-color-lime-75);
--mobius-button-color-hover-primary: var(--mobius-color-forest-75);

--mobius-button-background-focus-primary: var(--mobius-color-lime);
--mobius-button-border-color-focus-primary: var(--mobius-color-forest);
--mobius-button-color-focus-primary: var(--mobius-color-forest);

--mobius-button-background-disabled-primary: var(--mobius-color-lime-25);
--mobius-button-border-color-disabled-primary: var(--mobius-color-lime-25);
--mobius-button-color-disabled-primary: var(--mobius-color-forest-50);

// SECONDARY
--mobius-button-background-secondary: var(--mobius-color-forest-75);
--mobius-button-border-color-secondary: var(--mobius-color-forest-75);
--mobius-button-color-secondary: var(--mobius-color-cloud);

--mobius-button-background-hover-secondary: var(--mobius-color-forest);
--mobius-button-border-color-hover-secondary: var(--mobius-color-forest);
--mobius-button-color-hover-secondary: var(--mobius-color-cloud);

--mobius-button-background-focus-secondary: var(--mobius-color-forest-75);
--mobius-button-border-color-focus-secondary: var(--mobius-color-forest);
--mobius-button-color-focus-secondary: var(--mobius-color-cloud);

--mobius-button-background-disabled-secondary: var(--mobius-color-forest-50);
--mobius-button-border-color-disabled-secondary: var(
--mobius-color-forest-50
);
--mobius-button-color-disabled-secondary: var(--mobius-color-cloud);

// POSITIVE
--mobius-button-background-positive: var(--mobius-color-lime);
--mobius-button-border-color-positive: var(--mobius-color-lime);
--mobius-button-color-positive: var(--mobius-color-forest);

--mobius-button-background-hover-positive: var(--mobius-color-lime-75);
--mobius-button-border-color-hover-positive: var(--mobius-color-lime-75);
--mobius-button-color-hover-positive: var(--mobius-color-forest-75);

--mobius-button-background-focus-positive: var(--mobius-color-lime);
--mobius-button-border-color-focus-positive: var(--mobius-color-forest);
--mobius-button-color-focus-positive: var(--mobius-color-forest);

--mobius-button-background-disabled-positive: var(--mobius-color-lime-25);
--mobius-button-border-color-disabled-positive: var(--mobius-color-lime-25);
--mobius-button-color-disabled-positive: var(--mobius-color-forest-50);

// NEGATIVE
--mobius-button-background-negative: var(--mobius-color-rose-75);
--mobius-button-border-color-negative: var(--mobius-color-rose-75);
--mobius-button-color-negative: var(--mobius-color-forest);

--mobius-button-background-hover-negative: var(--mobius-color-rose-50);
--mobius-button-border-color-hover-negative: var(--mobius-color-rose-50);
--mobius-button-color-hover-negative: var(--mobius-color-forest-75);

--mobius-button-background-focus-negative: var(--mobius-color-rose-75);
--mobius-button-border-color-focus-negative: var(--mobius-color-forest);
--mobius-button-color-focus-negative: var(--mobius-color-forest);

--mobius-button-background-disabled-negative: var(--mobius-color-rose-25);
--mobius-button-border-color-disabled-negative: var(--mobius-color-rose-25);
--mobius-button-color-disabled-negative: var(--mobius-color-forest-50);

// SET FALLBACK VALUES
--mobius-button-background: var(--mobius-button-background-default);
--mobius-button-border-color: var(--mobius-button-border-color-default);
--mobius-button-color: var(--mobius-button-color-default);

--mobius-button-background-hover: var(
--mobius-button-background-hover-default
);
--mobius-button-border-color-hover: var(
--mobius-button-border-color-hover-default
);
--mobius-button-color-hover: var(--mobius-button-color-hover-default);

--mobius-button-background-focus: var(
--mobius-button-background-focus-default
);
--mobius-button-border-color-focus: var(
--mobius-button-border-color-focus-default
);
--mobius-button-color-focus: var(--mobius-button-color-focus-default);

--mobius-button-background-disabled: var(
--mobius-button-background-disabled-default
);
--mobius-button-border-color-disabled: var(
--mobius-button-border-color-disabled-default
);
--mobius-button-color-disabled: var(--mobius-button-color-disabled-default);
}
67 changes: 67 additions & 0 deletions src/tokens/color.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
:root {
--mobius-color-forest: #0b301a;
--mobius-color-forest-75: #486453;
--mobius-color-forest-50: #85978c;
--mobius-color-forest-25: #c2cbc6;

--mobius-color-earth: #a9ad94;
--mobius-color-earth-75: #bfc1ae;
--mobius-color-earth-50: #d4d6c9;
--mobius-color-earth-25: #e9ebe5;

--mobius-color-sand: #e8e0d6;
--mobius-color-sand-75: #eee8e0;
--mobius-color-sand-50: #f3efeb;
--mobius-color-sand-25: #f9f7f5;

--mobius-color-lime: #cbff89;
--mobius-color-lime-75: #d7ffa6;
--mobius-color-lime-50: #e5ffc3;
--mobius-color-lime-25: #f1ffdf;

--mobius-color-sky: #94b9fa;
--mobius-color-sky-75: #afccf9;
--mobius-color-sky-50: #c7ddff;
--mobius-color-sky-25: #e4edff;

--mobius-color-rose: #f33;
--mobius-color-rose-75: #ed706b;
--mobius-color-rose-50: #f19e9c;
--mobius-color-rose-25: #f7cecd;

--mobius-color-cloud: #fff;
--mobius-color-cloud-75: #ffffff75;
--mobius-color-coal: #000;
--mobius-color-steel: #7d8796;

--mobius-color-lemon: #ffe861;
--mobius-color-orange: #ffa345;
--mobius-color-lilac: #d1bdf5;
--mobius-color-violet: #6347e3;

// Aliases
--mobius-color-white: var(--mobius-color-cloud);
--mobius-color-black: var(--mobius-color-coal);

--mobius-color-body: var(--mobius-color-forest);
--mobius-color-body-muted: var(--mobius-color-forest-75);

--mobius-color-background: var(--mobius-color-earth-25);
--mobius-color-background-muted: var(--mobius-color-earth-50);

--mobius-color-accent: var(--mobius-color-lime);
--mobius-color-link: var(--mobius-color-forest-75);

--mobius-color-neutral: var(--mobius-color-sky);
--mobius-color-neutral-light: var(--mobius-color-sky-25);
--mobius-color-positive: var(--mobius-color-lime);
--mobius-color-positive-light: var(--mobius-color-lime-25);
--mobius-color-negative: var(--mobius-color-rose);
--mobius-color-negative-light: var(--mobius-color-rose-25);

--mobius-color-no-stream: var(--mobius-color-steel);
--mobius-color-dry-stream: var(--mobius-color-violet);
--mobius-color-residual-stream: var(--mobius-color-rose);
--mobius-color-food-stream: var(--mobius-color-lilac);
--mobius-color-garden-stream: var(--mobius-color-orange);
}
25 changes: 25 additions & 0 deletions src/tokens/container-color.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
:root {
--mobius-container-color-grey: #828282;
--mobius-container-color-black: #4f4f4f;
--mobius-container-color-grey-light: #bdbdbd;
--mobius-container-color-blue: #2d9cdb;
--mobius-container-color-blue-mid: #1579c6;
--mobius-container-color-blue-dark: #2262b9;
--mobius-container-color-blue-light: #56ccf2;
--mobius-container-color-blue-muted: #d7e7f5;
--mobius-container-color-green: #3cb848;
--mobius-container-color-green-dark: #219653;
--mobius-container-color-green-light: #6fcf97;
--mobius-container-color-cream: #e1d9c0;
--mobius-container-color-yellow: #f2c94c;
--mobius-container-color-white: #f4f7f9;
--mobius-container-color-red: #f24545;
--mobius-container-color-brown: #ad7849;
--mobius-container-color-orange: #f2994a;
--mobius-container-color-pink: #ff649e;
--mobius-container-color-magenta: #d12767;
--mobius-container-color-maroon: #a62f5a;
--mobius-container-color-purple: #9946db;
--mobius-container-color-duck-egg: #89c1ab;
--mobius-container-color-transparent: #fff0;
}
33 changes: 33 additions & 0 deletions src/tokens/font.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Need to get new fonts working and put in new default values. TODO
:root {
--mobius-font-family: 'Open Sans', -apple-system, system-ui,
BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
--mobius-font-family-roboto: Roboto, Lato, -apple-system, system-ui,
BlinkMacSystemFont, Helvetica, Arial, sans-serif;
// What to use for fallback? TODO
--mobius-font-family-heading: 'Marr Sans Cond Web', 'Roboto Condensed', Impact,
sans-serif;

--mobius-font-line-height: 1.25;
--mobius-font-line-height-sm: 1.125;
--mobius-font-line-height-lg: 1.5;

--mobius-font-size-base: 1rem;
--mobius-font-size-xs: 0.75em;
--mobius-font-size-sm: 0.875em;
--mobius-font-size-md: 1.125em;
--mobius-font-size-lg: 1.25em;
--mobius-font-size-xl: 1.5em;

--mobius-font-size-h1: 2.25em;
--mobius-font-size-h2: var(--mobius-font-size-lg);
--mobius-font-size-h3: var(--mobius-font-size-md);
--mobius-font-size-h4: var(--mobius-font-size-base);
--mobius-font-size-h5: var(--mobius-font-size-sm);
--mobius-font-size-h6: var(--mobius-font-size-xs);

--mobius-font-weight-base: 400;
--mobius-font-weight-light: 300;
--mobius-font-weight-bold: 700;
--mobius-font-weight-black: 800;
}
21 changes: 21 additions & 0 deletions src/tokens/input.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
:root {
--mobius-input-background: var(--mobius-color-cloud);
--mobius-input-background-focus: var(--mobius-color-cloud);
--mobius-input-background-disabled: var(--mobius-color-earth-25);

--mobius-input-border: var(--mobius-color-forest-25);
--mobius-input-border-hover: var(--mobius-color-forest-50);
--mobius-input-border-focus: var(--mobius-color-forest-75);
--mobius-input-border-radius: var(--mobius-radius-sm);

--mobius-input-color: var(--mobius-color-forest);
--mobius-input-color-disabled: var(--mobius-color-forest-75);

--mobius-input-checked: var(--mobius-color-forest);
--mobius-input-checkradio-border-radius: var(--mobius-radius-sm);

--mobius-input-padding-vertical: var(--mobius-spacing-sm);
--mobius-input-padding-horizontal: var(--mobius-spacing-md);
--mobius-input-padding: var(--mobius-input-padding-vertical)
var(--mobius-input-padding-horizontal);
}
6 changes: 6 additions & 0 deletions src/tokens/radius.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
:root {
--mobius-radius-none: 0;
--mobius-radius-sm: 0.25rem;
--mobius-radius-md: 0.5rem;
--mobius-radius-lg: 1rem;
}
91 changes: 91 additions & 0 deletions src/tokens/skin.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
:root {
// Have improvised the muted colours for now. Come back to. TODO
// Also link styles. ATM they are mostly all the same as text style
--mobius-skin-background-light: var(--mobius-color-cloud);
--mobius-skin-background-muted-light: var(--mobius-color-earth-25);
--mobius-skin-border-color-light: var(--mobius-color-forest-25);
--mobius-skin-color-light: var(--mobius-color-forest);
--mobius-skin-color-muted-light: var(--mobius-color-forest-75);
--mobius-skin-heading-color-light: var(--mobius-color-forest);
--mobius-skin-link-color-light: var(--mobius-color-forest);
--mobius-skin-link-color-hover-light: var(--mobius-color-forest-75);
--mobius-skin-link-color-focus-light: var(--mobius-color-forest);
--mobius-skin-link-text-decoration-light: none;
--mobius-skin-link-text-decoration-hover-light: underline;

--mobius-skin-background-dark: var(--mobius-color-forest);
--mobius-skin-background-muted-dark: var(--mobius-color-forest-75);
--mobius-skin-border-color-dark: var(--mobius-color-forest-75);
--mobius-skin-color-dark: var(--mobius-color-cloud);
--mobius-skin-color-muted-dark: var(--mobius-color-cloud);
--mobius-skin-heading-color-dark: var(--mobius-color-cloud);
--mobius-skin-link-color-dark: var(--mobius-color-cloud);
--mobius-skin-link-text-decoration-dark: underline;
--mobius-skin-link-text-decoration-hover-dark: underline;

--mobius-skin-background-info: var(--mobius-color-sky-25);
--mobius-skin-background-muted-info: var(--mobius-color-sky-25);
--mobius-skin-border-color-info: var(--mobius-color-sky-25);
--mobius-skin-color-info: var(--mobius-color-forest);
--mobius-skin-color-muted-info: var(--mobius-color-forest-75);
--mobius-skin-heading-color-info: var(--mobius-color-forest);
--mobius-skin-link-color-info: var(--mobius-color-forest);
--mobius-skin-link-text-decoration-info: none;
--mobius-skin-link-text-decoration-hover-info: underline;

--mobius-skin-background-neutral: var(--mobius-color-sky);
--mobius-skin-background-muted-neutral: var(--mobius-color-sky);
--mobius-skin-border-color-neutral: var(--mobius-color-sky);
--mobius-skin-color-neutral: var(--mobius-color-forest);
--mobius-skin-color-muted-neutral: var(--mobius-color-forest-75);
--mobius-skin-heading-color-neutral: var(--mobius-color-forest);
--mobius-skin-link-color-neutral: var(--mobius-color-forest);
--mobius-skin-link-text-decoration-neutral: underline;
--mobius-skin-link-text-decoration-hover-neutral: underline;

--mobius-skin-background-positive: var(--mobius-color-lime);
--mobius-skin-background-muted-positive: var(--mobius-color-lime-75);
--mobius-skin-border-color-positive: var(--mobius-color-lime);
--mobius-skin-color-positive: var(--mobius-color-forest);
--mobius-skin-color-muted-positive: var(--mobius-color-forest);
--mobius-skin-heading-color-positive: var(--mobius-color-forest);
--mobius-skin-link-color-positive: var(--mobius-color-forest);
--mobius-skin-link-text-decoration-positive: underline;
--mobius-skin-link-text-decoration-hover-positive: underline;

--mobius-skin-background-negative: var(--mobius-color-rose-75);
--mobius-skin-background-muted-negative: var(--mobius-color-rose-75);
--mobius-skin-border-color-negative: var(--mobius-color-rose-75);
--mobius-skin-color-negative: var(--mobius-color-forest);
--mobius-skin-color-muted-negative: var(--mobius-color-forest-75);
--mobius-skin-heading-color-negative: var(--mobius-color-forest);
--mobius-skin-link-color-negative: var(--mobius-color-forest);
--mobius-skin-link-text-decoration-negative: underline;
--mobius-skin-link-text-decoration-hover-negative: underline;

--mobius-skin-background-attention: var(--mobius-color-lime-25);
--mobius-skin-background-muted-attention: var(--mobius-color-lime-25);
--mobius-skin-border-color-attention: var(--mobius-color-lime-25);
--mobius-skin-color-attention: var(--mobius-color-forest);
--mobius-skin-color-muted-attention: var(--mobius-color-forest-75);
--mobius-skin-heading-color-attention: var(--mobius-color-forest);
--mobius-skin-link-color-attention: var(--mobius-color-forest);
--mobius-skin-linktext-decoration-attention: underline;
--mobius-skin-linktext-decoration-hover-attention: underline;

--mobius-skin-background: var(--mobius-skin-background-light);
--mobius-skin-background-muted: var(--mobius-skin-background-muted-light);
--mobius-skin-border-color: var(--mobius-skin-border-color-light);
--mobius-skin-color: var(--mobius-skin-color-light);
--mobius-skin-color-muted: var(--mobius-skin-color-muted-light);
--mobius-skin-heading-color: var(--mobius-skin-heading-color-light);
--mobius-skin-link-color: var(--mobius-skin-link-color-light);
--mobius-skin-link-color-hover: var(--mobius-skin-link-color-hover-light);
--mobius-skin-link-color-focus: var(--mobius-skin-link-color-focus-light);
--mobius-skin-link-text-decoration: var(
--mobius-skin-link-text-decoration-light
);
--mobius-skin-link-text-decoration-hover: var(
--mobius-skin-link-text-decoration-hover-light
);
}
Loading

0 comments on commit 51fea49

Please sign in to comment.