first commit

This commit is contained in:
2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions

View File

@@ -0,0 +1,5 @@
@import 'border-radius';
@import 'colors';
@import 'elevation';
@import 'spacing';
@import 'typography';

View File

@@ -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};
}

View File

@@ -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%
);
}

View File

@@ -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%);
}

View File

@@ -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};
}

View File

@@ -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';
}