mirror of
https://github.com/navikt/aksel.git
synced 2026-10-17 11:12:03 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]
|
36d98e1d19 | ||
|
|
705b2cbe9c | ||
|
dependabot[bot]
|
2fc2572d93 | ||
|
Ken
|
5fd0b3cffd | ||
|
Ken
|
ead802c0d8 | ||
|
Ken
|
eb9ca68e5c | ||
|
Ken
|
89a604bd57 | ||
|
Ken
|
9465cdf30a | ||
|
Ken
|
cb482b4cdc |
No files matched your search
@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
# Migreringsguider
|
||||
|
||||
## Migrering til ds-css v0.12, ds-tokens v0.7
|
||||
|
||||
### Tokens er refaktort og oppdatert
|
||||
|
||||
- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
|
||||
- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
|
||||
- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
|
||||
|
||||
## Migrering til ds-react v0.11, ds-css v0.10
|
||||
|
||||
### ErrorSummary
|
||||
|
||||
@@ -6,11 +6,11 @@ import {
|
||||
import styled from "styled-components";
|
||||
|
||||
const Success = styled(SuccessIcon)`
|
||||
color: var(--navds-color-green-50);
|
||||
color: var(--navds-semantic-color-feedback-success-icon);
|
||||
`;
|
||||
|
||||
const Error = styled(ErrorIcon)`
|
||||
color: var(--navds-color-red-50);
|
||||
color: var(--navds-semantic-color-feedback-danger-icon);
|
||||
`;
|
||||
|
||||
const Table = styled(DsTable)`
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
:root {
|
||||
--navds-accordion-menu-color-text: var(--navds-color-text-link);
|
||||
--navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
|
||||
--navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-accordion-menu-color-text-active: var(--navds-color-text);
|
||||
--navds-accordion-menu-outline-focus: var(--navds-text-focus);
|
||||
--navds-accordion-menu-color-text: var(--navds-semantic-color-link);
|
||||
--navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
|
||||
--navds-accordion-menu-color-background-hover: var(
|
||||
--navds-global-color-blue-50
|
||||
);
|
||||
--navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
|
||||
--navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu__list {
|
||||
@@ -97,7 +99,7 @@
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item--active {
|
||||
box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
|
||||
box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
|
||||
color: var(--navds-accordion-menu-color-text-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1,9 +1,15 @@
|
||||
:root {
|
||||
--navds-accordion-color-text: var(--navds-color-darkgray);
|
||||
--navds-accordion-color-background: var(--navds-color-background);
|
||||
--navds-accordion-color-text-hover: var(--navds-color-blue-50);
|
||||
--navds-accordion-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-accordion-color-border-focus: var(--navds-color-background);
|
||||
--navds-accordion-color-text: var(--navds-semantic-color-text);
|
||||
--navds-accordion-color-background: var(
|
||||
---navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-accordion-color-text-hover: var(--navds-semantic-color-link);
|
||||
--navds-accordion-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-accordion-color-border-focus: var(
|
||||
---navds-semantic-color-component-background-light
|
||||
);
|
||||
}
|
||||
|
||||
.navds-accordion .ReactCollapse--collapse {
|
||||
|
||||
+47
-17
@@ -1,21 +1,51 @@
|
||||
:root {
|
||||
--navds-alert-color-border: var(--navds-color-gray-40);
|
||||
--navds-alert-color-error-border: var(--navds-color-error-border);
|
||||
--navds-alert-color-error-background: var(--navds-color-error-background);
|
||||
--navds-alert-color-warning-border: var(--navds-color-warning-border);
|
||||
--navds-alert-color-warning-background: var(--navds-color-warning-background);
|
||||
--navds-alert-color-info-border: var(--navds-color-info-border);
|
||||
--navds-alert-color-info-background: var(--navds-color-info-background);
|
||||
--navds-alert-color-success-border: var(--navds-color-success-border);
|
||||
--navds-alert-color-success-background: var(--navds-color-success-background);
|
||||
--navds-alert-color-error-icon: var(--navds-color-red-60);
|
||||
--navds-alert-color-error-icon-background: var(--navds-color-white);
|
||||
--navds-alert-color-warning-icon: var(--navds-color-orange-40);
|
||||
--navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
|
||||
--navds-alert-color-info-icon: var(--navds-color-lightblue-70);
|
||||
--navds-alert-color-info-icon-background: var(--navds-color-white);
|
||||
--navds-alert-color-success-icon: var(--navds-color-green-70);
|
||||
--navds-alert-color-success-icon-background: var(--navds-color-white);
|
||||
--navds-alert-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-alert-color-error-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
--navds-alert-color-error-background: var(
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-alert-color-warning-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
--navds-alert-color-warning-background: var(
|
||||
--navds-semantic-color-feedback-warning-background
|
||||
);
|
||||
--navds-alert-color-info-border: var(
|
||||
--navds-semantic-color-feedback-info-border
|
||||
);
|
||||
--navds-alert-color-info-background: var(
|
||||
--navds-semantic-color-feedback-info-background
|
||||
);
|
||||
--navds-alert-color-success-border: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-alert-color-success-background: var(
|
||||
--navds-semantic-color-feedback-success-background
|
||||
);
|
||||
--navds-alert-color-error-icon: var(
|
||||
--navds-semantic-color-feedback-danger-icon
|
||||
);
|
||||
--navds-alert-color-error-icon-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-alert-color-warning-icon: var(
|
||||
--navds-semantic-color-feedback-warning-icon
|
||||
);
|
||||
--navds-alert-color-warning-icon-background: var(
|
||||
--navds-semantic-color-component-background-inverted
|
||||
);
|
||||
--navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
|
||||
--navds-alert-color-info-icon-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-alert-color-success-icon: var(
|
||||
--navds-semantic-color-feedback-success-icon
|
||||
);
|
||||
--navds-alert-color-success-icon-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert {
|
||||
|
||||
@@ -23,12 +23,12 @@ html {
|
||||
body {
|
||||
font-family: var(--navds-font-family);
|
||||
line-height: 1.333;
|
||||
color: var(--navds-color-text-primary);
|
||||
color: var(--navds-semantic-color-text);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--navds-color-text-link);
|
||||
color: var(--navds-semantic-color-link);
|
||||
}
|
||||
|
||||
/* https://web.dev/prefers-reduced-motion/ */
|
||||
|
||||
+83
-32
@@ -1,53 +1,79 @@
|
||||
:root {
|
||||
/* Primary */
|
||||
--navds-button-color-primary-text: var(--navds-color-white);
|
||||
--navds-button-color-primary-border-focus: var(--navds-color-white);
|
||||
--navds-button-color-primary-background: var(--navds-color-action-default);
|
||||
--navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-button-color-primary-border-focus: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-primary-background: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-primary-background-hover: var(
|
||||
--navds-color-action-hover
|
||||
--navds-semantic-color-interaction-primary-hover
|
||||
);
|
||||
--navds-button-color-primary-background-active: var(
|
||||
--navds-color-action-active
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Secondary */
|
||||
--navds-button-color-secondary-text: var(--navds-color-action-default);
|
||||
--navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
|
||||
--navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
|
||||
--navds-button-color-secondary-border: var(--navds-color-action-default);
|
||||
--navds-button-color-secondary-text: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-secondary-text-hover: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-secondary-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-secondary-border: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-secondary-border-focus-active-hover: var(
|
||||
--navds-color-white
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-secondary-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-secondary-background: var(--navds-color-background);
|
||||
--navds-button-color-secondary-background-hover: var(
|
||||
--navds-color-action-hover
|
||||
--navds-semantic-color-interaction-primary-hover
|
||||
);
|
||||
--navds-button-color-secondary-background-active: var(
|
||||
--navds-color-action-active
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Tertiary */
|
||||
--navds-button-color-tertiary-text: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
|
||||
--navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-border-active: var(--navds-color-white);
|
||||
--navds-button-color-tertiary-text: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-tertiary-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-tertiary-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-tertiary-border-focus: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-tertiary-border-active: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-tertiary-background-active: var(
|
||||
--navds-color-action-active
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Danger */
|
||||
--navds-button-color-danger-text: var(--navds-color-white);
|
||||
--navds-button-color-danger-background: var(--navds-color-danger-default);
|
||||
--navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
|
||||
--navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-button-color-danger-background: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-button-color-danger-background-hover: var(
|
||||
--navds-semantic-color-interaction-danger-hover
|
||||
);
|
||||
--navds-button-color-danger-background-active: var(
|
||||
--navds-color-danger-active
|
||||
--navds-semantic-color-interaction-danger-selected
|
||||
);
|
||||
--navds-button-color-danger-border-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-danger-border-focus: var(--navds-color-white);
|
||||
|
||||
/* Disabled */
|
||||
--navds-button-color-text-disabled: var(--navds-color-text-inverse);
|
||||
--navds-button-color-background-disabled: var(--navds-color-disabled);
|
||||
}
|
||||
|
||||
.navds-button {
|
||||
@@ -111,8 +137,12 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--primary:hover:disabled {
|
||||
background-color: var(--navds-button-color-primary-background);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button--secondary *
|
||||
* .navds-button--secondary *
|
||||
**************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
@@ -145,6 +175,13 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--secondary:disabled,
|
||||
.navds-button--secondary:hover:disabled {
|
||||
color: var(--navds-button-color-secondary-text);
|
||||
background-color: var(--navds-button-color-secondary-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
|
||||
}
|
||||
|
||||
/****************************
|
||||
* .navds-button--tertiary *
|
||||
****************************/
|
||||
@@ -168,11 +205,23 @@
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:hover {
|
||||
background-color: var(--navds-button-color-tertiary-background-active);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:disabled,
|
||||
.navds-button--tertiary:active:disabled,
|
||||
.navds-button--tertiary:active:hover:disabled {
|
||||
color: var(--navds-button-color-tertiary-text);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--danger *
|
||||
*************************/
|
||||
@@ -195,14 +244,16 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover:disabled {
|
||||
background-color: var(--navds-button-color-danger-background);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button:disabled *
|
||||
**************************/
|
||||
|
||||
.navds-button:disabled {
|
||||
color: var(--navds-button-color-text-disabled);
|
||||
background-color: var(--navds-button-color-background-disabled);
|
||||
opacity: 30%;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
+20
-10
@@ -1,15 +1,25 @@
|
||||
:root {
|
||||
--navds-card-micro-color-text: var(--navds-color-text-primary);
|
||||
--navds-card-micro-color-background: var(--navds-color-orange-20);
|
||||
--navds-card-micro-color-text: var(--navds-semantic-color-text);
|
||||
--navds-card-micro-color-background: var(--navds-global-color-orange-200);
|
||||
--navds-card-micro-color-border: transparent;
|
||||
--navds-card-micro-color-text-hover: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-background-hover: var(--navds-color-white);
|
||||
--navds-card-micro-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-text-focus: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-background-focus: var(--navds-color-white);
|
||||
--navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
|
||||
--navds-card-micro-color-background-active: var(--navds-color-blue-70);
|
||||
--navds-card-micro-color-text-active: var(--navds-color-white);
|
||||
--navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
|
||||
--navds-card-micro-color-background-hover: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-card-micro-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
|
||||
--navds-card-micro-color-background-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
|
||||
--navds-card-micro-color-background-active: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-card-micro-color-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.navds-content-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--navds-content-container-max-width);
|
||||
padding: var(--navds-content-container-padding-small);
|
||||
max-width: 79.5rem;
|
||||
padding: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-content-container {
|
||||
padding: var(--navds-content-container-padding-medium-and-larger);
|
||||
padding: var(--navds-spacing-6);
|
||||
}
|
||||
}
|
||||
@@ -1,30 +1,30 @@
|
||||
:root {
|
||||
--navds-confirmation-panel-color-background: var(
|
||||
--navds-color-warning-background
|
||||
--navds-semantic-color-feedback-warning-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-checked: var(
|
||||
--navds-color-success-background
|
||||
--navds-semantic-color-feedback-success-background
|
||||
);
|
||||
--navds-confirmation-panel-color-border-checked: var(
|
||||
--navds-color-success-background
|
||||
--navds-semantic-color-feedback-success-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-error: var(
|
||||
--navds-color-error-background
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover: var(
|
||||
--navds-color-green-70
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover: var(
|
||||
--navds-color-green-70
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked: var(
|
||||
--navds-color-green-50
|
||||
--navds-global-color-green-500
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked: var(
|
||||
--navds-color-green-50
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-label-checked: var(
|
||||
--navds-color-darkgray
|
||||
--navds-semantic-color-text
|
||||
);
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
--navds-confirmation-panel-color-checkbox-background-checked
|
||||
);
|
||||
border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
@@ -94,5 +94,5 @@
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:focus:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
:root {
|
||||
--navds-error-message-color-text: var(--navds-color-text-error);
|
||||
--navds-error-message-color-text: var(
|
||||
--navds-semantic-color-feedback-danger-text
|
||||
);
|
||||
}
|
||||
|
||||
.navds-error-message {
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
:root {
|
||||
--navds-error-summary-color-background: var(--navds-color-white);
|
||||
--navds-error-summary-color-border: var(--navds-color-error-border);
|
||||
--navds-error-summary-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-error-summary-color-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-error-summary {
|
||||
|
||||
@@ -1,12 +1,26 @@
|
||||
:root {
|
||||
--navds-radio-checkbox-color-background: var(--navds-color-white);
|
||||
--navds-radio-checkbox-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-radio-checkbox-color-background-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow: var(--navds-color-gray-60);
|
||||
--navds-radio-checkbox-color-shadow-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-radio-checkbox-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-background: var(
|
||||
--navds-semantic-color-canvas-background-light
|
||||
);
|
||||
--navds-radio-checkbox-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-radio-checkbox-color-background-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
|
||||
--navds-radio-checkbox-color-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-radio-checkbox-color-label-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
}
|
||||
|
||||
.navds-checkbox,
|
||||
@@ -94,7 +108,7 @@
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
:root {
|
||||
--navds-search-field-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-search-field-color-border-error: var(--navds-color-red-50);
|
||||
--navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
|
||||
--navds-search-field-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-search-field-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-search-field-color-clearbutton-border: var(
|
||||
--navds-semantic-color-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper {
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
:root {
|
||||
--navds-select-color-background: var(--navds-color-white);
|
||||
--navds-select-color-border: var(--navds-color-gray-60);
|
||||
--navds-select-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-select-color-border-error: var(--navds-color-red-50);
|
||||
--navds-select-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-select-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-select-color-border: var(--navds-semantic-color-border);
|
||||
--navds-select-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-select-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-select-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-select-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-select-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-select-color-text-disabled: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-select__input {
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
:root {
|
||||
--navds-text-field-color-background: var(--navds-color-white);
|
||||
--navds-text-field-color-border: var(--navds-color-gray-60);
|
||||
--navds-text-field-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-text-field-color-border-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-text-field-color-border: var(--navds-semantic-color-border);
|
||||
--navds-text-field-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-text-field-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-text-field-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-text-field-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-text-field__input {
|
||||
|
||||
@@ -1,11 +1,26 @@
|
||||
:root {
|
||||
--navds-textarea-color-background: var(--navds-color-white);
|
||||
--navds-textarea-color-border: var(--navds-color-gray-60);
|
||||
--navds-textarea-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-textarea-color-border-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-counter-text: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-counter-text-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-background: var(
|
||||
--navds-semantic-color-component-background-light:
|
||||
);
|
||||
--navds-textarea-color-border: var(--navds-semantic-color-border);
|
||||
--navds-textarea-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-textarea-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
|
||||
--navds-textarea-color-counter-text-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
|
||||
--navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-textarea-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
}
|
||||
|
||||
.navds-textarea__wrapper {
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
.navds-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-gap: var(--navds-grid-gutter-small);
|
||||
grid-gap: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-grid {
|
||||
grid-gap: var(--navds-grid-gutter-medium-and-larger);
|
||||
grid-gap: var(--navds-spacing-6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
:root {
|
||||
--navds-guide-panel-color-background: var(--navds-color-background);
|
||||
--navds-guide-panel-color-border: var(--navds-color-blue-40);
|
||||
--navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
|
||||
--navds-guide-panel-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-blue-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-global-color-blue-200
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
:root {
|
||||
--navds-help-text-color-button-background: transparent;
|
||||
--navds-help-text-color-icon: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-hover: var(--navds-color-white);
|
||||
--navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-focus: var(--navds-color-white);
|
||||
--navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
|
||||
--navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
|
||||
--navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
|
||||
--navds-help-text-color-icon-hover: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-help-text-color-icon-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-icon-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-icon-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-help-text-color-icon-background-focus: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
|
||||
--navds-help-text-color-popover-background: var(
|
||||
--navds-semantic-color-feedback-info-background
|
||||
);
|
||||
}
|
||||
|
||||
.navds-help-text__button {
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
:root {
|
||||
--navds-link-panel-color-text: var(--navds-color-gray-90);
|
||||
--navds-link-panel-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-link-panel-color-title-hover: var(--navds-color-text-link);
|
||||
--navds-link-panel-color-text: var(--navds-semantic-color-text);
|
||||
--navds-link-panel-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
|
||||
}
|
||||
|
||||
.navds-link-panel {
|
||||
@@ -19,7 +21,7 @@
|
||||
}
|
||||
|
||||
.navds-link-panel:hover {
|
||||
box-shadow: var(--navds-shadow-hover);
|
||||
box-shadow: var(--navds-shadow-card);
|
||||
border-color: var(--navds-link-panel-color-border-hover);
|
||||
}
|
||||
|
||||
|
||||
+11
-11
@@ -1,13 +1,13 @@
|
||||
:root {
|
||||
--navds-link-color-text: var(--navds-color-text-link);
|
||||
--navds-link-color-text-focus: var(--navds-color-text-inverse);
|
||||
--navds-link-color-text-active: var(--navds-color-text-inverse);
|
||||
--navds-link-color-background-focus: var(--navds-text-focus);
|
||||
--navds-link-color-background-active: var(--navds-text-focus);
|
||||
--navds-link-color-icon: var(--navds-color-text-link);
|
||||
--navds-link-color-icon-focus: var(--navds-color-text-inverse);
|
||||
--navds-link-color-on-info-background: var(--navds-color-text-primary);
|
||||
--navds-link-color-on-error-background: var(--navds-color-text-primary);
|
||||
--navds-link-color-text: var(--navds-semantic-color-link);
|
||||
--navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-background-focus: var(--navds-semantic-color-focus);
|
||||
--navds-link-color-background-active: var(--navds-semantic-color-focus);
|
||||
--navds-link-color-icon: var(--navds-semantic-color-link);
|
||||
--navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-on-info-background: var(--navds-semantic-color-text);
|
||||
--navds-link-color-on-error-background: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-link {
|
||||
@@ -36,7 +36,7 @@
|
||||
color: var(--navds-link-color-text-focus);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-focus);
|
||||
box-shadow: var(--navds-text-shadow);
|
||||
box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-link:active {
|
||||
@@ -44,7 +44,7 @@
|
||||
color: var(--navds-link-color-text-active);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-active);
|
||||
box-shadow: var(--navds-text-shadow);
|
||||
box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-link svg {
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
:root {
|
||||
--navds-loader-color-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-background: var(--navds-color-gray-10);
|
||||
--navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
|
||||
--navds-loader-color-inverted-foreground: var(--navds-color-white);
|
||||
--navds-loader-color-foreground: var(--navds-global-color-gray-400);
|
||||
--navds-loader-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
|
||||
--navds-loader-color-interaction-foreground: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-loader-color-inverted-foreground: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
:root {
|
||||
--navds-modal-color-background: var(--navds-color-background);
|
||||
--navds-modal-color-overlay: var(--navds-color-modal-overlay);
|
||||
--navds-modal-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
|
||||
}
|
||||
|
||||
.ReactModal__Body--open {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.11.5",
|
||||
"version": "0.12.0",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -21,7 +21,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.6.3",
|
||||
"@navikt/ds-tokens": "^0.7.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
:root {
|
||||
--navds-page-header-color-background: var(--navds-color-background);
|
||||
--navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
|
||||
--navds-page-header-color-shadow-product: var(--navds-color-green-40);
|
||||
--navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
|
||||
--navds-page-header-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-page-header-color-shadow-situation: var(
|
||||
--navds-global-color-orange-400
|
||||
);
|
||||
--navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
|
||||
--navds-page-header-color-shadow-guide: var(
|
||||
--navds-global-color-deepblue-400
|
||||
);
|
||||
}
|
||||
|
||||
.navds-page-header {
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
:root {
|
||||
--navds-panel-color-background: var(--navds-color-white);
|
||||
--navds-panel-color-border: var(--navds-color-border);
|
||||
--navds-panel-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-panel-color-border: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-panel {
|
||||
background-color: var(--navds-panel-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: var(--navds-border-radius);
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
:root {
|
||||
--navds-popover-color-background: var(--navds-color-background);
|
||||
--navds-popover-color-border: var(--navds-color-gray-40);
|
||||
--navds-popover-color-shadow: var(--navds-color-gray-20);
|
||||
--navds-popover-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-popover-color-border: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-popover {
|
||||
z-index: var(--navds-z-index-popover);
|
||||
background-color: var(--navds-popover-color-background);
|
||||
box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-popover-color-border);
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
:root {
|
||||
--navds-speechbubble-color-background: var(--navds-color-gray-10);
|
||||
--navds-speechbubble-color-shadow: var(--navds-color-gray-20);
|
||||
--navds-speechbubble-color-illustration: var(--navds-color-darkgray);
|
||||
--navds-speechbubble-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
|
||||
--navds-speechbubble-color-illustration-background: var(
|
||||
--navds-color-gray-20
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-speechbubble-color-detail-text: var(
|
||||
--navds-semantic-color-text-muted
|
||||
);
|
||||
--navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
|
||||
}
|
||||
|
||||
.navds-speechbubble {
|
||||
@@ -52,7 +55,7 @@
|
||||
|
||||
.navds-speechbubble__bubble {
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
width: fit-content;
|
||||
max-width: 37.5rem;
|
||||
background-color: var(--navds-speechbubble-color-background);
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
:root {
|
||||
--navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
@@ -20,7 +24,7 @@
|
||||
display: table-cell;
|
||||
padding: var(--navds-spacing-4);
|
||||
text-align: left;
|
||||
border-bottom: var(--navds-border-default);
|
||||
border-bottom: 1px solid var(--navds-table-cell-color-border);
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__cell {
|
||||
|
||||
+24
-10
@@ -1,18 +1,32 @@
|
||||
:root {
|
||||
--navds-tag-color-border: var(--navds-color-gray-40);
|
||||
--navds-tag-color-background: var(--navds-color-gray-10);
|
||||
--navds-tag-color-info-background: var(--navds-color-tag-info-background);
|
||||
--navds-tag-color-info-border: var(--navds-color-tag-info-border);
|
||||
--navds-tag-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-tag-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-tag-color-info-background: var(
|
||||
--navds-semantic-color-feedback-info-background
|
||||
);
|
||||
--navds-tag-color-info-border: var(
|
||||
--navds-semantic-color-feedback-info-border
|
||||
);
|
||||
--navds-tag-color-warning-background: var(
|
||||
--navds-color-tag-warning-background
|
||||
--navds-semantic-color-feedback-warning-background
|
||||
);
|
||||
--navds-tag-color-warning-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
--navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
|
||||
--navds-tag-color-success-background: var(
|
||||
--navds-color-tag-success-background
|
||||
--navds-semantic-color-feedback-success-background
|
||||
);
|
||||
--navds-tag-color-success-border: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-tag-color-error-background: var(
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-tag-color-error-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
--navds-tag-color-success-border: var(--navds-color-tag-success-border);
|
||||
--navds-tag-color-error-background: var(--navds-color-tag-error-background);
|
||||
--navds-tag-color-error-border: var(--navds-color-tag-error-border);
|
||||
}
|
||||
|
||||
.navds-tag {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.6.3",
|
||||
"version": "0.7.0",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
@@ -38,7 +38,8 @@
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/cli": "^5.5.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.13.3",
|
||||
"version": "0.14.0",
|
||||
"private": false,
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -35,7 +35,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@navikt/ds-icons": "^0.6.3",
|
||||
"@navikt/ds-icons": "^0.7.0",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react-collapse": "^5.1.0",
|
||||
@@ -61,6 +61,7 @@
|
||||
"ts-jest": "^27.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
}
|
||||
}
|
||||
@@ -31,13 +31,13 @@ Stylingen som blir satt av den:
|
||||
.navds-content-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--navds-content-container-max-width); # 79.5rem (1272px)
|
||||
padding: var(--navds-content-container-padding-small); # 1rem
|
||||
max-width: 79.5rem; # (1272px)
|
||||
padding: var(--navds-spacing-4); # 1rem
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-content-container {
|
||||
padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
|
||||
padding: var(--navds-spacing-6); # 1.5rem
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.sb-guidepanel__tokens--purple {
|
||||
--navds-guide-panel-color-border: var(--navds-color-purple-40);
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-purple-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-color-purple-20
|
||||
--navds-global-color-purple-200
|
||||
);
|
||||
}
|
||||
|
||||
.sb-guidepanel__tokens--green {
|
||||
--navds-guide-panel-color-border: var(--navds-color-green-40);
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-green-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-color-green-20
|
||||
--navds-global-color-green-200
|
||||
);
|
||||
}
|
||||
@@ -38,9 +38,9 @@ Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå se
|
||||
overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
|
||||
|
||||
```css
|
||||
/* default */
|
||||
--navds-guide-panel-color-border: var(--navds-color-blue-40);
|
||||
--navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
|
||||
/* Tokens */
|
||||
--navds-guide-panel-color-border
|
||||
--navds-guide-panel-color-illustration-background
|
||||
```
|
||||
|
||||
```jsx
|
||||
@@ -55,16 +55,16 @@ overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components elle
|
||||
/* Inline */
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
|
||||
@@ -21,24 +21,24 @@ export const All = () => {
|
||||
<h2>custom colors</h2>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
|
||||
@@ -74,7 +74,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
|
||||
cx="25"
|
||||
cy="25"
|
||||
r="20"
|
||||
stroke={"var(--navds-color-gray-40)"}
|
||||
stroke={"var(--navds-global-color-gray-400)"}
|
||||
fill="none"
|
||||
strokeWidth="5"
|
||||
strokeDasharray="50 155"
|
||||
|
||||
@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
|
||||
<Loader />
|
||||
</Button>
|
||||
</Canvas>
|
||||
|
||||
## Overskrive farger for å sikre kontrast
|
||||
|
||||
I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
|
||||
|
||||
```css
|
||||
--navds-loader-color-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-background: var(--navds-color-gray-10);
|
||||
--navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
|
||||
--navds-loader-color-inverted-foreground: var(--navds-color-white);
|
||||
--navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-on-button-foreground: currentColor;
|
||||
```
|
||||
@@ -17,7 +17,7 @@ const Template = (props) => {
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--navds-color-gray-60)",
|
||||
background: "var(--navds-global-color-gray-600)",
|
||||
textAlign: "center",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
|
||||
@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
|
||||
<SpeechBubble
|
||||
illustration="OLA"
|
||||
position="left"
|
||||
illustrationBgColor="var(--navds-color-lightblue-10)"
|
||||
backgroundColor="var(--navds-color-lightblue-20)"
|
||||
illustrationBgColor="var(--navds-global-color-lightblue-100)"
|
||||
backgroundColor="var(--navds-global-color-lightblue-200)"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
|
||||
<SpeechBubble
|
||||
illustration="OLA"
|
||||
position="left"
|
||||
illustrationBgColor="var(--navds-color-lightblue-10)"
|
||||
backgroundColor="var(--navds-color-lightblue-20)"
|
||||
illustrationBgColor="var(--navds-global-color-lightblue-100)"
|
||||
backgroundColor="var(--navds-global-color-lightblue-200)"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
|
||||
@@ -14,7 +14,7 @@ export const All = () => {
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="var(--navds-color-lightblue-20)"
|
||||
backgroundColor="var(--navds-global-color-lightblue-200)"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
@@ -42,7 +42,7 @@ export const All = () => {
|
||||
</div>
|
||||
}
|
||||
position="right"
|
||||
backgroundColor="var(--navds-color-gray-10)"
|
||||
backgroundColor="var(--navds-global-color-gray-100)"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.typo-story > div:nth-child(even) {
|
||||
background: var(--navds-color-gray-20);
|
||||
background: var(--navds-global-color-gray-200);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"source": ["src/index.js"],
|
||||
"source": ["src/index.js", "src/**/*.json"],
|
||||
"platforms": {
|
||||
"scss": {
|
||||
"transformGroup": "scss",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "0.6.3",
|
||||
"version": "0.7.0",
|
||||
"private": false,
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -30,7 +30,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^27.0.1",
|
||||
"color": "^4.0.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"figma-api": "^1.7.0",
|
||||
"jest": "^27.2.0",
|
||||
|
||||
@@ -297,23 +297,26 @@
|
||||
"semantic": {
|
||||
"color": {
|
||||
"border": {
|
||||
"default": {
|
||||
"value": "{navds.global.color.gray.600.value}"
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.gray.200.value}"
|
||||
},
|
||||
"muted": {
|
||||
"value": "{navds.global.color.gray.400.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.gray.600.value}"
|
||||
}
|
||||
},
|
||||
"canvas": {
|
||||
"background": {
|
||||
"default": {
|
||||
"value": "{navds.global.color.gray.100.value}"
|
||||
},
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
},
|
||||
"light": {
|
||||
"value": "{navds.global.color.white.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.gray.100.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -383,50 +386,61 @@
|
||||
}
|
||||
},
|
||||
"focus": {
|
||||
"value": "{navds.global.color.blue.800.value}",
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.blue.200.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.800.value}"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"danger": {
|
||||
"default": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
},
|
||||
"hover": {
|
||||
"value": "{navds.global.color.red.600.value}"
|
||||
},
|
||||
"selected": {
|
||||
"value": "{navds.global.color.red.700.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
}
|
||||
},
|
||||
"primary": {
|
||||
"default": {
|
||||
"value": "{navds.global.color.blue.500.value}"
|
||||
},
|
||||
"hover": {
|
||||
"value": "{navds.global.color.blue.600.value}"
|
||||
"subtle": {
|
||||
"value": "{navds.global.color.blue.50.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.600.value}"
|
||||
}
|
||||
},
|
||||
"selected": {
|
||||
"value": "{navds.global.color.deepblue.500.value}"
|
||||
},
|
||||
"@": {
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.500.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"default": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
"link": {
|
||||
"visited": {
|
||||
"value": "{navds.global.color.purple.500.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.500.value}"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.white.value}"
|
||||
},
|
||||
"link": {
|
||||
"value": "{navds.global.color.blue.500.value}",
|
||||
"visited": {
|
||||
"value": "{navds.global.color.purple.500.value}"
|
||||
}
|
||||
},
|
||||
"muted": {
|
||||
"value": "{navds.global.color.gray.600.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,144 +1,8 @@
|
||||
const Color = require("color");
|
||||
const newColors = require("./colors.json");
|
||||
const newSpacing = require("./spacing.json");
|
||||
|
||||
const baseFontSize = 16;
|
||||
|
||||
const getFontSize = (size) => `${size / baseFontSize}rem`;
|
||||
// https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
|
||||
const mixColors = (color, step, amount, mixColor) => {
|
||||
const saturation = Math.round(Color(color).hsl().color[1]);
|
||||
// Setting directly to hex returns different result...
|
||||
return Color(
|
||||
Color(color)
|
||||
.saturate(((step + 1) / 5) * (saturation / 100))
|
||||
.mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
|
||||
.string()
|
||||
).hex();
|
||||
};
|
||||
|
||||
const lightColor = (color, step) => mixColors(color, step, 100, "white");
|
||||
const darkColor = (color, step) => mixColors(color, step, 85, "black");
|
||||
|
||||
const baseColors = {
|
||||
blue: "#0067c5",
|
||||
deepblue: "#005B82",
|
||||
lightblue: "#66CBEC",
|
||||
orange: "#FF9100",
|
||||
green: "#06893A",
|
||||
red: "#BA3A26",
|
||||
purple: "#634689",
|
||||
limegreen: "#a2ad00",
|
||||
};
|
||||
|
||||
const white = "#ffffff";
|
||||
const darkgray = "#262626";
|
||||
const lightgray = "#F1F1F1";
|
||||
|
||||
const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
|
||||
|
||||
module.exports = {
|
||||
navds: {
|
||||
...(newSpacing?.navds ?? {}),
|
||||
...(newColors?.navds ?? {}),
|
||||
color: {
|
||||
white: { value: white },
|
||||
darkgray: { value: darkgray },
|
||||
gray: {
|
||||
90: { value: gray(1) },
|
||||
80: { value: gray(0.8) },
|
||||
60: { value: gray(0.6667) },
|
||||
40: { value: gray(0.4) },
|
||||
20: { value: gray(0.196) },
|
||||
10: { value: gray(0) },
|
||||
},
|
||||
...Object.entries(baseColors).reduce(
|
||||
(colors, [name, color]) => ({
|
||||
...colors,
|
||||
[name]: {
|
||||
90: { value: darkColor(color, 3) },
|
||||
80: { value: darkColor(color, 2) },
|
||||
70: { value: darkColor(color, 1) },
|
||||
60: { value: darkColor(color, 0) },
|
||||
50: { value: color },
|
||||
40: { value: lightColor(color, 0) },
|
||||
30: { value: lightColor(color, 1) },
|
||||
20: { value: lightColor(color, 2) },
|
||||
10: { value: lightColor(color, 3) },
|
||||
},
|
||||
}),
|
||||
{}
|
||||
),
|
||||
disabled: { value: "{navds.color.gray.40.value}" },
|
||||
action: {
|
||||
default: { value: "{navds.color.blue.50.value}" },
|
||||
hover: { value: "{navds.color.blue.60.value}" },
|
||||
active: { value: "{navds.color.deepblue.50.value}" },
|
||||
},
|
||||
danger: {
|
||||
default: { value: "{navds.color.red.50.value}" },
|
||||
hover: { value: "{navds.color.red.60.value}" },
|
||||
active: { value: "{navds.color.red.70.value}" },
|
||||
},
|
||||
error: {
|
||||
border: { value: "{navds.color.red.50.value}" },
|
||||
background: { value: "{navds.color.red.10.value}" },
|
||||
},
|
||||
warning: {
|
||||
border: { value: "{navds.color.orange.60.value}" },
|
||||
background: { value: "{navds.color.orange.10.value}" },
|
||||
},
|
||||
info: {
|
||||
border: { value: "{navds.color.lightblue.70.value}" },
|
||||
background: { value: "{navds.color.lightblue.10.value}" },
|
||||
},
|
||||
success: {
|
||||
border: { value: "{navds.color.green.50.value}" },
|
||||
background: { value: "{navds.color.green.10.value}" },
|
||||
},
|
||||
border: { value: "{navds.color.gray.40.value}" },
|
||||
background: { value: "{navds.color.white.value}" },
|
||||
text: {
|
||||
primary: { value: "{navds.color.gray.90.value}" },
|
||||
inverse: { value: "{navds.color.white.value}" },
|
||||
disabled: { value: "{navds.color.gray.60.value}" },
|
||||
link: { value: "{navds.color.blue.50.value}" },
|
||||
error: { value: "{navds.color.red.50.value}" },
|
||||
},
|
||||
hover: { value: "{navds.color.gray.40.value}" },
|
||||
tag: {
|
||||
error: {
|
||||
border: { value: "{navds.color.red.50.value}" },
|
||||
background: { value: "{navds.color.red.10.value}" },
|
||||
},
|
||||
warning: {
|
||||
border: { value: "{navds.color.orange.60.value}" },
|
||||
background: { value: "{navds.color.orange.10.value}" },
|
||||
},
|
||||
info: {
|
||||
border: { value: "{navds.color.lightblue.70.value}" },
|
||||
background: { value: "{navds.color.lightblue.10.value}" },
|
||||
},
|
||||
success: {
|
||||
border: { value: "{navds.color.green.50.value}" },
|
||||
background: { value: "{navds.color.green.10.value}" },
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
overlay: {
|
||||
value: "rgba(38, 38, 38, 0.7)",
|
||||
},
|
||||
},
|
||||
},
|
||||
border: {
|
||||
default: {
|
||||
value: "1px solid {navds.color.border.value}",
|
||||
},
|
||||
radius: { value: "4px" },
|
||||
},
|
||||
panel: {
|
||||
hover: { value: "1px solid {navds.color.blue.50.value}" },
|
||||
},
|
||||
font: {
|
||||
family: { value: '"Source Sans Pro", Arial, sans-serif' },
|
||||
line: {
|
||||
@@ -176,35 +40,16 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
|
||||
"focus-on-dark": { value: "0 0 0 3px {navds.color.orange.40.value}" },
|
||||
hover: { value: "{navds.color.hover.value} 0 2px 1px 0" },
|
||||
},
|
||||
text: {
|
||||
focus: { value: "{navds.color.blue.80.value}" },
|
||||
shadow: { value: "0 0 0 2px {navds.color.blue.80.value}" },
|
||||
},
|
||||
contentContainer: {
|
||||
maxWidth: { value: "79.5rem" },
|
||||
padding: {
|
||||
small: { value: "{navds.spacing.4.value}" },
|
||||
mediumAndLarger: { value: "{navds.spacing.6.value}" },
|
||||
focus: { value: "0 0 0 3px {navds.semantic.color.focus.@.value}" },
|
||||
"focus-inverted": {
|
||||
value: "0 0 0 3px {navds.semantic.color.focus.inverted.value}",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
gutter: {
|
||||
small: { value: "{navds.spacing.4.value}" },
|
||||
mediumAndLarger: { value: "{navds.spacing.6.value}" },
|
||||
popover: {
|
||||
value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
background: {
|
||||
white: { value: white },
|
||||
gray: { value: "{navds.color.gray.10.value}" },
|
||||
},
|
||||
padding: {
|
||||
small: { value: "{navds.spacing.4.value}" },
|
||||
mediumAndLarger: { value: "{navds.spacing.10.value}" },
|
||||
card: {
|
||||
value:
|
||||
"0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)",
|
||||
},
|
||||
},
|
||||
"z-index": {
|
||||
@@ -212,22 +57,5 @@ module.exports = {
|
||||
popover: { value: 1000 },
|
||||
focus: { value: 10 },
|
||||
},
|
||||
sidebar: {
|
||||
sticky: {
|
||||
offset: { value: "0" },
|
||||
},
|
||||
},
|
||||
checkmark: {
|
||||
image: {
|
||||
white: {
|
||||
value:
|
||||
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
|
||||
},
|
||||
blue: {
|
||||
value:
|
||||
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,5 +1,9 @@
|
||||
:root {
|
||||
--navdsi-divider-color-border: var(--navds-semantic-color-divider);
|
||||
}
|
||||
|
||||
.navdsi-divider {
|
||||
margin: var(--navds-spacing-3) 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--navds-color-gray-40);
|
||||
border-bottom: 1px solid var(--navdsi-divider-color-border);
|
||||
}
|
||||
@@ -1,7 +1,19 @@
|
||||
:root {
|
||||
--navds-dropdown-menu-color: var(--navds-semantic-color-text);
|
||||
--navdsi-dropdown-item-color-text: var(--navds-semantic-color-link);
|
||||
--navdsi-dropdown-item-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navdsi-dropdown-item-color-background-active: var(
|
||||
--navds-global-color-blue-200
|
||||
);
|
||||
--navds-dropdown-item-color-focus: var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navdsi-dropdown__menu {
|
||||
overflow: hidden;
|
||||
padding: var(--navds-spacing-4) 0;
|
||||
color: var(--navds-color-darkgray);
|
||||
color: var(--navds-dropdown-menu-color);
|
||||
width: 27ch;
|
||||
max-height: 616px;
|
||||
overflow-y: auto;
|
||||
@@ -30,7 +42,7 @@
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
color: var(--navds-color-text-link);
|
||||
color: var(--navdsi-dropdown-item-color-text);
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
@@ -43,14 +55,14 @@
|
||||
}
|
||||
|
||||
.navdsi-dropdown__item:hover {
|
||||
background-color: var(--navds-color-blue-10);
|
||||
background-color: var(--navdsi-dropdown-item-color-background-hover);
|
||||
}
|
||||
|
||||
.navdsi-dropdown__item:active {
|
||||
background-color: var(--navds-color-blue-20);
|
||||
background-color: var(--navdsi-dropdown-item-color-background-active);
|
||||
}
|
||||
|
||||
.navdsi-dropdown__item:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--navds-color-blue-80);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-dropdown-item-color-focus);
|
||||
}
|
||||
@@ -1,8 +1,12 @@
|
||||
:root {
|
||||
--navdsi-header-color-background: var(--navds-color-darkgray);
|
||||
--navdsi-header-color-border: var(--navds-color-gray-40);
|
||||
--navdsi-header-color-text: var(--navds-color-text-inverse);
|
||||
--navdsi-header-focus: inset 0 0 0 2px var(--navds-color-blue-10);
|
||||
--navdsi-header-color-background: var(
|
||||
--navds-semantic-color-component-background-inverted
|
||||
);
|
||||
--navdsi-header-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navdsi-header-color-text: var(--navds-semantic-color-text-inverted);
|
||||
--navdsi-header-focus: inset 0 0 0 2px var(--navds-global-color-blue-100);
|
||||
--navdsi-header-color-hover: var(--navds-global-color-gray-800);
|
||||
--navdsi-header-color-active: var(--navds-global-color-gray-600);
|
||||
}
|
||||
|
||||
.navdsi-header {
|
||||
@@ -61,7 +65,7 @@ button.navdsi-header__title {
|
||||
a.navdsi-header__title:hover,
|
||||
button.navdsi-header__title:hover,
|
||||
.navdsi-header__button:hover {
|
||||
background-color: var(--navds-color-gray-80);
|
||||
background-color: var(--navdsi-header-color-hover);
|
||||
}
|
||||
|
||||
.navdsi-header__title:focus,
|
||||
@@ -73,7 +77,7 @@ button.navdsi-header__title:hover,
|
||||
a.navdsi-header__title:active,
|
||||
button.navdsi-header__title:active,
|
||||
.navdsi-header__button:active {
|
||||
background-color: var(--navds-color-gray-60);
|
||||
background-color: var(--navdsi-header-color-active);
|
||||
}
|
||||
|
||||
.navdsi-header__user-button {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"private": false,
|
||||
"description": "Css for NAV internal Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "0.8.3",
|
||||
"version": "0.9.0",
|
||||
"private": false,
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -33,8 +33,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^0.6.3",
|
||||
"@navikt/ds-react": "^0.13.3",
|
||||
"@navikt/ds-icons": "^0.7.0",
|
||||
"@navikt/ds-react": "^0.14.0",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.3.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
@@ -44,6 +44,7 @@
|
||||
"rimraf": "^3.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
}
|
||||
}
|
||||
@@ -26,10 +26,10 @@ Repoet inneholder følgende:
|
||||
- [Eksempler på forskjellige frontend-løsninger](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
|
||||
- [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
|
||||
|
||||
## Bidrag
|
||||
## Bidra
|
||||
|
||||
Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)
|
||||
|
||||
## Lisens
|
||||
## Lisenser
|
||||
|
||||
Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)
|
||||
@@ -34,7 +34,7 @@
|
||||
"mdx-utils": "^0.2.0",
|
||||
"object-path-immutable": "^4.1.0",
|
||||
"prism-react-renderer": "^1.1.1",
|
||||
"prismjs": "1.23.0",
|
||||
"prismjs": "1.25.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0",
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
width: 18rem;
|
||||
height: 24rem;
|
||||
text-decoration: none;
|
||||
color: var(--navds-color-darkgray);
|
||||
color: var(--navds-semantic-color-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 4rem 2rem 2rem 2rem;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--navds-color-gray-20);
|
||||
border: 2px solid var(--navds-global-color-gray-200);
|
||||
background-color: white;
|
||||
position: relative;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--navds-color-text-focus);
|
||||
border-color: var(--navds-semantic-color-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@ pre {
|
||||
border-top: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--navds-shadow-hover);
|
||||
box-shadow: 0 2px 1px 0 var(--navds-global-color-gray-400);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
padding: 0;
|
||||
border-radius: 0.5rem;
|
||||
margin: 0.2rem;
|
||||
box-shadow: var(--navds-shadow-hover);
|
||||
box-shadow: 0 2px 1px 0 var(--navds-semantic-color-border-muted);
|
||||
transform: translateY(0.2rem);
|
||||
border: 1px solid var(--navds-color-darkgray);
|
||||
border: 1px solid var(--navds-semantic-color-text);
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
animation: fadeIn 500ms cubic-bezier(0.17, 0.67, 0.83, 0.67) 1;
|
||||
|
||||
&:hover {
|
||||
border: var(--navds-panel-hover);
|
||||
border: 1px solid var(--navds-semantic-color-interaction-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
.forside__logo-links > * {
|
||||
color: var(--navds-color-text-primary);
|
||||
color: var(--navds-semantic-color-text);
|
||||
text-decoration: none;
|
||||
margin-right: 2.5rem;
|
||||
&:hover {
|
||||
|
||||
@@ -90,3 +90,7 @@
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.gp_accordion {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
@@ -48,7 +48,7 @@ const getToc = (toc) => {
|
||||
<Lenke href={item.url} className="toc-link toc-link-h2">
|
||||
{item.title}
|
||||
</Lenke>
|
||||
{item.items && item.items.length !== 0 && (
|
||||
{/* {item.items && item.items.length !== 0 && (
|
||||
<ol className="toc-level toc-level-2">
|
||||
{item.items.map((lvl3, x) => {
|
||||
return (
|
||||
@@ -60,7 +60,7 @@ const getToc = (toc) => {
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
)} */}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
@@ -101,7 +101,7 @@ const renderAst = new rehypeReact({
|
||||
inlineCode: (props) => <InlineCode {...props} />,
|
||||
accordion: (props) => {
|
||||
return (
|
||||
<Accordion>
|
||||
<Accordion className="gp_accordion">
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>{props?.tittel}</Accordion.Header>
|
||||
<Accordion.Content>{props.children}</Accordion.Content>
|
||||
|
||||
@@ -8314,15 +8314,6 @@ cli-width@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
|
||||
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
|
||||
|
||||
clipboard@^2.0.0:
|
||||
version "2.0.8"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
|
||||
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
tiny-emitter "^2.0.0"
|
||||
|
||||
clipboardy@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
|
||||
@@ -9835,11 +9826,6 @@ delayed-stream@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
|
||||
|
||||
delegate@^3.1.2:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
|
||||
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@@ -13444,13 +13430,6 @@ gonzales-pe@^4.3.0:
|
||||
dependencies:
|
||||
minimist "^1.2.5"
|
||||
|
||||
good-listener@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
|
||||
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
|
||||
dependencies:
|
||||
delegate "^3.1.2"
|
||||
|
||||
got@8.3.2, got@^8.3.1:
|
||||
version "8.3.2"
|
||||
resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
|
||||
@@ -21434,14 +21413,7 @@ prism-react-renderer@^1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89"
|
||||
integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==
|
||||
|
||||
prismjs@1.23.0:
|
||||
version "1.23.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
|
||||
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
|
||||
optionalDependencies:
|
||||
clipboard "^2.0.0"
|
||||
|
||||
prismjs@^1.21.0, prismjs@~1.25.0:
|
||||
prismjs@1.25.0, prismjs@^1.21.0, prismjs@~1.25.0:
|
||||
version "1.25.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
|
||||
integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
|
||||
@@ -23324,11 +23296,6 @@ select-hose@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
|
||||
|
||||
select@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
|
||||
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
|
||||
|
||||
selfsigned@^1.10.8:
|
||||
version "1.10.11"
|
||||
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9"
|
||||
@@ -25260,11 +25227,6 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tiny-emitter@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
|
||||
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
|
||||
|
||||
tiny-invariant@^1.0.2, tiny-invariant@^1.1.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
|
||||
|
||||
Reference in new issue
Block a user