first commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
@import 'border-radius';
|
||||
@import 'colors';
|
||||
@import 'elevation';
|
||||
@import 'spacing';
|
||||
@import 'typography';
|
@@ -0,0 +1,12 @@
|
||||
// This file provides both Sass and CSS variables for border radiuses
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-medium: 8px;
|
||||
$border-radius-large: 16px;
|
||||
$border-radius-full: 9999px;
|
||||
|
||||
:root {
|
||||
--border-radius-base: #{$border-radius-base};
|
||||
--border-radius-medium: #{$border-radius-medium};
|
||||
--border-radius-large: #{$border-radius-large};
|
||||
--border-radius-full: #{$border-radius-full};
|
||||
}
|
@@ -0,0 +1,236 @@
|
||||
// This file provides CSS and Sass variables for colors as full color values.
|
||||
// To combine one of these colors with an alpha value, use Sass's built-in
|
||||
// rgba() function.
|
||||
|
||||
// Note that colors used by Bootstrap's Sass are used in calculations and
|
||||
// therefore cannot contain CSS variables
|
||||
|
||||
/* ====== Sass color variables ====== */
|
||||
|
||||
/* Neutral */
|
||||
$white: #fff;
|
||||
$neutral-10: #f4f5f6;
|
||||
$neutral-20: #e7e9ee;
|
||||
$neutral-30: #d0d5dd;
|
||||
$neutral-40: #afb5c0;
|
||||
$neutral-50: #8d96a5;
|
||||
$neutral-60: #677283;
|
||||
$neutral-70: #495365;
|
||||
$neutral-80: #2f3a4c;
|
||||
$neutral-90: #1b222c;
|
||||
|
||||
/* Green */
|
||||
$green-10: #eaf6ef;
|
||||
$green-20: #b8dbc8;
|
||||
$green-30: #86caa5;
|
||||
$green-40: #53b57f;
|
||||
$green-50: #098842;
|
||||
$green-60: #1e6b41;
|
||||
$green-70: #195936;
|
||||
|
||||
/* Blue */
|
||||
$blue-10: #f1f4f9;
|
||||
$blue-20: #c3d0e3;
|
||||
$blue-30: #97b6e5;
|
||||
$blue-40: #6597e0;
|
||||
$blue-50: #366cbf;
|
||||
$blue-60: #28518f;
|
||||
$blue-70: #214475;
|
||||
|
||||
/* Red */
|
||||
$red-10: #f9f1f1;
|
||||
$red-20: #f5beba;
|
||||
$red-30: #e59d9a;
|
||||
$red-40: #e36d66;
|
||||
$red-50: #b83a33;
|
||||
$red-60: #942f2a;
|
||||
$red-70: #782722;
|
||||
|
||||
/* Yellow */
|
||||
$yellow-10: #fcf1e3;
|
||||
$yellow-20: #fcc483;
|
||||
$yellow-30: #f7a445;
|
||||
$yellow-40: #de8014;
|
||||
$yellow-50: #8f5514;
|
||||
$yellow-60: #7a4304;
|
||||
$yellow-70: #633a0b;
|
||||
|
||||
/* ====== Semantic Sass color variables ====== */
|
||||
$bg-light-primary: $white;
|
||||
$bg-light-secondary: $neutral-10;
|
||||
$bg-light-tertiary: $neutral-20;
|
||||
$bg-light-disabled: $neutral-20;
|
||||
$bg-dark-primary: $neutral-90;
|
||||
$bg-dark-secondary: $neutral-80;
|
||||
$bg-dark-tertiary: $neutral-70;
|
||||
$bg-dark-disabled: $neutral-70;
|
||||
$bg-accent-01: $green-50;
|
||||
$bg-accent-02: $green-60;
|
||||
$bg-accent-03: $green-10;
|
||||
$bg-danger-01: $red-50;
|
||||
$bg-danger-02: $red-60;
|
||||
$bg-danger-03: $red-10;
|
||||
$bg-warning-01: $yellow-50;
|
||||
$bg-warning-02: $yellow-60;
|
||||
$bg-warning-03: $yellow-10;
|
||||
$bg-info-01: $blue-50;
|
||||
$bg-info-02: $blue-60;
|
||||
$bg-info-03: $blue-10;
|
||||
$content-primary: $neutral-90;
|
||||
$content-secondary: $neutral-70;
|
||||
$content-disabled: $neutral-40;
|
||||
$content-placeholder: $neutral-60;
|
||||
$content-danger: $red-50;
|
||||
$content-warning: $yellow-50;
|
||||
$content-positive: $green-50;
|
||||
$border-primary: $neutral-60;
|
||||
$border-hover: $neutral-70;
|
||||
$border-disabled: $neutral-20;
|
||||
$border-active: $blue-50;
|
||||
$border-danger: $red-50;
|
||||
$border-divider: $neutral-20;
|
||||
$link-web: $green-50;
|
||||
$link-web-hover: $green-60;
|
||||
$link-web-visited: $green-60;
|
||||
$link-ui: $blue-50;
|
||||
$link-ui-hover: $blue-60;
|
||||
$link-ui-visited: $blue-60;
|
||||
$content-primary-dark: $white;
|
||||
$content-secondary-dark: $neutral-20;
|
||||
$content-disabled-dark: $neutral-60;
|
||||
$content-placeholder-dark: $neutral-50;
|
||||
$content-danger-dark: $red-40;
|
||||
$content-warning-dark: $yellow-40;
|
||||
$content-positive-dark: $green-40;
|
||||
$border-primary-dark: $neutral-30;
|
||||
$border-hover-dark: $neutral-20;
|
||||
$border-disabled-dark: $neutral-80;
|
||||
$border-active-dark: $blue-30;
|
||||
$border-danger-dark: $red-40;
|
||||
$border-divider-dark: $neutral-80;
|
||||
$link-web-dark: $green-30;
|
||||
$link-web-hover-dark: $green-40;
|
||||
$link-web-visited-dark: $green-40;
|
||||
$link-ui-dark: $blue-30;
|
||||
$link-ui-hover-dark: $blue-40;
|
||||
$link-ui-visited-dark: $blue-40;
|
||||
|
||||
/* ====== CSS color variables ====== */
|
||||
:root {
|
||||
/* Neutral */
|
||||
--white: #{$white};
|
||||
--neutral-10: #{$neutral-10};
|
||||
--neutral-20: #{$neutral-20};
|
||||
--neutral-30: #{$neutral-30};
|
||||
--neutral-40: #{$neutral-40};
|
||||
--neutral-50: #{$neutral-50};
|
||||
--neutral-60: #{$neutral-60};
|
||||
--neutral-70: #{$neutral-70};
|
||||
--neutral-80: #{$neutral-80};
|
||||
--neutral-90: #{$neutral-90};
|
||||
|
||||
/* Green */
|
||||
--green-10: #{$green-10};
|
||||
--green-20: #{$green-20};
|
||||
--green-30: #{$green-30};
|
||||
--green-40: #{$green-40};
|
||||
--green-50: #{$green-50};
|
||||
--green-60: #{$green-60};
|
||||
--green-70: #{$green-70};
|
||||
|
||||
/* Blue */
|
||||
--blue-10: #{$blue-10};
|
||||
--blue-20: #{$blue-20};
|
||||
--blue-30: #{$blue-30};
|
||||
--blue-40: #{$blue-40};
|
||||
--blue-50: #{$blue-50};
|
||||
--blue-60: #{$blue-60};
|
||||
--blue-70: #{$blue-70};
|
||||
|
||||
/* Red */
|
||||
--red-10: #{$red-10};
|
||||
--red-20: #{$red-20};
|
||||
--red-30: #{$red-30};
|
||||
--red-40: #{$red-40};
|
||||
--red-50: #{$red-50};
|
||||
--red-60: #{$red-60};
|
||||
--red-70: #{$red-70};
|
||||
|
||||
/* Yellow */
|
||||
--yellow-10: #{$yellow-10};
|
||||
--yellow-20: #{$yellow-20};
|
||||
--yellow-30: #{$yellow-30};
|
||||
--yellow-40: #{$yellow-40};
|
||||
--yellow-50: #{$yellow-50};
|
||||
--yellow-60: #{$yellow-60};
|
||||
--yellow-70: #{$yellow-70};
|
||||
|
||||
/* ====== Semantic CSS color variables ====== */
|
||||
--bg-light-primary: var(--white);
|
||||
--bg-light-secondary: var(--neutral-10);
|
||||
--bg-light-tertiary: var(--neutral-20);
|
||||
--bg-light-disabled: var(--neutral-20);
|
||||
--bg-dark-primary: var(--neutral-90);
|
||||
--bg-dark-secondary: var(--neutral-80);
|
||||
--bg-dark-tertiary: var(--neutral-70);
|
||||
--bg-dark-disabled: var(--neutral-70);
|
||||
--bg-accent-01: var(--green-50);
|
||||
--bg-accent-02: var(--green-60);
|
||||
--bg-accent-03: var(--green-10);
|
||||
--bg-danger-01: var(--red-50);
|
||||
--bg-danger-02: var(--red-60);
|
||||
--bg-danger-03: var(--red-10);
|
||||
--bg-warning-01: var(--yellow-50);
|
||||
--bg-warning-02: var(--yellow-60);
|
||||
--bg-warning-03: var(--yellow-10);
|
||||
--bg-info-01: var(--blue-50);
|
||||
--bg-info-02: var(--blue-60);
|
||||
--bg-info-03: var(--blue-10);
|
||||
--content-primary: var(--neutral-90);
|
||||
--content-secondary: var(--neutral-70);
|
||||
--content-disabled: var(--neutral-40);
|
||||
--content-placeholder: var(--neutral-60);
|
||||
--content-danger: var(--red-50);
|
||||
--content-warning: var(--yellow-50);
|
||||
--content-positive: var(--green-50);
|
||||
--border-primary: var(--neutral-60);
|
||||
--border-hover: var(--neutral-70);
|
||||
--border-disabled: var(--neutral-20);
|
||||
--border-active: var(--blue-50);
|
||||
--border-danger: var(--red-50);
|
||||
--border-divider: var(--neutral-20);
|
||||
--border-dark-divider: var(--neutral-70);
|
||||
--link-web: var(--green-50);
|
||||
--link-web-hover: var(--green-60);
|
||||
--link-web-visited: var(--green-50);
|
||||
--link-ui: var(--blue-50);
|
||||
--link-ui-hover: var(--blue-60);
|
||||
--link-ui-visited: var(--blue-60);
|
||||
--content-primary-dark: var(--white);
|
||||
--content-secondary-dark: var(--neutral-20);
|
||||
--content-disabled-dark: var(--neutral-60);
|
||||
--content-placeholder-dark: var(--neutral-50);
|
||||
--content-danger-dark: var(--red-40);
|
||||
--content-warning-dark: var(--yellow-40);
|
||||
--content-positive-dark: var(--green-40);
|
||||
--border-primary-dark: var(--neutral-30);
|
||||
--border-hover-dark: var(--neutral-20);
|
||||
--border-disabled-dark: var(--neutral-80);
|
||||
--border-active-dark: var(--blue-30);
|
||||
--border-danger-dark: var(--red-40);
|
||||
--border-divider-dark: var(--neutral-80);
|
||||
--link-web-dark: var(--green-30);
|
||||
--link-web-hover-dark: var(--green-40);
|
||||
--link-web-visited-dark: var(--green-40);
|
||||
--link-ui-dark: var(--blue-30);
|
||||
--link-ui-hover-dark: var(--blue-40);
|
||||
--link-ui-visited-dark: var(--blue-40);
|
||||
|
||||
/* ====== Gradients ====== */
|
||||
--premium-gradient: linear-gradient(
|
||||
246deg,
|
||||
var(--blue-70) 0%,
|
||||
#254c84 29%,
|
||||
var(--blue-40) 97%
|
||||
);
|
||||
}
|
@@ -0,0 +1,18 @@
|
||||
// Cards
|
||||
@mixin shadow-sm {
|
||||
box-shadow: 0 2px 4px 0 rgb(30 37 48 / 16%);
|
||||
}
|
||||
|
||||
// Tooltips, Callouts, Dropdowns, etc.
|
||||
@mixin shadow-md {
|
||||
box-shadow:
|
||||
0 4px 12px 0 rgb(30 37 48 / 12%),
|
||||
0 2px 4px rgb(30 37 48 / 8%);
|
||||
}
|
||||
|
||||
// Modals, drawers
|
||||
@mixin shadow-lg {
|
||||
box-shadow:
|
||||
0 8px 16px 0 rgb(30 37 48 / 12%),
|
||||
0 4px 6px 0 rgb(30 37 48 / 12%);
|
||||
}
|
@@ -0,0 +1,41 @@
|
||||
// This file provides both Sass and CSS variables for spacing
|
||||
$spacing-00: 0;
|
||||
$spacing-01: 2px;
|
||||
$spacing-02: 4px;
|
||||
$spacing-03: 6px;
|
||||
$spacing-04: 8px;
|
||||
$spacing-05: 12px;
|
||||
$spacing-06: 16px;
|
||||
$spacing-07: 20px;
|
||||
$spacing-08: 24px;
|
||||
$spacing-09: 32px;
|
||||
$spacing-10: 40px;
|
||||
$spacing-11: 48px;
|
||||
$spacing-12: 56px;
|
||||
$spacing-13: 64px;
|
||||
$spacing-14: 72px;
|
||||
$spacing-15: 80px;
|
||||
$spacing-16: 96px;
|
||||
$all-spacings: spacing-00, spacing-01, spacing-02, spacing-03, spacing-04,
|
||||
spacing-05, spacing-06, spacing-07, spacing-08, spacing-09, spacing-10,
|
||||
spacing-11, spacing-12, spacing-13, spacing-14, spacing-15, spacing-16;
|
||||
|
||||
:root {
|
||||
--spacing-00: #{$spacing-00};
|
||||
--spacing-01: #{$spacing-01};
|
||||
--spacing-02: #{$spacing-02};
|
||||
--spacing-03: #{$spacing-03};
|
||||
--spacing-04: #{$spacing-04};
|
||||
--spacing-05: #{$spacing-05};
|
||||
--spacing-06: #{$spacing-06};
|
||||
--spacing-07: #{$spacing-07};
|
||||
--spacing-08: #{$spacing-08};
|
||||
--spacing-09: #{$spacing-09};
|
||||
--spacing-10: #{$spacing-10};
|
||||
--spacing-11: #{$spacing-11};
|
||||
--spacing-12: #{$spacing-12};
|
||||
--spacing-13: #{$spacing-13};
|
||||
--spacing-14: #{$spacing-14};
|
||||
--spacing-15: #{$spacing-15};
|
||||
--spacing-16: #{$spacing-16};
|
||||
}
|
@@ -0,0 +1,112 @@
|
||||
// This file provides CSS variables for font size and line height, plus Sass variables for base text size for Bootstrap
|
||||
|
||||
:root {
|
||||
--font-sans: 'Noto Sans', sans-serif;
|
||||
--font-size-01: 0.75rem; // 12px
|
||||
--font-size-02: 0.875rem; // 14px
|
||||
--font-size-03: 1rem; // 16px
|
||||
--font-size-04: 1.125rem; // 18px
|
||||
--font-size-05: 1.25rem; // 20px
|
||||
--font-size-06: 1.5rem; // 24px
|
||||
--font-size-07: 1.875rem; // 30px
|
||||
--font-size-08: 2.25rem; // 36px
|
||||
--font-size-09: 3rem; // 48px
|
||||
--font-size-10: 3.25rem; // 52px
|
||||
--font-size-11: 3.75rem; // 60px
|
||||
--font-size-12: 4.5rem; // 72px
|
||||
--font-size-13: 6em; // 96px
|
||||
--line-height-01: 1rem; // 16px
|
||||
--line-height-02: 1.25rem; // 20px
|
||||
--line-height-03: 1.5rem; // 24px
|
||||
--line-height-04: 1.75rem; // 28px
|
||||
--line-height-05: 2rem; // 32px
|
||||
--line-height-06: 2.5rem; // 40px
|
||||
--line-height-07: 3rem; // 48px
|
||||
--line-height-08: 4rem; // 64px
|
||||
--line-height-09: 4.25rem; // 68px
|
||||
--line-height-10: 5rem; // 80px
|
||||
--line-height-11: 6rem; // 96px
|
||||
--line-height-12: 8rem; // 128px
|
||||
}
|
||||
|
||||
// Semantic styles, as Sass mixins
|
||||
@mixin display-lg {
|
||||
font-size: var(--font-size-13);
|
||||
line-height: var(--line-height-12);
|
||||
}
|
||||
|
||||
@mixin display-md {
|
||||
font-size: var(--font-size-12);
|
||||
line-height: var(--line-height-11);
|
||||
}
|
||||
|
||||
@mixin display-sm {
|
||||
font-size: var(--font-size-11);
|
||||
line-height: var(--line-height-10);
|
||||
}
|
||||
|
||||
@mixin display-xs {
|
||||
font-size: var(--font-size-10);
|
||||
line-height: var(--line-height-09);
|
||||
}
|
||||
|
||||
@mixin heading-2xl {
|
||||
font-size: var(--font-size-09);
|
||||
line-height: var(--line-height-08);
|
||||
}
|
||||
|
||||
@mixin heading-xl {
|
||||
font-size: var(--font-size-08);
|
||||
line-height: var(--line-height-07);
|
||||
}
|
||||
|
||||
@mixin heading-lg {
|
||||
font-size: var(--font-size-07);
|
||||
line-height: var(--line-height-06);
|
||||
}
|
||||
|
||||
@mixin heading-md {
|
||||
font-size: var(--font-size-06);
|
||||
line-height: var(--line-height-05);
|
||||
}
|
||||
|
||||
@mixin heading-sm {
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
}
|
||||
|
||||
@mixin heading-xs {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
@mixin body-lg {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
@mixin body-base {
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
@mixin body-sm {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
|
||||
@mixin body-xs {
|
||||
font-size: var(--font-size-01);
|
||||
line-height: var(--line-height-01);
|
||||
}
|
||||
|
||||
@mixin font-mono {
|
||||
font-family: 'DM Mono', monospace;
|
||||
|
||||
// We're using the "ss05" (stylistic set 5) version of the DM Mono, by setting the `font-feature-settings` rule
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
|
||||
// We use the ss05 specifically to remove the "squiggle" below the f letter.
|
||||
// You can try removing the `font-feature-settings` rule and check what happens to the letter "f",
|
||||
// as it's quite hard to describe it with sentences alone
|
||||
font-feature-settings: 'ss05';
|
||||
}
|
Reference in New Issue
Block a user