This commit is contained in:
urania 2024-05-28 11:11:00 +00:00
commit ce362f6236
13 changed files with 11405 additions and 0 deletions

7
css/.gitignore vendored Normal file
View File

@ -0,0 +1,7 @@
.DS_Store
./node_modules
**node_modules
/package
.env
.env.*
!.env.example

10315
css/compiled.css Normal file

File diff suppressed because it is too large Load Diff

1
css/compiled.css.map Normal file

File diff suppressed because one or more lines are too long

1
css/compiled.mini.css Normal file

File diff suppressed because one or more lines are too long

241
css/package-lock.json generated Normal file
View File

@ -0,0 +1,241 @@
{
"name": "css",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"bootstrap": "^5.3.3",
"sass": "^1.77.2"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/braces": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dependencies": {
"fill-range": "^7.1.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/fill-range": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dependencies": {
"to-regex-range": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/immutable": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
"integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dependencies": {
"is-extglob": "^2.1.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"engines": {
"node": ">=0.12.0"
}
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/sass": {
"version": "1.77.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
"integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/source-map-js": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dependencies": {
"is-number": "^7.0.0"
},
"engines": {
"node": ">=8.0"
}
}
}
}

9
css/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"scripts": {
"build": "sass ./scss/base.scss ./compiled.css"
},
"dependencies": {
"bootstrap": "^5.3.3",
"sass": "^1.77.2"
}
}

111
css/scss/base.scss Normal file
View File

@ -0,0 +1,111 @@
@import '../node_modules/bootstrap/scss/functions';
// override variables
@import './bootstrap/variables';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';
// override maps
@import './bootstrap/maps';
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/utilities';
@import '../node_modules/bootstrap/scss/reboot';
// override typography
@import './bootstrap/typography';
@import '../node_modules/bootstrap/scss/type';
@import './bootstrap/accordion';
@import '../node_modules/bootstrap/scss/transitions';
@import '../node_modules/bootstrap/scss/badge';
@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/buttons';
@import './bootstrap/utilities';
@function contrast-ratio($color1, $color2) {
// Calculate the relative luminance for each color
$luminance1: luminance($color1);
$luminance2: luminance($color2);
// Calculate the contrast ratio
$contrastRatio: if(
$luminance1 > $luminance2,
calc(($luminance1 + 0.05) / ($luminance2 + 0.05)),
calc(($luminance2 + 0.05) / ($luminance1 + 0.05))
);
// Return the contrast ratio
@return $contrastRatio;
}
@function get-contrasting-text-color($background-color, $min-contrast-ratio: 4.5) {
// Calculate relative luminance
$rel-lum: luminance($background-color);
$bg-lum: if($rel-lum > 0.5, $rel-lum, 1 - $rel-lum);
// Calculate contrast ratio
$light-contrast: contrast-ratio($light, $background-color);
$dark-contrast: contrast-ratio($dark, $background-color);
// Determine the text color based on contrast ratio and minimum threshold
@if (calc($bg-lum * $dark-contrast) >= $min-contrast-ratio) {
@return $dark;
} @else if (calc($bg-lum * $light-contrast) >= $min-contrast-ratio) {
@return $light;
} @else {
@return if($light-contrast > $dark-contrast, $light, $dark);
}
}
@each $color, $hex in $all-colors {
.bg-#{$color} {
background-color: $hex;
color: get-contrasting-text-color($hex);
}
.bg-gradient-#{$color} {
--#{$prefix}gradient-start:0%;
--#{$prefix}gradient-end:100%;
--#{$prefix}gradient-to: transparent;
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
}
}
@each $color, $hex in $theme-colors {
.bg-gradient-#{$color} {
--#{$prefix}gradient-start:0%;
--#{$prefix}gradient-end:100%;
--#{$prefix}gradient-to: transparent;
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
}
}
@each $color, $hex in $all-colors {
.border-#{$color} {
--#{$prefix}border-color: #{$hex};
}
}
@import '../node_modules/bootstrap/scss/utilities/api';
* {
box-sizing: border-box;
scroll-behavior: smooth;
}
html,
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}

View File

@ -0,0 +1,162 @@
//
// Base styles
//
.accordion {
// scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
// scss-docs-end accordion-css-vars
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
font-size: inherit;
color: var(--#{$prefix}accordion-btn-color);
text-align: left; // Reset button style
background-color: var(--#{$prefix}accordion-btn-bg);
border: 0;
@include border-radius(0);
overflow-anchor: none;
@include transition(var(--#{$prefix}accordion-transition));
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0
var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);
transform: var(--#{$prefix}accordion-btn-icon-transform);
}
}
// Accordion icon
&::after {
flex-shrink: 0;
width: var(--#{$prefix}accordion-btn-icon-width);
height: var(--#{$prefix}accordion-btn-icon-width);
margin-left: auto;
content: '';
background-image: var(--#{$prefix}accordion-btn-icon);
background-repeat: no-repeat;
background-size: var(--#{$prefix}accordion-btn-icon-width);
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
}
&:hover {
z-index: 2;
}
&:focus {
z-index: 3;
outline: 0;
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
}
}
.accordion-header {
margin-bottom: 0;
}
.accordion-item {
color: var(--#{$prefix}accordion-color);
background-color: var(--#{$prefix}accordion-bg);
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
&:first-of-type {
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
> .accordion-header .accordion-button {
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}
&:not(:first-of-type) {
border-top: 0;
}
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
> .accordion-header .accordion-button {
&.collapsed {
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}
> .accordion-collapse {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
}
}
}
.accordion-body {
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
}
// Flush accordion items
//
// Remove borders and border-radius to keep accordion items edge-to-edge.
.accordion-flush {
> .accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
}
// stylelint-disable selector-max-class
> .accordion-header .accordion-button {
&,
&.collapsed {
@include border-radius(0);
}
}
// stylelint-enable selector-max-class
> .accordion-collapse {
@include border-radius(0);
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
}
}
}

View File

@ -0,0 +1,79 @@
$primary-100: tint-color($primary, 80%) !default;
$primary-200: tint-color($primary, 60%) !default;
$primary-300: tint-color($primary, 40%) !default;
$primary-400: tint-color($primary, 20%) !default;
$primary-500: $primary !default;
$primary-600: shade-color($primary, 20%) !default;
$primary-700: shade-color($primary, 40%) !default;
$primary-800: shade-color($primary, 60%) !default;
$primary-900: shade-color($primary, 80%) !default;
$secondary-100: tint-color($secondary, 80%) !default;
$secondary-200: tint-color($secondary, 60%) !default;
$secondary-300: tint-color($secondary, 40%) !default;
$secondary-400: tint-color($secondary, 20%) !default;
$secondary-500: $secondary !default;
$secondary-600: shade-color($secondary, 20%) !default;
$secondary-700: shade-color($secondary, 40%) !default;
$secondary-800: shade-color($secondary, 60%) !default;
$secondary-900: shade-color($secondary, 80%) !default;
$success-100: tint-color($success, 80%) !default;
$success-200: tint-color($success, 60%) !default;
$success-300: tint-color($success, 40%) !default;
$success-400: tint-color($success, 20%) !default;
$success-500: $success !default;
$success-600: shade-color($success, 20%) !default;
$success-700: shade-color($success, 40%) !default;
$success-800: shade-color($success, 60%) !default;
$success-900: shade-color($success, 80%) !default;
$warning-100: tint-color($warning, 80%) !default;
$warning-200: tint-color($warning, 60%) !default;
$warning-300: tint-color($warning, 40%) !default;
$warning-400: tint-color($warning, 20%) !default;
$warning-500: $warning !default;
$warning-600: shade-color($warning, 20%) !default;
$warning-700: shade-color($warning, 40%) !default;
$warning-800: shade-color($warning, 60%) !default;
$warning-900: shade-color($warning, 80%) !default;
$info-100: tint-color($info, 80%) !default;
$info-200: tint-color($info, 60%) !default;
$info-300: tint-color($info, 40%) !default;
$info-400: tint-color($info, 20%) !default;
$info-500: $info !default;
$info-600: shade-color($info, 20%) !default;
$info-700: shade-color($info, 40%) !default;
$info-800: shade-color($info, 60%) !default;
$info-900: shade-color($info, 80%) !default;
$danger-100: tint-color($danger, 80%) !default;
$danger-200: tint-color($danger, 60%) !default;
$danger-300: tint-color($danger, 40%) !default;
$danger-400: tint-color($danger, 20%) !default;
$danger-500: $danger !default;
$danger-600: shade-color($danger, 20%) !default;
$danger-700: shade-color($danger, 40%) !default;
$danger-800: shade-color($danger, 60%) !default;
$danger-900: shade-color($danger, 80%) !default;
$light-100: tint-color($light, 80%) !default;
$light-200: tint-color($light, 60%) !default;
$light-300: tint-color($light, 40%) !default;
$light-400: tint-color($light, 20%) !default;
$light-500: $light !default;
$light-600: shade-color($light, 20%) !default;
$light-700: shade-color($light, 40%) !default;
$light-800: shade-color($light, 60%) !default;
$light-900: shade-color($light, 80%) !default;
$dark-100: tint-color($dark, 80%) !default;
$dark-200: tint-color($dark, 60%) !default;
$dark-300: tint-color($dark, 40%) !default;
$dark-400: tint-color($dark, 20%) !default;
$dark-500: $dark !default;
$dark-600: shade-color($dark, 20%) !default;
$dark-700: shade-color($dark, 40%) !default;
$dark-800: shade-color($dark, 60%) !default;
$dark-900: shade-color($dark, 80%) !default;

View File

@ -0,0 +1,119 @@
@import 'colors';
$theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'light': $light,
'dark': $dark
) !default;
$primary-map: (
'primary-100': $primary-100,
'primary-200': $primary-200,
'primary-300': $primary-300,
'primary-400': $primary-400,
'primary-500': $primary-500,
'primary-600': $primary-600,
'primary-700': $primary-700,
'primary-800': $primary-800,
'primary-900': $primary-900
) !default;
$secondary-map: (
'secondary-100': $secondary-100,
'secondary-200': $secondary-200,
'secondary-300': $secondary-300,
'secondary-400': $secondary-400,
'secondary-500': $secondary-500,
'secondary-600': $secondary-600,
'secondary-700': $secondary-700,
'secondary-800': $secondary-800,
'secondary-900': $secondary-900
) !default;
$success-map: (
'success-100': $success-100,
'success-200': $success-200,
'success-300': $success-300,
'success-400': $success-400,
'success-500': $success-500,
'success-600': $success-600,
'success-700': $success-700,
'success-800': $success-800,
'success-900': $success-900
) !default;
$warning-map: (
'warning-100': $warning-100,
'warning-200': $warning-200,
'warning-300': $warning-300,
'warning-400': $warning-400,
'warning-500': $warning-500,
'warning-600': $warning-600,
'warning-700': $warning-700,
'warning-800': $warning-800,
'warning-900': $warning-900
) !default;
$info-map: (
'info-100': $info-100,
'info-200': $info-200,
'info-300': $info-300,
'info-400': $info-400,
'info-500': $info-500,
'info-600': $info-600,
'info-700': $info-700,
'info-800': $info-800,
'info-900': $info-900
) !default;
$danger-map: (
'danger-100': $danger-100,
'danger-200': $danger-200,
'danger-300': $danger-300,
'danger-400': $danger-400,
'danger-500': $danger-500,
'danger-600': $danger-600,
'danger-700': $danger-700,
'danger-800': $danger-800,
'danger-900': $danger-900
) !default;
$light-map: (
'light-100': $light-100,
'light-200': $light-200,
'light-300': $light-300,
'light-400': $light-400,
'light-500': $light-500,
'light-600': $light-600,
'light-700': $light-700,
'light-800': $light-800,
'light-900': $light-900
) !default;
$dark-map: (
'dark-100': $dark-100,
'dark-200': $dark-200,
'dark-300': $dark-300,
'dark-400': $dark-400,
'dark-500': $dark-500,
'dark-600': $dark-600,
'dark-700': $dark-700,
'dark-800': $dark-800,
'dark-900': $dark-900
) !default;
$all-colors: map-merge-multiple(
$primary-map,
$secondary-map,
$success-map,
$info-map,
$warning-map,
$danger-map,
$light-map,
$dark-map
);

View File

@ -0,0 +1,67 @@
%heading {
margin-top: 0; // 1
margin-bottom: .25em;
font-family: $headings-font-family;
font-optical-sizing: auto;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
color: var(--#{$prefix}heading-color);
}
a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
text-underline-offset: 0.25rem;
text-decoration-thickness: 2px;
&:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
line-height: 1.48;
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
line-height: 1.5;
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
line-height: 1.52;
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
line-height: 1.5;
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
line-height: 1.5;
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
line-height: 1.52;
}
p {
max-width: 80ch;
}
.alternative {
font-family: $display-font-family;
line-height: 1.1;
font-weight: 500;
font-size: 21px;
}

View File

@ -0,0 +1,210 @@
$utilities: map-merge(
$utilities,
(
'color':
map-merge(
map-get($utilities, 'color'),
(
values: map-merge(map-get(map-get($utilities, 'color'), 'values'), ($all-colors))
)
),
'text-wrap': (
property: 'text-wrap',
values: wrap nowrap pretty balance,
class: 'text-wrap'
),
'font-family': (
property: 'font-family',
values: (
'sans': $headings-font-family,
'serif': $font-family-base,
'serif-alt': $display-font-family,
'mono': $font-family-code
),
class: 'font-family'
),
'width': (
property: width,
class: w,
values: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 6,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
'height': (
property: height,
class: h,
values: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 6,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
'inset': (
property: inset,
class: inset,
values: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
'rounded-tl': (
property: border-top-left-radius,
class: rounded-tl,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
'rounded-bl': (
property: border-bottom-left-radius,
class: rounded-bl,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
'rounded-tr': (
property: border-top-right-radius,
class: rounded-tr,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
'rounded-br': (
property: border-bottom-right-radius,
class: rounded-br,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
'overflow': (
class: overflow,
property: overflow,
responsive: true,
values: hidden visible clip scroll auto
),
'overflow-x': (
class: overflow-x,
property: overflow-x,
responsive: true,
values: hidden visible clip scroll auto
),
'overflow-y': (
class: overflow-y,
property: overflow-y,
responsive: true,
values: hidden visible clip scroll auto
),
'position': (
property: position,
responsive: true,
values: static relative absolute fixed sticky
),
'border': (
property: border,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0
)
),
'border-top': (
property: border-top,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0
)
),
'border-end': (
property: border-right,
responsive: true,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0
)
),
'border-bottom': (
property: border-bottom,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0
)
),
'border-start': (
property: border-left,
responsive: true,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0
)
)
)
);

View File

@ -0,0 +1,83 @@
$prefix: 'bs-';
$primary: #005eb8;
$secondary: #e93cac;
$success: #97d700;
$info: #41b6e6;
$warning: #ffc72c;
$danger: #da291c;
$light: #fff9e5;
$dark: #33322e;
$body-color: $dark;
$body-bg: $light;
$body-color-dark: $light;
$body-bg-dark: $dark;
$font-family-base: 'Sentient';
$font-family-sans: 'Libre Franklin', sans-serif;
$font-family-code: 'Azeret Mono', monospace;
$display-font-family: 'Cormorant', serif;
$headings-font-family: 'Libre Franklin', sans-serif;
$font-size-base: 1rem;
$small-font-size: 0.875em;
$code-font-size: 0.85em;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
$display-font-style: italic;
$display-font-weight: 700;
$display-line-height: 1.1;
$display-font-sizes: (
1: 54px,
2: 44px,
3: 39px,
4: 33px,
5: 27px,
6: 21px
) !default;
$font-sizes: (
1: $font-size-base * 2.5,
2: $font-size-base * 2,
3: $font-size-base * 1.75,
4: $font-size-base * 1.5,
5: $font-size-base * 1.25,
6: $font-size-base * 1,
7: $font-size-base * 0.875,
8: $font-size-base * 0.75,
9: $font-size-base * 0.625
) !default;
$spacer: 1rem;
$position-values: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer * 0.75,
4: $spacer * 1,
5: $spacer * 2,
6: $spacer * 3,
7: $spacer * 4,
8: $spacer * 5,
9: $spacer * 6,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
) !default;
:root {
--#{$prefix}badge-border-radius: var(--#{$prefix}badge-border-radius);
}