AstrolabeCAE/SiteWebAstrolabe_public
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove stalfos lib - with regression on some UI elements

Browse Source
This commit is contained in:
Déborah Jean
2025-09-26 16:17:38 +02:00
parent 208ec207e5
commit 327e8a2af4
12 changed files with 39 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/scss/_config.scss
View File

@@ -6,22 +6,14 @@
* it is relevant for (font-size, margin, padding). All items are
* calcuated off these tokens.
*/
$stalfos-size-scale: map-get($tokens, 'size-scale');
$size-scale: map-get($tokens, 'size-scale');
/**
* COLORS
* Colors are shared between backgrounds and text by default.
* You can also use them to power borders, fills or shadows, for example.
*/
$stalfos-colors: map-get($tokens, 'colors');
/**
* UTIL PREFIX
* All pre-built, framework utilities will have this prefix.
* Example: the wrapper utility is '.sf-wrapper' because the default
* prefix is 'sf-'.
*/
$stalfos-util-prefix: 'sf-';
$colors: map-get($tokens, 'colors');
/**
* METRICS
@@ -32,151 +24,3 @@ $metrics: (
'wrap-inner-max-width': 47rem,
'md-breakpoint': 48rem
);
/**
* CORE CONFIG
* This powers everything from utility class generation to breakpoints
* to enabling/disabling pre-built components/utilities.
*/
$stalfos-config: (
'align': (
'items': (
'start': 'flex-start',
'center': 'center',
'end': 'flex-end'
),
'output': 'responsive',
'property': 'align-items'
),
'bg': (
'items': $stalfos-colors,
'output': 'standard',
'property': 'background'
),
'color': (
'items': $stalfos-colors,
'output': 'standard',
'property': 'color'
),
'box': (
'items': (
'block': 'block',
'flex': 'flex',
'inline-flex': 'inline-flex',
'hide': 'none'
),
'output': 'responsive',
'property': 'display'
),
'font': (
'items': map-get($tokens, 'fonts'),
'output': 'standard',
'property': 'font-family'
),
'gap-top': (
'items': $stalfos-size-scale,
'output': 'standard',
'property': 'margin-top'
),
'gap-bottom': (
'items': $stalfos-size-scale,
'output': 'standard',
'property': 'margin-bottom'
),
'leading': (
'items': (
'tight': '1.2',
'mid': '1.5',
'loose': '1.7'
),
'output': 'standard',
'property': 'line-height'
),
'measure': (
'items': (
'long': '75ch',
'short': '60ch',
'compact': '40ch'
),
'output': 'standard',
'property': 'max-width'
),
'pad-top': (
'items': $stalfos-size-scale,
'output': 'standard',
'property': 'padding-top'
),
'pad-bottom': (
'items': $stalfos-size-scale,
'output': 'standard',
'property': 'padding-bottom'
),
'pad-left': (
'items': $stalfos-size-scale,
'output': 'standard',
'property': 'padding-left'
),
'space': (
'items': (
'between': 'space-between',
'around': 'space-around',
'before': 'flex-end'
),
'output': 'responsive',
'property': 'justify-content'
),
'stack': (
'items': (
'300': 0,
'400': 10,
'500': 20,
'600': 30,
'700': 40
),
'output': 'standard',
'property': 'z-index'
),
'ta': (
'items': (
'right': 'right',
'left': 'left',
'center': 'center'
),
'output': 'responsive',
'property': 'text-align'
),
'text': (
'items': $stalfos-size-scale,
'output': 'responsive',
'property': 'font-size'
),
'weight': (
'items': (
'light': '300',
'regular': '400',
'mid': '600',
'bold': '700'
),
'output': 'standard',
'property': 'font-weight'
),
'width': (
'items': (
'full': '100%',
'half': percentage(.5),
'quarter': percentage(.25),
'third': percentage(.33)
),
'output': 'responsive',
'property': 'width'
),
'breakpoints': (
'md': #{'(min-width: ' + map-get($metrics, 'md-breakpoint') + ')'}
),
'utilities': (
'reset': 'on',
'icon': 'off',
'flow': 'on',
'wrapper': 'off'
)
);

25
src/scss/_functions.scss Normal file
View File

@@ -0,0 +1,25 @@
/**
* CUSTOM FUNCTIONS
* Replacement functions for stalfos get-size() and get-color() functions
*/
/**
* Get size from the size scale
* @param {string|number} $size - The size key from the scale
* @return {string} - The size value
*/
@function get-size($size) {
@if $size == 'base' {
@return map-get($tokens, 'size-scale', 'base');
}
@return map-get($tokens, 'size-scale', $size);
}
/**
* Get color from the color palette
* @param {string} $color - The color key from the palette
* @return {string} - The color value
*/
@function get-color($color) {
@return map-get($tokens, 'colors', $color);
}

2
src/scss/_theme.scss
View File

@@ -1,6 +1,6 @@
:root {
// Pull the tokens and generate custom props
@each $color in $stalfos-colors {
@each $color in $colors {
#{'--color-' + nth($color, 1)}: #{nth($color, 2)};
}

4
src/scss/_typography.scss
View File

@@ -58,7 +58,7 @@
body {
$line-height: get-size(600);
@include apply-utility('font', 'base');
font-family: #{map-get($tokens, 'fonts', 'base')};
// Strip the unit off the size ratio to generate a line height
line-height: calc($line-height / 1);
@@ -66,7 +66,7 @@ body {
h1,
h2 {
@include apply-utility('font', 'brand');
font-family: #{map-get($tokens, 'fonts', 'brand')};
}
h1 {

2
src/scss/components/_form.scss
View File

@@ -40,7 +40,7 @@ label {
input,
textarea,
select {
@include apply-utility('font', 'base');
font-family: #{map-get($tokens, 'fonts', 'base')};
background-color: var(--color-primary-glare);
font: inherit;
border: 0;

2
src/scss/components/_heading-permalink.scss
View File

@@ -4,7 +4,7 @@
margin-left: .3em;
margin-top: .2em;
@include media-query('md') {
@media (min-width: 48rem) {
font-size: .6em;
margin-top: .4em;
}

2
src/scss/components/_modal.scss
View File

@@ -10,7 +10,7 @@
}
h3 {
@include apply-utility('font', 'brand');
font-family: #{map-get($tokens, 'fonts', 'brand')};
font-size: 1.5rem;
}
}

2
src/scss/components/_nav.scss
View File

@@ -23,7 +23,7 @@
flex-shrink: 0;
a {
@include apply-utility('weight', 'mid');
font-weight: 600;
color: currentColor;
&:not(:hover) {

4
src/scss/components/_post.scss
View File

@@ -11,7 +11,7 @@
h2,
h3 {
@include apply-utility('leading', 'tight');
line-height: 1.2;
position: relative;
}
@@ -288,7 +288,7 @@
}
h2 {
@include apply-utility('font', 'base');
font-family: #{map-get($tokens, 'fonts', 'base')};
text-align: left;
font-weight: 600;
margin-bottom: 1rem;

2
src/scss/components/_video-player.scss
View File

@@ -2,7 +2,7 @@
position: relative;
padding-top: 56.25%;
@include media-query('md') {
@media (min-width: 48rem) {
.post & {
padding-top: 66%;
}

4
src/scss/global.scss
View File

@@ -1,7 +1,5 @@
@import 'config';
// Pull in the stalfos lib
@import '../../node_modules/stalfos/stalfos';
@import 'functions';
@import 'theme';