Skip to content

Commit

Permalink
Chips CSS-reset (#3316)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KenAJoh
KenAJoh authored Nov 5, 2024
1 parent 1eace15 commit 4a2e47f
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 166 deletions.
238 changes: 90 additions & 148 deletions @navikt/core/css/darkside/chips.darkside.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.navds-chips {
display: flex;
gap: var(--a-spacing-2);
gap: var(--ax-spacing-2);
margin: 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}

.navds-chips :where(li) {
.navds-chips li {
margin: 0;
padding: 0;
list-style: none;
Expand All @@ -20,113 +20,116 @@
cursor: pointer;
align-items: center;
justify-content: center;
gap: var(--a-spacing-05);
gap: var(--ax-spacing-05);
margin: 0;
padding: 0 var(--a-spacing-3);
padding: 0 var(--ax-spacing-3);
text-decoration: none;
border-radius: var(--a-border-radius-full);
border-radius: var(--ax-border-radius-full);
min-height: 2rem;
}

.navds-chips--small .navds-chips__chip {
min-height: 1.5rem;
padding: 0 var(--a-spacing-2);
&:focus-visible {
outline: 2px solid var(--ax-border-focus);
outline-offset: 2px;
}
}

.navds-chips__toggle {
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
color: var(--ac-chip-toggle-text, var(--a-text-default));
}
.navds-chips--small {
.navds-chips__chip {
min-height: 1.5rem;
padding: 0 var(--ax-spacing-2);
}

.navds-chips__toggle:hover {
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
}
.navds-chips__toggle-icon {
width: 1rem;
height: 1rem;
}

.navds-chips__toggle[aria-pressed="true"] {
box-shadow: none;
background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
}
.navds-chips__toggle--with-checkmark {
padding-left: var(--ax-spacing-1);
}

.navds-chips__toggle[aria-pressed="true"]:hover {
background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
}
.navds-chips__removable-icon {
width: 1.25rem;
height: 1.25rem;
}

/* Toggle variant neutral */
.navds-chips__toggle--neutral {
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
}
.navds-chips__removable-icon > svg {
width: 1rem;
}

.navds-chips__toggle--neutral:hover {
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
.navds-chips--icon-right {
padding-right: var(--ax-spacing-05);
}
}

.navds-chips__toggle--neutral[aria-pressed="true"] {
box-shadow: none;
background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
}
/* ------------------------------ Chips Toggle ------------------------------ */
.navds-chips__toggle--action {
box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
background-color: var(--ax-bg-accent-moderate);
color: var(--ax-text-default);

.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
}
&:hover {
background-color: var(--ax-bg-accent-moderate-hover);
}

.navds-chips__toggle:focus-visible {
box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
}
&[data-pressed="true"] {
box-shadow: none;
background-color: var(--ax-bg-accent-strong-pressed);
color: var(--ax-text-accent-contrast);

.navds-chips__toggle[aria-pressed="true"]:focus-visible,
.navds-chips__toggle:active:focus-visible {
box-shadow:
inset 0 0 0 1px var(--a-surface-default),
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
&:hover {
background-color: var(--ax-bg-accent-strong-hover);
}
}
}

@supports not selector(:focus-visible) {
.navds-chips__toggle:focus {
outline: none;
box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
.navds-chips__toggle--neutral {
box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
background-color: var(--ax-bg-neutral-moderate);
color: var(--ax-text-default);

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

.navds-chips__toggle[aria-pressed="true"]:focus,
.navds-chips__toggle:active:focus {
box-shadow:
inset 0 0 0 1px var(--a-surface-default),
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
&[data-pressed="true"] {
box-shadow: none;
background-color: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);

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

.navds-chips--medium .navds-chips__toggle--with-checkmark {
padding-left: var(--a-spacing-1-alt);
}

.navds-chips--small .navds-chips__toggle--with-checkmark {
padding-left: var(--a-spacing-1);
padding-left: var(--ax-spacing-1-alt);
}

.navds-chips--small .navds-chips__toggle-icon {
width: 1rem;
height: 1rem;
}
/* -------------------------- start old CSS -------------------------- */

/* ----------------------------- Chips removable ---------------------------- */
.navds-chips__removable {
gap: 0;
}

.navds-chips__removable--action {
background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
background: var(--ax-bg-accent-strong-pressed);
color: var(--ax-text-accent-contrast);

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

.navds-chips__removable--neutral {
background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
background: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);

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

.navds-chips__removable-icon {
Expand All @@ -135,100 +138,39 @@
font-size: 1.25rem;
display: grid;
place-items: center;
border-radius: var(--a-border-radius-full);
}

.navds-chips--small .navds-chips__removable-icon {
width: 1.25rem;
height: 1.25rem;
}

.navds-chips--small .navds-chips__removable-icon > svg {
width: 1rem;
}

.navds-chips__removable--action:focus-visible {
box-shadow:
inset 0 0 0 1px var(--a-surface-default),
0 0 0 2px var(--a-border-focus);
}

.navds-chips__removable--neutral:focus-visible {
box-shadow: 0 0 0 2px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
.navds-chips__removable--action:focus {
outline: none;
box-shadow:
inset 0 0 0 1px var(--a-surface-default),
0 0 0 2px var(--a-border-focus);
}

.navds-chips__removable--neutral:focus {
outline: none;
box-shadow: 0 0 0 2px var(--a-border-focus);
}
}

.navds-chips__removable--action:hover {
background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
}

.navds-chips__removable--neutral:hover {
background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
border-radius: var(--ax-border-radius-full);
}

.navds-chips--icon-left {
padding-left: var(--a-spacing-1-alt);
padding-left: var(--ax-spacing-1-alt);
}

.navds-chips--icon-right {
padding-right: var(--a-spacing-1-alt);
}

.navds-chips--small .navds-chips--icon-right {
padding-right: var(--a-spacing-05);
padding-right: var(--ax-spacing-1-alt);
}

@media (forced-colors: active) {
.navds-chips__chip {
border: 1px solid transparent;
}

.navds-chips__chip:hover {
background-color: highlighttext;
color: highlight;
}

.navds-chips__chip:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
&:hover {
background-color: highlighttext;
color: highlight;
}
}

.navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
.navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
forced-color-adjust: none;
}

.navds-chips__toggle:active {
background-color: highlight;
color: highlighttext;
}

.navds-chips__toggle[aria-pressed="true"] {
.navds-chips__toggle[data-pressed="true"] {
background-color: selecteditem;
color: selecteditemtext;
border: 1px solid selecteditem;
}

.navds-chips__toggle[aria-pressed="true"]:hover {
background-color: selecteditemtext;
color: selecteditem;
}

.navds-chips__toggle[aria-pressed="true"]:active {
background-color: highlight;
color: highlighttext;
&:hover {
background-color: selecteditemtext;
color: selecteditem;
}
}
}
3 changes: 2 additions & 1 deletion @navikt/core/react/src/chips/Toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const ToggleChips: OverridableComponent<
{ "navds-chips__toggle--with-checkmark": checkmark },
)}
aria-pressed={selected}
data-pressed={selected}
>
{checkmark && (
<svg
Expand All @@ -73,7 +74,7 @@ export const ToggleChips: OverridableComponent<
fillRule="evenodd"
clipRule="evenodd"
d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
fill="var(--ac-chip-toggle-circle-border, var(--a-border-default))"
fill="var(--ax-text-neutral-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
/>
)}
</svg>
Expand Down
Loading

0 comments on commit 4a2e47f

Please sign in to comment.