danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

make all css custom properties consistent in naming style

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-06-21 14:09:28 -05:00
parent a6b2e6edaf
commit a225edaac3
10 changed files with 115 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
source/assets/sass/components/_alerts.scss
View File

@ -4,12 +4,12 @@
@use '../visual-design/typography';
.sl-c-alert {
background: var(--alert-bg, var(--sl-color--highlight));
background: var(--sl-background--alert, var(--sl-color--highlight));
color: var(--sl-color--white);
font-size: var(--sl-font-size--small);
padding-bottom: var(--alert-padding-block, var(--sl-gutter--minus));
padding-top: var(--alert-padding-block, var(--sl-gutter--minus));
text-align: var(--alert-align, center);
padding-bottom: var(--sl-padding-block--alert, var(--sl-gutter--minus));
padding-top: var(--sl-padding-block--alert, var(--sl-gutter--minus));
text-align: var(--sl-align--alert, center);
p,
ul,
@ -30,8 +30,8 @@
}
a {
--sl-color-text--link: var(--sl-color--white);
--sl-color-background--link-state: rgba(0, 0, 0, 6.25%);
--sl-color--link: var(--sl-color--white);
--sl-background--link-state: rgba(0, 0, 0, 6.25%);
--sl-border-color--link: #{rgba(
brand.$sl-color--white,
var(--opacity-border, 0.5)
@ -51,13 +51,13 @@
}
.sl-c-alert--info {
--alert-bg: var(--sl-color--midnight-blue);
--sl-background--alert: var(--sl-color--midnight-blue);
}
.sl-c-alert--special {
--alert-align: left;
--alert-bg: black;
--alert-padding-block: var(--sl-gutter--triple);
--sl-align--alert: left;
--sl-background--alert: black;
--sl-padding-block--alert: var(--sl-gutter--triple);
}
.sl-c-alert-title {

50
source/assets/sass/components/_buttons.scss
View File

@ -4,13 +4,13 @@
.sl-c-button {
align-items: center;
border: 0;
border-radius: var(--radius-button, var(--sl-border-radius--large));
background: var(--color-button-background, var(--sl-color--iron));
border-radius: var(--sl-radius--button, var(--sl-border-radius--large));
background: var(--sl-background--button, var(--sl-color--iron));
box-shadow: 0 2px 1px var(--sl-color--shadow);
color: var(--color-button-text, var(--sl-color--highlight));
color: var(--sl-color--button, var(--sl-color--highlight));
cursor: pointer;
display: var(--display-button, inline-block);
font-weight: var(--font-weight-button);
display: var(--sl-display--button, inline-block);
font-weight: var(--sl-font-weight--button);
justify-content: center;
margin: 0;
padding: var(--sl-gutter--minus) var(--sl-gutter);
@ -18,41 +18,41 @@
&:hover,
&:focus {
background: var(
--color-button-background-state,
var(--color-button-background, var(--sl-color--link-action))
--sl-background--button-state,
var(--sl-background--button, var(--sl-color--link-action))
);
--color-button-text: var(--sl-color--action);
--sl-color--button: var(--sl-color--action);
color: var(--color-button-text-state, var(--color-button-text));
color: var(--sl-color--button-state, var(--sl-color--button));
}
&:active {
background: var(
--color-button-background-active,
--sl-background--button-active,
var(--sl-color--link-action)
);
color: var(--color-button-text-active, var(--sl-color--highlight));
color: var(--sl-color--button-active, var(--sl-color--highlight));
}
&--primary {
--color-button-background: var(--sl-color--highlight);
--color-button-background-active: var(--sl-color--active);
--color-button-background-state: var(--sl-color--action);
--color-button-text: var(--sl-color--white);
--color-button-text-active: var(--sl-color--white);
--color-button-text-state: var(--sl-color--white);
--sl-background--button: var(--sl-color--highlight);
--sl-background--button-active: var(--sl-color--active);
--sl-background--button-state: var(--sl-color--action);
--sl-color--button: var(--sl-color--white);
--sl-color--button-active: var(--sl-color--white);
--sl-color--button-state: var(--sl-color--white);
}
&--tab {
--color-button-background: var(--sl-color--code-background-darker);
--color-button-background-active: var(--color-button-background-state);
--color-button-background-state: transparent;
--color-button-text: var(--sl-color--highlight);
--color-button-text-active: inherit;
--color-button-text-state: var(--sl-color--midnight-blue);
--font-weight-button: #{typography.$sl-font-weight--bold};
--radius-button: 0;
--sl-background--button: var(--sl-color--code-background-darker);
--sl-background--button-active: var(--sl-background--button-state);
--sl-background--button-state: transparent;
--sl-color--button: var(--sl-color--highlight);
--sl-color--button-active: var(--sl-color--midnight-blue);
--sl-color--button-state: var(--sl-color--midnight-blue);
--sl-font-weight--button: #{typography.$sl-font-weight--bold};
--sl-radius--button: 0;
box-shadow: none;
}

22
source/assets/sass/components/_callouts.scss
View File

@ -3,21 +3,25 @@
@use '../config/color/brand';
.sl-c-callout {
margin: var(--sl-c-callout--block-margin, var(--sl-gutter--sesqui)) 0;
padding: var(--sl-c-callout--block-padding, var(--sl-gutter--sesqui))
margin: var(--sl-block-margin--callout, var(--sl-gutter--sesqui)) 0;
padding: var(--sl-block-padding--callout, var(--sl-gutter--sesqui))
var(--sl-gutter);
background: color.adjust(brand.$sl-color--pale-sky, $lightness: 60%);
background: var(--sl-background--callout, color.adjust(brand.$sl-color--pale-sky, $lightness: 60%));
border-color: var(--sl-border-color--callout);
border-style: var(--sl-border-style--callout, solid);
border-width: var(--sl-border-width--callout, 0);
border-radius: var(--sl-border-radius--small);
&--warning {
background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
border: var(--sl-border--small) solid var(--sl-color--border-blush);
--sl-background--callout: var(--sl-color--warning-lighter);
--sl-border-color--callout: var(--sl-color--warning-light);
--sl-border-width--callout: var(--sl-border--small);
}
&--fun-fact {
background: color.adjust(brand.$sl-color--patina, $lightness: 47%);
border: var(--sl-border--small) solid
color.adjust(brand.$sl-color--patina, $lightness: 32%);
--sl-background--callout: var(--sl-color--info-lighter);
--sl-border-color--callout: var(--sl-color--info-light);
--sl-border-width--callout: var(--sl-border--small);
}
&--function {
@ -38,7 +42,7 @@
padding: var(--sl-gutter--minus);
.sl-c-callout & {
background: color.adjust(brand.$sl-color--pale-sky, $lightness: 53%);
--sl-background--callout: #{color.adjust(brand.$sl-color--pale-sky, $lightness: 53%)};
}
}

2
source/assets/sass/components/_lists.scss
View File

@ -56,7 +56,7 @@
}
a {
--sl-color-background--link-state: var(--sl-color--dawn-pink);
--sl-background--link-state: var(--sl-color--dawn-pink);
border: none;
cursor: pointer;

2
source/assets/sass/components/_mac-stadium-icon.scss
View File

@ -1,4 +1,4 @@
.mac-stadium-icon {
margin-block: 0;
width: var(--mac-stadium-icon-width);
width: var(--sl-width--mac-stadium-icon);
}

62
source/assets/sass/components/_playground.scss
View File

@ -4,7 +4,7 @@
@use '../visual-design/typography';
.playground {
--sl-container-max-width: 100vw;
--sl-max-width--container: 100vw;
display: grid;
grid-template:
@ -47,8 +47,8 @@
}
.sl-l-section--playground {
--container-inline-padding: 0;
--container-inline-padding-large: 0;
--sl-inline-padding--container: 0;
--sl-inline-padding--container-large: 0;
border-bottom: 1px solid var(--sl-color--iron);
display: inherit;
@ -87,7 +87,7 @@
// Playground banner actions alert message
.sl-r-banner__playground-alert {
--alert-padding-block: 0;
--sl-padding-block--alert: 0;
grid-area: alert;
height: 0;
@ -98,7 +98,7 @@
visibility: hidden;
&.show {
--alert-padding-block: var(--sl-gutter--minus);
--sl-padding-block--alert: var(--sl-gutter--minus);
height: 100%;
opacity: 1;
@ -108,8 +108,8 @@
// Playground Editor area
.sl-c-playground {
--sl-c-callout--block-margin: 0;
--sl-c-callout--block-padding: var(--sl-gutter--quarter);
--sl-block-margin--callout: 0;
--sl-block-padding--callout: var(--sl-gutter--quarter);
display: grid;
gap: var(--sl-gutter);
@ -144,23 +144,23 @@
// Precompiled and Compiled code container
.sl-c-playground__code-editor-wrapper {
background-color: var(--sl-color-editor-background);
background-color: var(--sl-background--editor);
border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
}
[data-code='precompiled'] {
--sl-color-editor-background: var(--sl-color--white);
--sl-background--editor: var(--sl-color--white);
grid-area: sass;
}
[data-code='compiled'] {
--sl-color-editor-background: var(--sl-color--code-background);
--sl-background--editor: var(--sl-color--code-background);
}
// Codemirror overrides
.cm-editor {
background-color: var(--sl-color-editor-background);
background-color: var(--sl-background--editor);
color: var(--sl-color--code-base, var(--sl-color--code-text));
font-size: var(--sl-font-size--x-small);
height: 100%;
@ -168,7 +168,7 @@
overflow-y: inherit;
.cm-gutters {
background-color: var(--sl-color-editor-background);
background-color: var(--sl-background--editor);
border-right: none;
}
@ -191,7 +191,7 @@
.cm-activeLineGutter,
.cm-activeLine {
background-color: var(--sl-color--highlight-blush);
background-color: var(--sl-color--warning-highlight);
[data-code='compiled'] & {
background-color: var(--sl-color--code-background);
@ -200,7 +200,7 @@
&.cm-focused {
[data-code='precompiled'] & {
outline: 1px solid var(--sl-color--border-blush);
outline: 1px solid var(--sl-color--warning-light);
}
[data-code='compiled'] & {
@ -208,6 +208,23 @@
}
}
.cm-diagnostic {
color: var(--sl-color--code-text);
background: var(--sl-color--code-background-darker);
}
.cm-diagnostic-error {
border-color: var(--sl-color--error);
}
.cm-diagnostic-warning {
border-color: var(--sl-color--warn);
}
.cm-diagnostic-info {
border-color: var(--sl-color--success);
}
.sl-code-is-precompiled & {
cursor: text;
}
@ -264,21 +281,20 @@
grid-area: editor-tabbar;
[data-active='true'] {
--color-button-text-focus: var(--color-button-tab-active);
--color-button-text: var(--sl-color--pale-sky);
--sl-color--button: var(--sl-color--pale-sky);
}
[data-code='precompiled'] & {
[data-active='true'] {
--color-button-background: var(--sl-color--white);
--color-button-background-state: var(--sl-color--white);
--sl-background--button: var(--sl-color--white);
--sl-background--button-state: var(--sl-color--white);
}
}
[data-code='compiled'] & {
[data-active='true'] {
--color-button-background: var(--sl-color--code-background);
--color-button-background-state: var(--sl-color--code-background);
--sl-background--button: var(--sl-color--code-background);
--sl-background--button-state: var(--sl-color--code-background);
}
}
}
@ -308,11 +324,11 @@
align-items: center;
display: grid;
gap: var(--sl-gutter);
grid-template-columns: minmax(var(--twitter-link-width), auto) 1fr;
grid-template-columns: minmax(var(--sl-width--twitter-link), auto) 1fr;
@include breakpoints.sl-breakpoint--large {
grid-template-columns: minmax(var(--twitter-link-width), auto) minmax(
var(--mac-stadium-icon-width),
grid-template-columns: minmax(var(--sl-width--twitter-link), auto) minmax(
var(--sl-width--mac-stadium-icon),
auto
);
}

4
source/assets/sass/config/_scale.scss
View File

@ -57,5 +57,5 @@ $sl-playground-heading: 2.75rem;
// Component Sizes Custom
// ----------------------
$mac-stadium-icon-width: 7rem;
$twitter-link-width: 8rem;
$sl-width--mac-stadium-icon: 7rem;
$sl-width--twitter-link: 8rem;

10
source/assets/sass/config/color/_content.scss
View File

@ -17,11 +17,17 @@ $sl-color--code-muted: #656556;
$sl-color--code-base: #066;
$sl-color--code-cool: #458;
$sl-color--code-dark: black;
$sl-color--border-blush: color.adjust(
$sl-color--warning-light: color.adjust(
brand.$sl-color--hopbush,
$lightness: 27%
);
$sl-color--highlight-blush: rgba($sl-color--border-blush, 0.2);
$sl-color--warning-lighter: color.adjust(
brand.$sl-color--hopbush,
$lightness: 38%
);
$sl-color--warning-highlight: rgba($sl-color--warning-light, 0.2);
$sl-color--info-light: color.adjust(brand.$sl-color--patina, $lightness: 32%);
$sl-color--info-lighter: color.adjust(brand.$sl-color--patina, $lightness: 47%);
$sl-color--error: #cf0254;
$sl-color--warn: #c14e00;
$sl-color--success: #168073;

10
source/assets/sass/layout/_containers.scss
View File

@ -4,17 +4,17 @@
.sl-l-container {
margin-left: auto;
margin-right: auto;
max-width: var(--sl-container-max-width, functions.sl-px-to-rem(1920px));
padding-left: var(--container-inline-padding, var(--sl-gutter));
padding-right: var(--container-inline-padding, var(--sl-gutter));
max-width: var(--sl-max-width--container, functions.sl-px-to-rem(1920px));
padding-left: var(--sl-inline-padding--container, var(--sl-gutter));
padding-right: var(--sl-inline-padding--container, var(--sl-gutter));
@include breakpoints.sl-breakpoint--small {
padding-left: var(
--container-inline-padding-large,
--sl-inline-padding--container-large,
var(--sl-gutter--double)
);
padding-right: var(
--container-inline-padding-large,
--sl-inline-padding--container-large,
var(--sl-gutter--double)
);
}

22
source/assets/sass/visual-design/_theme.scss
View File

@ -36,13 +36,13 @@ body {
}
a {
--sl-color-text--link: var(--sl-color--midnight-blue);
--sl-color-background--link: transparent;
--sl-color--link: var(--sl-color--midnight-blue);
--sl-background--link: transparent;
background: var(--sl-color-background--link);
background: var(--sl-background--link);
border-bottom: var(--sl-border-width--link, var(--sl-border--small)) solid
var(--sl-border-color--link, rgba(brand.$sl-color--iron, 0.5));
color: var(--sl-color-text--link);
color: var(--sl-color--link);
.c1 & {
color: inherit;
@ -51,8 +51,8 @@ a {
&:hover,
&:focus {
background: var(
--sl-color-background--link-state,
var(--sl-color--link-action, var(--sl-color-background--link))
--sl-background--link-state,
var(--sl-color--link-action, var(--sl-background--link))
);
border-bottom-color: var(
--sl-border-color--link-state,
@ -62,13 +62,13 @@ a {
--sl-border-width--link-state,
var(--sl-border-width--link, var(--sl-border--small))
);
color: var(--sl-color-text--link-state, var(--sl-color-text--link));
color: var(--sl-color--link-state, var(--sl-color--link));
}
&:active {
background: var(
--sl-color-background--link-active,
var(--sl-color-background--link)
--sl-background--link-active,
var(--sl-background--link)
);
border-bottom-color: var(
--sl-border-color--link-active,
@ -78,12 +78,12 @@ a {
--sl-border-width--link-active,
var(--sl-border-width--link, var(--sl-border--small))
);
color: var(--sl-color-text--link-active, var(--sl-color-text--link));
color: var(--sl-color--link-active, var(--sl-color--link));
}
}
.sl-image-link {
--sl-color-background--link-state: transparent;
--sl-background--link-state: transparent;
--sl-border-color--link-state: transparent;
--sl-border-width--link: 0;
}