Skip to content

feat(!): move to hex colors #544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat(!): move to hex colors #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6fd3759
feat: color mix intro
fynnfeldpausch Jun 19, 2024
b646400
Merge branch 'main' into spike/color-mix
fynnfeldpausch Aug 14, 2024
4ab45f1
chore: interim state
fynnfeldpausch Aug 14, 2024
26ef759
chore: cleanup
fynnfeldpausch Aug 15, 2024
ccd3eaa
chore: cleanup
fynnfeldpausch Aug 15, 2024
34e4501
chore: cleanup
fynnfeldpausch Aug 15, 2024
2736613
chore: cleanup
fynnfeldpausch Aug 15, 2024
6a2c908
chore: cleanup
fynnfeldpausch Aug 15, 2024
d61b556
chore: cleanup
fynnfeldpausch Aug 16, 2024
e10f551
chore: lint
fynnfeldpausch Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions core/src/components/cat-alert/cat-alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
background-color: cat-token('color.theme.#{$theme}.bg');
color: cat-token('color.theme.#{$theme}.fill');
// adjust nested links
--cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
--cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};
--cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};
--cat-primary-text: #{cat-token('color.theme.#{$theme}.fill')};
--cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover')};
--cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive')};
--cat-link-decoration: underline;
}
}
Expand Down
16 changes: 8 additions & 8 deletions core/src/components/cat-badge/cat-badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,26 @@ $-paddings: (

// ----- theme

$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);
$-outline: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);

:host([variant='filled']) {
background-color: cat-token-wrap(var(--bg));
color: cat-token-wrap(var(--fill));
background-color: var(--bg);
color: var(--fill);
font-weight: 600;
@include cat-font-smooth;
}

:host([variant='outlined']) {
background-color: cat-token('color.ui.background.surface');
color: cat-token-wrap(var(--text));
color: var(--text);
box-shadow: $-outline;
}

@mixin theme($theme) {
:host([color='#{$theme}']) {
--bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
--fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
--text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
--bg: #{cat-token('color.theme.#{$theme}.bg')};
--fill: #{cat-token('color.theme.#{$theme}.fill')};
--text: #{cat-token('color.theme.#{$theme}.text')};
}
}

Expand Down Expand Up @@ -98,7 +98,7 @@ $-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);

// ----- pulse

$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));
$-pulse-0: 0 0 0 0 var(--bg);
$-pulse-70: transparent 0 0 0 0.5rem;
$-pulse-100: transparent 0 0 0 0;

Expand Down
52 changes: 26 additions & 26 deletions core/src/components/cat-button/cat-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,47 +116,47 @@ $button-sizes: (
// ----- theme

.cat-button-filled {
background-color: cat-token-wrap(var(--bg));
color: cat-token-wrap(var(--fill));
background-color: var(--bg);
color: var(--fill);
font-weight: var(--cat-font-weight-button, 600);
@include cat-font-smooth;

&.cat-button-disabled {
--bg: #{cat-token('color.ui.background.muted', $wrap: false)};
--fill: #{cat-token('color.ui.font.muted', $wrap: false)};
--bg: #{cat-token('color.ui.background.muted')};
--fill: #{cat-token('color.ui.font.muted')};
}
}

.cat-button-outlined {
background-color: cat-token('color.ui.background.surface');
box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);
color: cat-token-wrap(var(--text));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base) 20%, transparent);
color: var(--text);

&.cat-button-disabled {
--base: #{cat-token('color.ui.font.muted', $wrap: false)};
--text: #{cat-token('color.ui.font.muted', $wrap: false)};
--base: #{cat-token('color.ui.font.muted')};
--text: #{cat-token('color.ui.font.muted')};
}

&:hover:not(.cat-button-disabled):not(.cat-button-loading) {
background-color: cat-token-wrap(var(--base), $alpha: 0.1);
background-color: color-mix(in srgb, var(--base) 10%, transparent);
}

&.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
background-color: cat-token-wrap(var(--base), $alpha: 0.1);
background-color: color-mix(in srgb, var(--base) 10%, transparent);
}

&:active:not(.cat-button-disabled):not(.cat-button-loading) {
background-color: cat-token-wrap(var(--base), $alpha: 0.1);
background-color: color-mix(in srgb, var(--base) 10%, transparent);
}
}

.cat-button-text {
background-color: transparent;
color: cat-token-wrap(var(--text));
color: var(--text);
text-decoration: cat-token('font.decoration.linkButton');

&.cat-button-disabled {
--text: #{cat-token('color.ui.font.muted', $wrap: false)};
--text: #{cat-token('color.ui.font.muted')};
}

&:hover:not(.cat-button-disabled):not(.cat-button-loading) {
Expand All @@ -170,10 +170,10 @@ $button-sizes: (

.cat-button-link {
background-color: transparent;
color: cat-token-wrap(var(--text));
color: var(--text);

&.cat-button-disabled {
--text: #{cat-token('color.ui.font.muted', $wrap: false)};
--text: #{cat-token('color.ui.font.muted')};
}

&:hover:not(.cat-button-disabled):not(.cat-button-loading) {
Expand All @@ -187,26 +187,26 @@ $button-sizes: (

@mixin theme($theme) {
.cat-button-#{$theme} {
--bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
--fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
--text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
--bg: #{cat-token('color.theme.#{$theme}.bg')};
--fill: #{cat-token('color.theme.#{$theme}.fill')};
--text: #{cat-token('color.theme.#{$theme}.text')};
@if $theme == 'secondary' {
--base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
--base: #{cat-token('color.theme.#{$theme}.bg')};
} @else {
--base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
--base: #{cat-token('color.theme.#{$theme}.text')};
}

&:hover:not(.cat-button-disabled):not(.cat-button-loading) {
--bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};
--fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};
--text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};
--bg: #{cat-token('color.theme.#{$theme}.bgHover')};
--fill: #{cat-token('color.theme.#{$theme}.fillHover')};
--text: #{cat-token('color.theme.#{$theme}.textHover')};
}

&.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),
&:active:not(.cat-button-disabled):not(.cat-button-loading) {
--bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};
--fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};
--text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};
--bg: #{cat-token('color.theme.#{$theme}.bgActive')};
--fill: #{cat-token('color.theme.#{$theme}.fillActive')};
--text: #{cat-token('color.theme.#{$theme}.textActive')};
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions core/src/components/cat-input/cat-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@
overflow: hidden;
background: cat-token('color.ui.background.input');
border-radius: cat-border-radius('m');
box-shadow: inset 0 0 0 1px rgb(var(--border-color));
box-shadow: inset 0 0 0 1px var(--border-color);
transition: box-shadow cat-token('time.transition.s') linear;
--border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
--border-color: #{cat-token('color.ui.border.dark')};

&.input-round {
border-radius: 10rem;
Expand All @@ -56,8 +56,8 @@

&:not(.input-disabled):hover {
box-shadow:
inset 0 0 0 1px rgb(var(--border-color)),
0 0 0 1px rgb(var(--border-color));
inset 0 0 0 1px var(--border-color),
0 0 0 1px var(--border-color);
}

&:focus-within {
Expand All @@ -70,7 +70,7 @@
}

&.input-invalid {
--border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
--border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
}

/* stylelint-disable property-no-vendor-prefix */
Expand Down
12 changes: 6 additions & 6 deletions core/src/components/cat-select/cat-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ label {
align-items: flex-start;
background: cat-token('color.ui.background.input');
border-radius: cat-border-radius('m');
box-shadow: inset 0 0 0 1px rgb(var(--border-color));
box-shadow: inset 0 0 0 1px var(--border-color);
transition: box-shadow cat-token('time.transition.s') linear;
padding: 0.25rem;
--border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
--border-color: #{cat-token('color.ui.border.dark')};

&:not(.select-disabled):hover {
box-shadow:
inset 0 0 0 1px rgb(var(--border-color)),
0 0 0 1px rgb(var(--border-color));
inset 0 0 0 1px var(--border-color),
0 0 0 1px var(--border-color);
}

&:focus-within {
Expand All @@ -59,7 +59,7 @@ label {
}

&.select-invalid {
--border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
--border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
}

/* stylelint-disable property-no-vendor-prefix */
Expand Down Expand Up @@ -249,7 +249,7 @@ cat-spinner {
}

.select-option:hover {
background-color: cat-token('color.theme.secondary.bg', 0.05);
background-color: color-mix(in srgb, #{cat-token('color.theme.secondary.bg')} 5%, transparent);
}

.select-option-active {
Expand Down
14 changes: 7 additions & 7 deletions core/src/components/cat-textarea/cat-textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@
position: absolute;
top: calc(0.625rem - 2px);
right: 0.75rem;
background: cat-token('color.ui.background.input', 0.75);
background: color-mix(in srgb, #{cat-token('color.ui.background.input')} 75%, transparent);
border-radius: 100rem;

.textarea-disabled & {
background: cat-token('color.ui.background.muted', 0.75);
background: color-mix(in srgb, #{cat-token('color.ui.background.muted')} 75%, transparent);
}
}

Expand All @@ -59,10 +59,10 @@ textarea {
background: cat-token('color.ui.background.input');
border-radius: cat-border-radius('m');
border: none;
box-shadow: inset 0 0 0 1px rgb(var(--border-color));
box-shadow: inset 0 0 0 1px var(--border-color);
transition: box-shadow cat-token('time.transition.s') linear;
resize: vertical;
--border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
--border-color: #{cat-token('color.ui.border.dark')};

&:disabled {
background: cat-token('color.ui.background.muted');
Expand All @@ -73,8 +73,8 @@ textarea {

&:not(:disabled):hover {
box-shadow:
inset 0 0 0 1px rgb(var(--border-color)),
0 0 0 1px rgb(var(--border-color));
inset 0 0 0 1px var(--border-color),
0 0 0 1px var(--border-color);
}

&:focus {
Expand All @@ -83,7 +83,7 @@ textarea {
}

.textarea-invalid & {
--border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
--border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
}

&::placeholder {
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/cat-toggle/cat-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ input {

:host(.cat-error) {
.toggle {
background-color: cat-token('color.theme.danger.bg', 0.2);
background-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
}

:checked + .toggle {
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/cat-tooltip/cat-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ $-shift-padding: 0.25rem; // padding given to the shift() middleware
}

.tooltip {
--cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};
--cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};
--cat-font-color-head: #{cat-token('color.ui.font.tooltip')};
--cat-font-color-body: #{cat-token('color.ui.font.tooltip')};
position: fixed;
width: max-content;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion core/src/styles/_snippets/_form-label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $cat-input-height: 2.5rem;
flex-grow: 1;
justify-content: space-between;
gap: 0.25rem;
color: cat-token('color.ui.font.muted');
color: $cat-color-ui-font-muted;
}

.label-optional,
Expand Down
37 changes: 32 additions & 5 deletions core/src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
@use 'variables.tokens' as *;
@forward 'variables.tokens';
@use 'sass:map';
@use 'sass:string';
@use 'sass:list';
@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *;
@forward '~@haiilo/catalyst-tokens/dist/scss/variables';

@function -map-get($map, $keys...) {
@each $key in $keys {
$map: map.get($map, $key);
}
@return $map;
}

@function -split($string, $separator: ' ') {
$result: ();
$index: string.index($string, $separator);
@while $index != null {
$item: string.slice($string, 1, $index - 1);
$result: list.append($result, $item);
$string: string.slice($string, $index + string.length($separator));
$index: string.index($string, $separator);
}
$result: list.append($result, $string);
@return $result;
}

@function cat-token($key) {
@return -map-get($tokens, -split($key, '.')...);
}

// --------
// -- Variables
Expand All @@ -10,8 +37,8 @@
// --------

$cat-font-family-head: var(--cat-font-family-head);
$cat-font-color-head: rgb(var(--cat-font-color-head));
$cat-font-color-mono: rgb(var(--cat-font-color-mono));
$cat-font-color-head: var(--cat-font-color-head);
$cat-font-color-mono: var(--cat-font-color-mono);

// --------
// -- Spacings
Expand All @@ -25,7 +52,7 @@ $cat-nav-padding-horizontal: 0.75rem;
// -- Typography
// --------

$cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
$cat-mark-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 20%, transparent);
/* stylelint-disable value-keyword-case */
$font-fallback-base:
system-ui,
Expand Down
Loading