Skip to content
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

[Darkside] P 1/3 ♻️ Updated default scale to replace neutral-scale #3487

Merged
merged 15 commits into from
Jan 16, 2025
Merged

[Darkside] P 1/3 ♻️ Updated default scale to replace neutral-scale #3487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
0313d34
:sparkles: Added new space tokens
KenAJoh Dec 20, 2024
b47819e
:truck: Updated spacing-definitions
KenAJoh Dec 20, 2024
6ff4d35
:sparkles: Added new space-tokens to old system
KenAJoh Dec 20, 2024
ca65cc8
:sparkles: Added support for new space tokens i primitives
KenAJoh Dec 20, 2024
56ec1e4
:fire: Removed space-tokens from tailwindcss
KenAJoh Dec 20, 2024
0ba0b2f
:memo: Removed old comments
KenAJoh Dec 20, 2024
a570b78
[Darkside] Spacing -> Space update for CSS (#3478)
KenAJoh Dec 20, 2024
711c3e0
:bug: Added legacy-spacing support for primitives when using new them…
KenAJoh Jan 6, 2025
743f7c1
:recycle: Move neutral-scale -> default scale
KenAJoh Jan 6, 2025
f57c346
:recycle: New box now supports updated default tokens
KenAJoh Jan 6, 2025
77f46f1
:recycle: Default -> Soft token
KenAJoh Jan 8, 2025
02b5782
Merge branch 'main' into default-scale-update-darkside
KenAJoh Jan 13, 2025
17a22db
:memo: Update js-doc
KenAJoh Jan 16, 2025
bee66b0
[Darkside] P 2/3 ♻️ Global/Meta-token naming, bumped role-scale (#3499)
KenAJoh Jan 16, 2025
ea3b1e8
[Darkside] P 3/3 ♻️ Old neutral-scale now uses default-scale (#3488)
KenAJoh Jan 16, 2025
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
1 change: 0 additions & 1 deletion @navikt/core/css/darkside/accordion.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

&:hover {
background-color: var(--ax-bg-accent-hoverA);
color: var(--ax-text-accent-strong);

&::before,
&::after {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/action-menu.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
--__axc-action-menu-item-pr: var(--ax-space-2);

&[data-state="open"] {
background-color: var(--ax-bg-neutral-moderate-pressed);
background-color: var(--ax-bg-moderate-pressed);
}

&:focus {
Expand Down Expand Up @@ -138,7 +138,7 @@

/* --------------------------- ActionMenu shortcut -------------------------- */
.navds-action-menu__shortcut {
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
color: var(--ax-text-default);
border-radius: var(--ax-border-radius-small);
padding: 0 var(--ax-space-4);
Expand Down
26 changes: 12 additions & 14 deletions @navikt/core/css/darkside/button.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,19 +109,19 @@
* .navds-button--primary-neutral *
*************************/
.navds-button--primary-neutral {
background-color: var(--ax-bg-neutral-strong);
color: var(--ax-text-neutral-contrast);
background-color: var(--ax-bg-strong);
color: var(--ax-text-contrast);

&:hover {
background-color: var(--ax-bg-neutral-strong-hover);
background-color: var(--ax-bg-strong-hover);
}

&:active {
background-color: var(--ax-bg-neutral-strong-pressed);
background-color: var(--ax-bg-strong-pressed);
}

&:is(:disabled, .navds-button--disabled) {
background-color: var(--ax-bg-neutral-strong);
background-color: var(--ax-bg-strong);
}
}

Expand All @@ -138,7 +138,6 @@
--__axc-button-border-color: var(--ax-border-accent-strong);

background-color: var(--ax-bg-accent-moderate-hoverA);
color: var(--ax-text-accent-strong);
}

&:active {
Expand Down Expand Up @@ -168,18 +167,18 @@
&:hover {
--__axc-button-border-color: var(--ax-border-strong);

background-color: var(--ax-bg-neutral-moderate-hoverA);
background-color: var(--ax-bg-moderate-hoverA);
}

&:active {
--__axc-button-border-color: transparent;

color: var(--ax-text-neutral-contrast);
background-color: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-contrast);
background-color: var(--ax-bg-strong-pressed);
}

&:is(:disabled, .navds-button--disabled) {
--__axc-button-border-color: var(--ax-border-neutral);
--__axc-button-border-color: var(--ax-border-default);

color: var(--ax-text-default);
background-color: transparent;
Expand All @@ -195,7 +194,6 @@

&:hover {
background-color: var(--ax-bg-accent-moderate-hoverA);
color: var(--ax-text-accent-strong);
}

&:active {
Expand All @@ -217,12 +215,12 @@
color: var(--ax-text-default);

&:hover {
background-color: var(--ax-bg-neutral-moderate-hoverA);
background-color: var(--ax-bg-moderate-hoverA);
}

&:active {
background-color: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);
background-color: var(--ax-bg-strong-pressed);
color: var(--ax-text-contrast);
}

&:is(:disabled, .navds-button--disabled) {
Expand Down
2 changes: 1 addition & 1 deletion @navikt/core/css/darkside/chat.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
.navds-chat--neutral {
& .navds-chat__bubble,
& .navds-chat__avatar {
background-color: var(--ax-bg-neutral-raised);
background-color: var(--ax-bg-raised);
}
}

Expand Down
20 changes: 10 additions & 10 deletions @navikt/core/css/darkside/chips.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

.navds-chips--readonly {
.navds-chips__chip {
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
}
}

Expand Down Expand Up @@ -90,21 +90,21 @@
}

.navds-chips__toggle--neutral {
box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-neutral-moderate);
box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
background-color: var(--ax-bg-moderate);
color: var(--ax-text-default);

&:hover {
background-color: var(--ax-bg-neutral-moderate-hover);
background-color: var(--ax-bg-moderate-hover);
}

&[data-pressed="true"] {
box-shadow: none;
background-color: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);
background-color: var(--ax-bg-strong-pressed);
color: var(--ax-text-contrast);

&:hover {
background-color: var(--ax-bg-neutral-strong-hover);
background-color: var(--ax-bg-strong-hover);
}
}
}
Expand All @@ -130,11 +130,11 @@
}

.navds-chips__removable--neutral {
background: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);
background: var(--ax-bg-strong-pressed);
color: var(--ax-text-contrast);

&:hover {
background: var(--ax-bg-neutral-strong-hover);
background: var(--ax-bg-strong-hover);
}
}

Expand Down
2 changes: 1 addition & 1 deletion @navikt/core/css/darkside/copybutton.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}

&:hover {
background-color: var(--ax-bg-neutral-moderate-hoverA);
background-color: var(--ax-bg-moderate-hoverA);
}

&:focus-visible {
Expand Down
6 changes: 3 additions & 3 deletions @navikt/core/css/darkside/date.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.rdp-day_range_middle {
&.rdp-day_disabled {
color: var(--ax-text-default);
background: var(--ax-bg-neutral-moderateA);
background: var(--ax-bg-moderateA);
}

&.rdp-day_selected {
Expand Down Expand Up @@ -69,7 +69,7 @@
.rdp-day_disabled {
cursor: not-allowed;
text-decoration: line-through;
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
color: var(--ax-text-subtle);
}

Expand Down Expand Up @@ -242,7 +242,7 @@
color: var(--ax-text-subtle);

.navds-date__weeknumber:active & {
color: var(--ax-text-neutral-contrast);
color: var(--ax-text-contrast);
}
}

Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/expansioncard.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
justify-content: space-between;

&:hover {
background-color: var(--ax-bg-neutral-raised-hover);
background-color: var(--ax-bg-hover);
}

&[data-open="true"] {
Expand Down Expand Up @@ -122,7 +122,7 @@
}

.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
background-color: var(--ax-bg-neutral-moderate-hoverA);
background-color: var(--ax-bg-moderate-hoverA);
}

.navds-expansioncard__header-chevron {
Expand Down
10 changes: 5 additions & 5 deletions @navikt/core/css/darkside/form/combobox.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@

& .navds-combobox__selected-options {
& .navds-chips__chip {
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
}
}

& .navds-combobox__button-toggle-list {
color: var(--ax-bg-neutral-moderate);
color: var(--ax-bg-moderate);
}

& .navds-combobox__wrapper {
Expand All @@ -65,7 +65,7 @@

& .navds-text-field__input,
& .navds-combobox__input {
background-color: var(--ax-bg-neutral-moderate);
background-color: var(--ax-bg-moderate);
}
}

Expand Down Expand Up @@ -282,10 +282,10 @@
}

.navds-combobox__list-item--max-selected {
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
margin: 0;
border-radius: 0;
border-bottom: 1px solid var(--ax-border-neutral-subtle);
border-bottom: 1px solid var(--ax-border-subtle);
padding-block: var(--ax-space-8);
line-height: var(--ax-font-line-height-large);
}
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/form/file-upload.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
display: grid;
padding: var(--__axc-dropzone-icon-padding);
border-radius: var(--ax-border-radius-full);
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
transition:
background-color 300ms var(--__axc-dropzone-animation-ease-out),
font-size 300ms var(--__axc-dropzone-animation-ease-out);
Expand Down Expand Up @@ -169,7 +169,7 @@ li.navds-file-item {
}

.navds-file-item__icon {
background-color: var(--ax-bg-neutral-moderateA);
background-color: var(--ax-bg-moderateA);
color: var(--ax-text-default);
border-radius: var(--ax-border-radius-full);
min-height: 2.5rem;
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/form/form-summary.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.navds-form-summary {
overflow: hidden;
border: 1px solid var(--ax-border-neutral-subtleA);
border: 1px solid var(--ax-border-subtleA);
border-radius: var(--ax-border-radius-xlarge);
background: var(--ax-bg-raised);
}

.navds-form-summary__header {
background: var(--ax-bg-neutral-moderateA);
background: var(--ax-bg-moderateA);
padding: var(--ax-space-16) var(--ax-space-24);
display: flex;
justify-content: space-between;
Expand Down
6 changes: 3 additions & 3 deletions @navikt/core/css/darkside/form/radio-checkbox.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
display: flex;
gap: var(--ax-space-8);

--__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
--__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
--__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
}

Expand Down Expand Up @@ -215,11 +215,11 @@
}

.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
background-color: var(--ax-bg-neutral-strong);
background-color: var(--ax-bg-strong);
border-width: 0;
box-shadow:
inset 0 0 0 2px var(--ax-border-subtle),
inset 0 0 0 8px var(--ax-bg-neutral-moderate);
inset 0 0 0 8px var(--ax-bg-moderate);
}

.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/form/select.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@
/* ----------------------------- Select Readonly ---------------------------- */
.navds-select--readonly {
& .navds-select__input {
background-color: var(--ax-bg-neutral-moderate);
border-color: var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-moderate);
border-color: var(--ax-border-subtleA);
cursor: default;

@media (forced-colors: active) {
Expand Down
12 changes: 6 additions & 6 deletions @navikt/core/css/darkside/form/switch.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@

/* ------------------------------ Switch Thumb ------------------------------ */
.navds-switch__thumb {
background-color: var(--ax-bg-neutral-strong);
background-color: var(--ax-bg-strong);
border-radius: var(--ax-border-radius-full);
width: 1.125rem;
height: 1.125rem;
Expand Down Expand Up @@ -183,8 +183,8 @@
& > .navds-switch__input:hover ~ .navds-switch__track,
& > .navds-switch__input:checked ~ .navds-switch__track,
& > .navds-switch__input:checked:hover ~ .navds-switch__track {
background-color: var(--ax-bg-neutral-moderate);
border-color: var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-moderate);
border-color: var(--ax-border-subtleA);
}

& > .navds-switch__label-wrapper,
Expand All @@ -202,12 +202,12 @@
}

& .navds-switch__thumb {
background-color: var(--ax-bg-neutral-strong);
background-color: var(--ax-bg-strong);
}

& > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
background-color: var(--ax-bg-neutral-strong);
color: var(--ax-text-neutral-contrast);
background-color: var(--ax-bg-strong);
color: var(--ax-text-contrast);
}

@media (hover: hover) and (pointer: fine) {
Expand Down
6 changes: 3 additions & 3 deletions @navikt/core/css/darkside/form/text-field.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}

&::placeholder {
color: var(--ax-text-neutral);
color: var(--ax-text-subtle);
}

&[size] {
Expand All @@ -44,8 +44,8 @@
}

.navds-text-field--readonly .navds-text-field__input {
background-color: var(--ax-bg-neutral-moderate);
border-color: var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-moderate);
border-color: var(--ax-border-subtleA);
cursor: default;
}

Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/css/darkside/form/textarea.darkside.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
}

.navds-textarea--readonly & {
background-color: var(--ax-bg-neutral-moderate);
border-color: var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-moderate);
border-color: var(--ax-border-subtleA);
cursor: default;
}
}
Expand Down
Loading
Loading