mirror of
https://github.com/navikt/aksel.git
synced 2026-10-15 18:22:02 +00:00
Compare commits
38
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]
|
80ad6349e2 | ||
|
Ken
|
67dc10d290 | ||
|
Ken
|
05477b273e | ||
|
Ken
|
0b05928f69 | ||
|
Ken
|
f5b2012245 | ||
|
Ken
|
3b59d03bca | ||
|
Ken
|
794c6fea4e | ||
|
Ken
|
01cc0b3703 | ||
|
github-actions[bot]
|
36d98e1d19 | ||
|
|
705b2cbe9c | ||
|
dependabot[bot]
|
2fc2572d93 | ||
|
Ken
|
5fd0b3cffd | ||
|
Ken
|
ead802c0d8 | ||
|
Ken
|
eb9ca68e5c | ||
|
Ken
|
89a604bd57 | ||
|
Ken
|
9465cdf30a | ||
|
Ken
|
cb482b4cdc | ||
|
github-actions[bot]
|
f6c4f853af | ||
|
KenandAndreas Nordahl
|
9a2cd06452 | ||
|
Ken
|
40ae4d9a20 | ||
|
Ken
|
3e835fc76c | ||
|
github-actions[bot]
|
2ad9183b09 | ||
|
Andreas Nordahl
|
627b4f06cb | ||
|
Ken
|
3977927ac8 | ||
|
Ken
|
6f81c2cf4e | ||
|
github-actions[bot]
|
46f97b006f | ||
|
Ken
|
9338995a3c | ||
|
github-actions[bot]
|
e3cf943ab3 | ||
|
Andreas Nordahl
|
59a3c71821 | ||
|
Andreas NordahlandKen
|
edab708a93 | ||
|
github-actions[bot]
|
c291a6106f | ||
|
github-actions[bot]andKenAJoh
|
8f0601e93f | ||
|
github-actions[bot]
|
03a9d1a554 | ||
|
github-actions[bot]andKenAJoh
|
c58688a966 | ||
|
Ken
|
f242e5028c | ||
|
KenandAndreas Nordahl
|
92e13a173f | ||
|
github-actions[bot]
|
a06b27a218 | ||
|
KenandAndreas Nordahl
|
942f611c38 |
No files matched your search
@@ -0,0 +1,37 @@
|
||||
name: Publish storybook to vercel
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
pull_request:
|
||||
branches: [master]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
dev:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name != 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: amondnet/vercel-action@v20
|
||||
with:
|
||||
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
|
||||
vercel-org-id: ${{ secrets.ORG_ID}} #Required
|
||||
vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
|
||||
working-directory: ./
|
||||
alias-domains: |
|
||||
nav-ds-pr-${{github.event.number}}-kenajoh.vercel.app
|
||||
prod:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: amondnet/vercel-action@v20
|
||||
with:
|
||||
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
|
||||
vercel-args: "--prod" #Optional
|
||||
vercel-org-id: ${{ secrets.ORG_ID}} #Required
|
||||
vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
|
||||
working-directory: ./
|
||||
@@ -0,0 +1,41 @@
|
||||
name: Update tokens
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: 0 0 * * *
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Update tokens
|
||||
run: yarn update:tokens
|
||||
env:
|
||||
FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
branch: figma-tokens-sync
|
||||
delete-branch: true
|
||||
title: "[FEATURE] Tokens sync Figma"
|
||||
commit-message: "Tokens synket fra figma"
|
||||
committer: GitHub <noreply@github.com>
|
||||
signoff: false
|
||||
+2
-1
@@ -115,4 +115,5 @@ utilities/**/css
|
||||
react-docgen.json
|
||||
react-docgen-docs.json
|
||||
cjs
|
||||
esm
|
||||
esm
|
||||
.vercel
|
||||
@@ -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 {
|
||||
|
||||
@@ -22,13 +22,13 @@ html {
|
||||
|
||||
body {
|
||||
font-family: var(--navds-font-family);
|
||||
line-height: 1.375;
|
||||
color: var(--navds-color-text-primary);
|
||||
line-height: 1.333;
|
||||
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/ */
|
||||
|
||||
+85
-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,13 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--primary:hover:disabled,
|
||||
.navds-button--primary:active:disabled {
|
||||
background-color: var(--navds-button-color-primary-background);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button--secondary *
|
||||
* .navds-button--secondary *
|
||||
**************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
@@ -145,6 +176,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 +206,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 +245,17 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover:disabled,
|
||||
.navds-button--danger:active: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,13 +0,0 @@
|
||||
.navds-checkbox-group--small > .navds-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
:root {
|
||||
--navds-checkbox-color-background: var(--navds-color-white);
|
||||
--navds-checkbox-color-border: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-checkbox-color-description: var(--navds-color-gray-80);
|
||||
--navds-checkbox-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-checkbox-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-background-checked-disabled: var(
|
||||
--navds-color-gray-40
|
||||
);
|
||||
}
|
||||
|
||||
.navds-checkbox {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-checkbox-color-description);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-checkbox-color-background);
|
||||
border: 1px solid var(--navds-checkbox-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label::before {
|
||||
border-color: var(--navds-checkbox-color-border-hover);
|
||||
background-color: var(--navds-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 75%;
|
||||
border: 2px solid var(--navds-checkbox-color-border-checked);
|
||||
background-color: var(--navds-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
background-color: white;
|
||||
background-image: var(--navds-checkmark-image-blue);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
|
||||
border-color: var(--navds-checkbox-color-border-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled,
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-checked-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-checked-disabled);
|
||||
}
|
||||
@@ -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,8 +1,15 @@
|
||||
: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 {
|
||||
display: block;
|
||||
color: var(--navds-error-message-color-text);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-error-message::before {
|
||||
content: "•";
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -6,14 +6,19 @@
|
||||
}
|
||||
|
||||
.navds-fieldset > :not(:first-child):not(:empty) {
|
||||
margin-top: 8px;
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-fieldset--small > :not(:first-child):not(:empty) {
|
||||
margin-top: 4px;
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset:disabled > .navds-fieldset__legend,
|
||||
.navds-fieldset:disabled > .navds-fieldset__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
.navds-form-field > :not(:first-child):not(:empty),
|
||||
.navds-form-field > input:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > :not(:first-child):not(:empty),
|
||||
.navds-form-field--small > input:not(:first-child) {
|
||||
margin-top: 4px;
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Applied when hideLabel is applied to form-element */
|
||||
|
||||
@@ -4,12 +4,9 @@
|
||||
@import "fieldset.css";
|
||||
@import "form.css";
|
||||
@import "error-summary.css";
|
||||
@import "checkbox.css";
|
||||
@import "checkbox-group.css";
|
||||
@import "confirmation-panel.css";
|
||||
@import "error-message.css";
|
||||
@import "radio.css";
|
||||
@import "radio-group.css";
|
||||
@import "radio-checkbox.css";
|
||||
@import "select.css";
|
||||
@import "text-field.css";
|
||||
@import "textarea.css";
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
:root {
|
||||
--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,
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navds-checkbox__input,
|
||||
.navds-radio__input {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__label,
|
||||
.navds-radio__label {
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before,
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-checkbox-color-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.navds-checkbox__content,
|
||||
.navds-radio__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-checkbox__description,
|
||||
.navds-radio__description {
|
||||
color: var(--navds-color-text-primary);
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label,
|
||||
.navds-radio--small > .navds-radio__label {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before,
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
box-shadow: none;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox--small
|
||||
> .navds-checkbox__input:checked
|
||||
+ .navds-checkbox__label::before {
|
||||
background-position: 4px center;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
||||
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
||||
color: var(--navds-radio-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
|
||||
background-color: var(--navds-radio-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled,
|
||||
.navds-radio--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled > .navds-checkbox__input,
|
||||
.navds-checkbox--disabled > .navds-checkbox__label,
|
||||
.navds-radio--disabled > .navds-radio__input,
|
||||
.navds-radio--disabled > .navds-radio__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.navds-radio-group--small > .navds-radio-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
:root {
|
||||
--navds-radio-color-description: var(--navds-color-gray-80);
|
||||
--navds-radio-color-background: var(--navds-color-white);
|
||||
--navds-radio-color-border: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-radio-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
|
||||
--navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
|
||||
--navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-radio-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-radio-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-radio-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
|
||||
}
|
||||
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-radio .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-radio__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
min-width: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-radio__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-radio-color-description);
|
||||
}
|
||||
|
||||
.navds-radio--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-color-background);
|
||||
border: 1px solid var(--navds-radio-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.navds-radio--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label::before {
|
||||
border-color: var(--navds-radio-color-border-hover);
|
||||
background-color: var(--navds-radio-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
border: 2px solid var(--navds-radio-color-border-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
|
||||
box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
|
||||
0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
|
||||
}
|
||||
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
|
||||
border-color: var(--navds-radio-color-border-error);
|
||||
}
|
||||
|
||||
.navds-radio--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled,
|
||||
.navds-radio__input:disabled + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled);
|
||||
border-color: var(--navds-radio-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled:checked + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled-checked);
|
||||
border-color: var(--navds-radio-color-border-disabled-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
|
||||
}
|
||||
@@ -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 {
|
||||
@@ -47,3 +53,7 @@
|
||||
box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
|
||||
border-color: var(--navds-search-field-color-border-error);
|
||||
}
|
||||
|
||||
.navds-search-field--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@@ -1,12 +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-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-select-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-select-color-text-disabled: var(--navds-color-darkgray);
|
||||
--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 {
|
||||
@@ -59,12 +69,16 @@
|
||||
border-color: var(--navds-select-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-select__input:disabled,
|
||||
.navds-select__input[read-only] {
|
||||
background-color: var(--navds-select-color-background-disabled);
|
||||
border-color: var(--navds-select-color-border-disabled);
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-select--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-select__input:disabled {
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-color: var(--navds-select-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-select-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,12 +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-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-text-field-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-text-field-color-text-disabled: var(--navds-color-darkgray);
|
||||
--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 {
|
||||
@@ -14,16 +24,20 @@
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-text-field-color-border);
|
||||
border: 2px solid var(--navds-text-field-color-border);
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__input {
|
||||
padding: 0.15rem;
|
||||
padding: 0 0.15rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--navds-text-field-color-border-hover);
|
||||
}
|
||||
@@ -36,20 +50,29 @@
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-text-field--error
|
||||
> .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
|
||||
.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--navds-text-field-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled,
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background-disabled);
|
||||
border-color: var(--navds-text-field-color-border-disabled);
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-text-field-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-text-field--disabled > .navds-text-field__label,
|
||||
.navds-text-field--disabled > .navds-text-field__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,14 +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-text-disabled: var(--navds-color-darkgray);
|
||||
--navds-textarea-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-background-disabled: var(--navds-color-gray-10);
|
||||
--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 {
|
||||
@@ -78,11 +90,20 @@
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-textarea__input:disabled,
|
||||
.navds-textarea--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-textarea__input[readonly] {
|
||||
background-color: var(--navds-textarea-color-background-disabled);
|
||||
border-color: var(--navds-textarea-color-border-disabled);
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-textarea-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -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.10.0",
|
||||
"version": "0.12.1",
|
||||
"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.5.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.2",
|
||||
"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",
|
||||
|
||||
@@ -35,7 +35,8 @@ function defaultTemplate(
|
||||
${imports}
|
||||
${interfaces}
|
||||
function ${componentName}(${props}) {
|
||||
const titleId = _titleId ?? (title ? v4() : undefined);
|
||||
const titleId = _titleId ?? (title ?
|
||||
"icon-title-" + v4() : undefined);
|
||||
return ${jsx};
|
||||
}
|
||||
${exports}`;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.12.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.2",
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "classnames";
|
||||
import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
|
||||
import { BodyShort, Label, omit } from "../..";
|
||||
import { BodyShort, Detail, Label, omit } from "../..";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useFieldset } from "./useFieldset";
|
||||
@@ -101,17 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
|
||||
>
|
||||
{legend}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
{!!description &&
|
||||
(size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</Detail>
|
||||
))}
|
||||
{children}
|
||||
<div
|
||||
id={errorId}
|
||||
|
||||
@@ -52,7 +52,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-select--error": hasError }
|
||||
{
|
||||
"navds-select--error": hasError,
|
||||
"navds-select--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
@@ -67,6 +70,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-select__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyShort, Label, omit } from "..";
|
||||
import { BodyShort, Detail, Label, omit } from "..";
|
||||
import ErrorMessage from "./ErrorMessage";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
@@ -52,7 +52,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-text-field--error": hasError }
|
||||
{
|
||||
"navds-text-field--error": hasError,
|
||||
"navds-text-field--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
@@ -65,15 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
|
||||
</Label>
|
||||
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<input
|
||||
{...omit(rest, ["error", "errorId", "size"])}
|
||||
|
||||
@@ -66,7 +66,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-textarea--error": hasError }
|
||||
{
|
||||
"navds-textarea--error": hasError,
|
||||
"navds-textarea--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
@@ -81,6 +84,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-textarea__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
|
||||
@@ -29,10 +29,7 @@ test("checkbox group chains onChange calls", () => {
|
||||
});
|
||||
|
||||
describe("Checkbox handles controlled-state correctly", () => {
|
||||
const CheckboxComponent = ({
|
||||
onChange = () => null,
|
||||
value,
|
||||
}) => (
|
||||
const CheckboxComponent = ({ onChange = () => null, value }) => (
|
||||
<CheckboxGroup legend="legend" onChange={onChange} value={value}>
|
||||
<Checkbox value={"value1"}>label1</Checkbox>
|
||||
<Checkbox value={"value2"}>label2</Checkbox>
|
||||
@@ -55,7 +52,12 @@ describe("Checkbox handles controlled-state correctly", () => {
|
||||
test("onChange called with expected values", () => {
|
||||
const onGroupChange = jest.fn();
|
||||
|
||||
render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
|
||||
render(
|
||||
<CheckboxComponent
|
||||
onChange={onGroupChange}
|
||||
value={["value1", "value2"]}
|
||||
/>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByLabelText("label1"));
|
||||
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import useCheckbox from "./useCheckbox";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { BodyShort, omit } from "../..";
|
||||
import { BodyShort, Detail, omit } from "../..";
|
||||
|
||||
export interface CheckboxProps
|
||||
extends FormFieldProps,
|
||||
extends Omit<FormFieldProps, "errorId">,
|
||||
Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
||||
/**
|
||||
* Checkbox has error
|
||||
* @default false
|
||||
*/
|
||||
error?: boolean;
|
||||
/**
|
||||
* Label for checkbox
|
||||
*/
|
||||
@@ -23,14 +27,9 @@ export interface CheckboxProps
|
||||
}
|
||||
|
||||
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
const {
|
||||
inputProps,
|
||||
errorId,
|
||||
showErrorMsg,
|
||||
hasError,
|
||||
size,
|
||||
inputDescriptionId,
|
||||
} = useCheckbox(props);
|
||||
const { inputProps, hasError, size } = useCheckbox(props);
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -40,8 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
`navds-checkbox--${size}`,
|
||||
{
|
||||
"navds-checkbox--error": hasError,
|
||||
"navds-checkbox--with-error-message": showErrorMsg,
|
||||
"navds-checkbox--with-description": !!props.description,
|
||||
"navds-checkbox--disabled": inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
@@ -50,7 +48,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
"children",
|
||||
"size",
|
||||
"error",
|
||||
"errorId",
|
||||
"description",
|
||||
"hideLabel",
|
||||
])}
|
||||
@@ -58,30 +55,26 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
className="navds-checkbox__input"
|
||||
ref={ref}
|
||||
/>
|
||||
<BodyShort
|
||||
as="label"
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
className="navds-checkbox__label"
|
||||
>
|
||||
{props.hideLabel ? (
|
||||
<span className="sr-only">{props.children}</span>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<BodyShort
|
||||
size={size}
|
||||
id={inputDescriptionId}
|
||||
className="navds-checkbox__description"
|
||||
<label htmlFor={inputProps.id} className="navds-checkbox__label">
|
||||
<div
|
||||
className={cl("navds-checkbox__content", {
|
||||
"sr-only": props.hideLabel,
|
||||
})}
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|
||||
</div>
|
||||
<BodyShort as="div" size={size}>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-checkbox__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -12,7 +12,8 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
|
||||
null
|
||||
);
|
||||
|
||||
export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
|
||||
export interface CheckboxGroupProps
|
||||
extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
|
||||
/**
|
||||
* Checkboxes
|
||||
*/
|
||||
|
||||
@@ -49,6 +49,8 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
|
||||
|
||||
## Errors
|
||||
|
||||
Feilmeldinger kan bare settes på gruppa
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
@@ -65,37 +67,23 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
|
||||
</CheckboxGroup>
|
||||
</Canvas>
|
||||
|
||||
## Errors uten errorPropagation
|
||||
Enkelt-checkboxer tar en `boolean` error prop
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Checkboxer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
|
||||
Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup
|
||||
@@ -166,31 +154,15 @@ Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/descrip
|
||||
Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
</Canvas>
|
||||
|
||||
## Disabled
|
||||
@@ -206,7 +178,7 @@ NOTE: Husk at disabled bør unngås!
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
|
||||
<CheckboxGroup legend="Mollit eiusmod" >
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" disabled>Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
|
||||
@@ -7,90 +7,63 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
const Checkboxes = (props) => (
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
description="Exercitation do labore"
|
||||
{...props}
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Banana" description={<div>Laborum ad</div>}>
|
||||
Banana
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Checkboxes</h1>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>description</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
description="Exercitation do labore"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>error</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>error uten errorPropagation</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>Sizing</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
error="Boks nr 2 må være valgt"
|
||||
size="small"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>defaultValue</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>hideLenged</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>hideLabel</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>Disabled</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" disabled>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" disabled>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h1>Checkbox</h1>
|
||||
<h2>Single checkbox</h2>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<h3>Desription</h3>
|
||||
<Checkbox value="Apple" description="Laborum ad" defaultChecked>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<h3>Error</h3>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Apple" error defaultChecked>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<h3>Hide label</h3>
|
||||
<Checkbox value="Apple" hideLabel description="Laborum ad">
|
||||
Apple
|
||||
</Checkbox>
|
||||
<h3>Disabled</h3>
|
||||
<Checkbox value="Apple" disabled>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
|
||||
Orange
|
||||
</Checkbox>
|
||||
|
||||
<h2>Checkbox group</h2>
|
||||
<Checkboxes />
|
||||
<h3>Error</h3>
|
||||
<Checkboxes error="Dette er en feilmelding" />
|
||||
<h3>Small</h3>
|
||||
<Checkboxes size="small" />
|
||||
<h3>Small + error</h3>
|
||||
<Checkboxes size="small" error="Dette er en feilmelding" />
|
||||
<h3>Default value</h3>
|
||||
<Checkboxes defaultValue={["Orange", "Melon"]} />
|
||||
<h3>Disabled</h3>
|
||||
<Checkboxes disabled />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import { useContext } from "react";
|
||||
import { CheckboxProps } from "../..";
|
||||
import { useFormField } from "../useFormField";
|
||||
import { CheckboxGroupContext } from "./CheckboxGroup";
|
||||
import { omit } from "../..";
|
||||
|
||||
/**
|
||||
* Handles props for Checkboxes in context with Fieldset and CheckboxGroup
|
||||
@@ -9,7 +10,10 @@ import { CheckboxGroupContext } from "./CheckboxGroup";
|
||||
const useCheckbox = ({ children, ...props }: CheckboxProps) => {
|
||||
const checkboxGroup = useContext(CheckboxGroupContext);
|
||||
|
||||
const { inputProps, ...rest } = useFormField(props, "checkbox");
|
||||
const { inputProps, ...rest } = useFormField(
|
||||
omit(props, ["description"]),
|
||||
"checkbox"
|
||||
);
|
||||
|
||||
if (checkboxGroup) {
|
||||
if (props.checked) {
|
||||
|
||||
@@ -1,70 +1,56 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyShort, omit } from "../..";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { BodyShort, Detail, omit } from "../..";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useRadio } from "./useRadio";
|
||||
|
||||
export interface RadioProps
|
||||
extends FormFieldProps,
|
||||
extends Omit<FormFieldProps, "error" | "errorId">,
|
||||
Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
||||
/**
|
||||
* Label for radio
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* The value of the HTML element
|
||||
*/
|
||||
value: string;
|
||||
}
|
||||
|
||||
const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
const {
|
||||
inputProps,
|
||||
errorId,
|
||||
showErrorMsg,
|
||||
size,
|
||||
hasError,
|
||||
inputDescriptionId,
|
||||
} = useRadio(props);
|
||||
const { inputProps, size, hasError } = useRadio(props);
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
|
||||
"navds-radio--error": hasError,
|
||||
"navds-radio--with-error-message": showErrorMsg,
|
||||
"navds-radio--with-description": !!props.description,
|
||||
"navds-radio--disabled": inputProps.disabled,
|
||||
})}
|
||||
>
|
||||
<input
|
||||
{...omit(props, [
|
||||
"children",
|
||||
"size",
|
||||
"error",
|
||||
"errorId",
|
||||
"description",
|
||||
])}
|
||||
{...omit(props, ["children", "size", "description"])}
|
||||
{...inputProps}
|
||||
className="navds-radio__input"
|
||||
ref={ref}
|
||||
/>
|
||||
<BodyShort
|
||||
as="label"
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
className="navds-radio__label"
|
||||
>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<BodyShort
|
||||
size={size}
|
||||
id={inputDescriptionId}
|
||||
className="navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|
||||
</div>
|
||||
<label htmlFor={inputProps.id} className="navds-radio__label">
|
||||
<div className="navds-radio__content">
|
||||
<BodyShort as="div" size={size}>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -15,7 +15,8 @@ export const RadioGroupContext = React.createContext<RadioGroupContextProps | nu
|
||||
null
|
||||
);
|
||||
|
||||
export interface RadioGroupProps extends Omit<FieldsetProps, "onChange"> {
|
||||
export interface RadioGroupProps
|
||||
extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
|
||||
/**
|
||||
* Collection of <Radio>-elements
|
||||
*/
|
||||
|
||||
@@ -49,6 +49,8 @@ Man kan både sette en description på RadioGroup og selve Radio
|
||||
|
||||
## Errors
|
||||
|
||||
Feilmeldinger kan bare settes på gruppa
|
||||
|
||||
```jsx
|
||||
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
@@ -65,37 +67,9 @@ Man kan både sette en description på RadioGroup og selve Radio
|
||||
</RadioGroup>
|
||||
</Canvas>
|
||||
|
||||
## Errors uten errorPropagation
|
||||
|
||||
```jsx
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Radioer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
|
||||
Radioknapper har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
||||
|
||||
```jsx
|
||||
<RadioGroup
|
||||
|
||||
@@ -7,75 +7,47 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
const Radios = (props) => (
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
description={<div>"Exercitation do labore"</div>}
|
||||
{...props}
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Orange" description={<div>Laborum ad</div>}>
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Radios</h1>
|
||||
<RadioGroup legend="Mollit eiusmod">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>description</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>error</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>error uten errorPropagation</h2>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>Sizing</h2>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
error="Boks nr 2 må være valgt"
|
||||
size="small"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>defaultValue</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>hideLenged</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h1>Radio group</h1>
|
||||
<Radios />
|
||||
<h2>Error</h2>
|
||||
<Radios error="Dette er en feilmelding" />
|
||||
<h2>Small</h2>
|
||||
<Radios size="small" />
|
||||
<h2>Small + error</h2>
|
||||
<Radios size="small" error="Dette er en feilmelding" />
|
||||
<h2>Default value</h2>
|
||||
<Radios defaultValue="Orange" />
|
||||
<h2>Disabled</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" disabled>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<RadioGroup legend="Mollit eiusmod">
|
||||
<RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
||||
<Radio value="Apple" disabled>
|
||||
Apple
|
||||
</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Orange" description="Laborum ad" disabled>
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>Disabled group</h2>
|
||||
<Radios disabled />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import { useContext } from "react";
|
||||
import { useFormField } from "../useFormField";
|
||||
import { RadioProps } from "./Radio";
|
||||
import { RadioGroupContext } from "./RadioGroup";
|
||||
import { omit } from "../..";
|
||||
|
||||
/**
|
||||
* Handles props for Radios in context with Fieldset and RadioGroup
|
||||
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
|
||||
export const useRadio = (props: RadioProps) => {
|
||||
const radioGroup = useContext(RadioGroupContext);
|
||||
|
||||
const { inputProps, ...rest } = useFormField(props, "radio");
|
||||
const { inputProps, ...rest } = useFormField(
|
||||
omit(props, ["description"]),
|
||||
"radio"
|
||||
);
|
||||
|
||||
if (!radioGroup) {
|
||||
console.warn("<Radio> must be used inside <RadioGroup>.");
|
||||
|
||||
@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size ?? "medium"}`,
|
||||
"navds-search-field",
|
||||
{ "navds-search-field--error": hasError }
|
||||
{
|
||||
"navds-search-field--error": hasError,
|
||||
"navds-search-field--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
@@ -94,6 +97,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
|
||||
@@ -15,7 +15,7 @@ export const All = () => {
|
||||
<h1>SearchField</h1>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
description={<div>Ea cupidatat eu sunt commodo</div>}
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
@@ -170,6 +170,30 @@ export const All = () => {
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
</Fieldset>
|
||||
|
||||
<h2>Disabled </h2>
|
||||
<SearchField
|
||||
disabled
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<Fieldset legend="Filter" disabled>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
error="Errormsg"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Fieldset>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -21,9 +21,13 @@ export const All = () => {
|
||||
|
||||
<Fieldset
|
||||
legend="Mollit eiusmod"
|
||||
description="Quis reprehenderit esse cillum"
|
||||
description={<div>Quis reprehenderit esse cillum</div>}
|
||||
>
|
||||
<TextField label="Textfield label" hideLabel />
|
||||
<TextField
|
||||
label="Textfield label"
|
||||
hideLabel
|
||||
description={<div>Quis reprehenderit esse cillum</div>}
|
||||
/>
|
||||
<TextField label="Textfield label" hideLabel />
|
||||
</Fieldset>
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ export const All = () => {
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<Select label="Ipsum enim quis culpa" description="Aute enim">
|
||||
<Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
|
||||
<option value="">Velg land</option>
|
||||
<option value="norge">Norge</option>
|
||||
<option value="sverige">Sverige</option>
|
||||
|
||||
@@ -15,7 +15,10 @@ export const All = () => {
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<TextField label="Laborum excepteur" description="Cillum mollit" />
|
||||
<TextField
|
||||
label="Laborum excepteur"
|
||||
description={<div>Cillum mollit</div>}
|
||||
/>
|
||||
|
||||
<h2>Passord-type</h2>
|
||||
<TextField label="Passord" type="password" />
|
||||
@@ -52,6 +55,25 @@ export const All = () => {
|
||||
description="Cillum mollit"
|
||||
disabled
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
disabled
|
||||
/>
|
||||
<h2>Readonly</h2>
|
||||
|
||||
<TextField
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
readOnly
|
||||
/>
|
||||
<TextField
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
size="small"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -23,7 +23,7 @@ export const All = () => {
|
||||
|
||||
<Textarea
|
||||
label="In anim elit"
|
||||
description="Reprehenderit esse proident"
|
||||
description={<div>Reprehenderit esse proident</div>}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
@@ -78,7 +78,17 @@ export const All = () => {
|
||||
description="Reprehenderit esse proident"
|
||||
maxLength={400}
|
||||
disabled
|
||||
value={value}
|
||||
value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<h2>Readonly</h2>
|
||||
|
||||
<Textarea
|
||||
label="In anim elit"
|
||||
description="Reprehenderit esse proident"
|
||||
maxLength={400}
|
||||
readOnly
|
||||
value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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",
|
||||
@@ -27,7 +27,10 @@
|
||||
"files": [
|
||||
{
|
||||
"destination": "tokens.css",
|
||||
"format": "css/variables"
|
||||
"format": "css/variables",
|
||||
"options": {
|
||||
"outputReferences": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -41,7 +44,7 @@
|
||||
},
|
||||
{
|
||||
"destination": "tokens-cjs.js",
|
||||
"format": "javascript/module"
|
||||
"format": "javascript/module-flat"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import { writeFileSync } from "fs";
|
||||
import { resolve } from "path";
|
||||
import formatToStyleDictionary from "./format-sd";
|
||||
import globalColorRefs, { ColorT } from "./global-color-ref";
|
||||
import parseName from "./parse-name";
|
||||
|
||||
type FigmaColorsT = {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
const parseColors = async (figmaColors: FigmaColorsT) => {
|
||||
/* Parse name and color into correct format */
|
||||
const colors: ColorT[] = Object.entries(figmaColors)
|
||||
.map(([key, value]) => ({
|
||||
name: parseName(key),
|
||||
color: value,
|
||||
}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.reverse();
|
||||
|
||||
/* Make semantic colors reference global colors */
|
||||
const colorsWithRef = globalColorRefs(colors).reduce(
|
||||
(old, color) => ({ [color.name]: color.color, ...old }),
|
||||
{}
|
||||
);
|
||||
|
||||
const styleDictionaryFormat = formatToStyleDictionary(colorsWithRef, "color");
|
||||
|
||||
writeFileSync(
|
||||
resolve("./src/colors.json"),
|
||||
JSON.stringify(styleDictionaryFormat, null, 2)
|
||||
);
|
||||
};
|
||||
|
||||
export default parseColors;
|
||||
@@ -0,0 +1,26 @@
|
||||
import unifyNestedLevel from "./unify-nested-level";
|
||||
|
||||
const deepen = (obj: { [key: string]: { value: string } }) => {
|
||||
const result = {};
|
||||
|
||||
const workObj = unifyNestedLevel(obj);
|
||||
|
||||
// For each object path (property key) in the object
|
||||
for (const objectPath in workObj) {
|
||||
// Split path into component parts
|
||||
const parts = objectPath.split("-");
|
||||
|
||||
// Create sub-objects along path as needed
|
||||
let target = result;
|
||||
while (parts.length > 1) {
|
||||
const part = parts.shift();
|
||||
target = target[part] = target[part] || {};
|
||||
}
|
||||
// Set value at end of path
|
||||
target[parts[0]] = workObj[objectPath];
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export default deepen;
|
||||
@@ -0,0 +1,46 @@
|
||||
import Axios from "axios";
|
||||
const { create } = Axios;
|
||||
const dotenv = require("dotenv");
|
||||
dotenv.config();
|
||||
|
||||
const FIGMA_FILE = "m0qpSPpsnNC9DwdmerGqJH";
|
||||
|
||||
const FigmaAxion = (token) =>
|
||||
create({
|
||||
headers: {
|
||||
"X-FIGMA-TOKEN": token,
|
||||
},
|
||||
});
|
||||
|
||||
export const fetchFile = async () => {
|
||||
const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(`https://api.figma.com/v1/files/${FIGMA_FILE}`)
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
export const fetchFileStyles = async () => {
|
||||
const {
|
||||
data: {
|
||||
meta: { styles },
|
||||
},
|
||||
} = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(`https://api.figma.com/v1/files/${FIGMA_FILE}/styles`)
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
});
|
||||
return styles;
|
||||
};
|
||||
|
||||
export const fetchSyncDocument = async () => {
|
||||
const {
|
||||
data: { document },
|
||||
} = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(`https://api.figma.com/v1/files/A7fbghTh75Hk65SieEhaKK`)
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
});
|
||||
return document;
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Node, DOCUMENT } from "figma-api";
|
||||
import paintToRgba from "./paint-to-rgba";
|
||||
|
||||
interface StyleId {
|
||||
id: string;
|
||||
styleType: "TEXT" | "FILL";
|
||||
}
|
||||
|
||||
const styleFieldNames = {
|
||||
TEXT: ["text"],
|
||||
FILL: ["fill", "fills", "stroke", "strokes"],
|
||||
};
|
||||
|
||||
const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
|
||||
if (
|
||||
node.hasOwnProperty("styles") &&
|
||||
styleFieldNames[styleId.styleType]?.some(
|
||||
(name) => node.styles[name] === styleId.id
|
||||
)
|
||||
) {
|
||||
return node;
|
||||
} else if (node.children) {
|
||||
for (const child of node.children) {
|
||||
const res = findNodeWithStyle(child, styleId);
|
||||
if (res) {
|
||||
return res;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const findStyleValue = (document: DOCUMENT, styleId: StyleId) => {
|
||||
const node = findNodeWithStyle(document, styleId);
|
||||
if (styleId.id === "5249:11258") {
|
||||
}
|
||||
|
||||
switch (styleId.styleType) {
|
||||
case "FILL":
|
||||
if (node) {
|
||||
if (
|
||||
node.styles.stroke === styleId.id ||
|
||||
node.styles.strokes === styleId.id
|
||||
) {
|
||||
return paintToRgba(node.strokes[0]);
|
||||
} else {
|
||||
return paintToRgba(node.fills[0]);
|
||||
}
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
case "TEXT":
|
||||
if (node) {
|
||||
return node?.style;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styleTypeName = {
|
||||
FILL: "colors",
|
||||
TEXT: "textStyles",
|
||||
};
|
||||
|
||||
const getFileStyles = (file, fileStyles) =>
|
||||
fileStyles.reduce(
|
||||
(styles, { node_id: id, style_type: styleType, name }) => ({
|
||||
...styles,
|
||||
[styleTypeName[styleType]]: {
|
||||
...styles[styleTypeName[styleType]],
|
||||
[name]: findStyleValue(file.document, { id, styleType }),
|
||||
},
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
export default getFileStyles;
|
||||
@@ -0,0 +1,35 @@
|
||||
import deepen from "./deepen";
|
||||
|
||||
const formatToStyleDictionary = (
|
||||
colors: { [key: string]: string },
|
||||
type: "color" | "spacing"
|
||||
) => {
|
||||
switch (type) {
|
||||
case "color": {
|
||||
return deepen(
|
||||
Object.entries(colors).reduce(
|
||||
(old, [key, val]) =>
|
||||
val.startsWith("rgba")
|
||||
? { ...old, [key]: { value: val } }
|
||||
: {
|
||||
...old,
|
||||
[key]: { value: `{${val.replace(/-/g, ".")}.value}` },
|
||||
},
|
||||
{}
|
||||
)
|
||||
);
|
||||
}
|
||||
case "spacing": {
|
||||
return deepen(
|
||||
Object.entries(colors).reduce(
|
||||
(old, [key, val]) => ({ ...old, [key]: { value: val } }),
|
||||
{}
|
||||
)
|
||||
);
|
||||
}
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
export default formatToStyleDictionary;
|
||||
@@ -0,0 +1,21 @@
|
||||
import Color from "color";
|
||||
|
||||
export type ColorT = {
|
||||
name: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
const globalColorRefs = (colors: ColorT[]) => {
|
||||
const globalColors = colors.filter((c) => c.name.includes("-global-"));
|
||||
|
||||
return colors.map((c) => {
|
||||
if (c.name.includes("-global-")) return c;
|
||||
|
||||
const globalColor = globalColors.find(
|
||||
(g) => Color(g.color).string() === Color(c.color).string()
|
||||
);
|
||||
return globalColor ? { name: c.name, color: globalColor.name } : c;
|
||||
});
|
||||
};
|
||||
|
||||
export default globalColorRefs;
|
||||
@@ -0,0 +1,28 @@
|
||||
import dotenv from "dotenv";
|
||||
import parseColors from "./colors";
|
||||
import getFileStyles from "./file-styles";
|
||||
import { fetchFile, fetchFileStyles, fetchSyncDocument } from "./fetch";
|
||||
/* import Spacing from "./spacing"; */
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const main = async () => {
|
||||
await Promise.all([fetchFile(), fetchFileStyles(), fetchSyncDocument()])
|
||||
.then(([file, styles, document]) => {
|
||||
const parsedStyles = getFileStyles(file, styles);
|
||||
parsedStyles.colors && parseColors(parsedStyles.colors);
|
||||
|
||||
// TODO: Get spacing by crawling like with colors
|
||||
/* Spacing(document); */
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("Failed fetching styles and file from figma");
|
||||
throw e;
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
main();
|
||||
} catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Paint } from "figma-api";
|
||||
|
||||
const parseColor = ({ color, opacity }: Paint) => {
|
||||
return `rgba(${Math.round(color.r * 255)}, ${Math.round(
|
||||
color.g * 255
|
||||
)}, ${Math.round(color.b * 255)}, ${
|
||||
opacity !== undefined ? Math.round(opacity * 100) / 100 : 1
|
||||
})`;
|
||||
};
|
||||
|
||||
export default parseColor;
|
||||
@@ -0,0 +1,6 @@
|
||||
const parseName = (name: string) => {
|
||||
const [scope, ...rest] = name.toLowerCase().split("/");
|
||||
return `navds-${scope}-color-${rest.join("-")}`;
|
||||
};
|
||||
|
||||
export default parseName;
|
||||
@@ -0,0 +1,47 @@
|
||||
import { CANVAS, DOCUMENT, FRAME, RECTANGLE } from "figma-api";
|
||||
import formatToStyleDictionary from "./format-sd";
|
||||
import { writeFileSync } from "fs";
|
||||
import { resolve } from "path";
|
||||
|
||||
const Spacing = (document: DOCUMENT) => {
|
||||
console.log("Updating spacing-tokens");
|
||||
|
||||
const spacingPage = document.children.find(
|
||||
(c) => c.name === "Spacing"
|
||||
) as CANVAS;
|
||||
|
||||
if (!spacingPage) {
|
||||
throw new Error("Could not find spacing-page in document");
|
||||
}
|
||||
|
||||
const spacingFrame = spacingPage.children.find(
|
||||
(x) => x.name === "spacing"
|
||||
) as FRAME;
|
||||
|
||||
if (!spacingFrame) {
|
||||
throw new Error("Could not find spacing-frame in document");
|
||||
}
|
||||
|
||||
const spaces = spacingFrame.children
|
||||
.filter((x) => x.type === "RECTANGLE" && x.name.startsWith("spacing-"))
|
||||
.reduce(
|
||||
(old, space) => ({
|
||||
...old,
|
||||
[`navds-${space.name}`]: `${
|
||||
(space as RECTANGLE).absoluteBoundingBox.width / 16
|
||||
}rem`,
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
const styleDictionaryFormat = formatToStyleDictionary(spaces, "spacing");
|
||||
|
||||
writeFileSync(
|
||||
resolve("./src/spacing.json"),
|
||||
JSON.stringify(styleDictionaryFormat, null, 2)
|
||||
);
|
||||
|
||||
console.log("Finished updating spacing-tokens\n");
|
||||
};
|
||||
|
||||
export default Spacing;
|
||||
@@ -0,0 +1,53 @@
|
||||
import deepen from "../deepen";
|
||||
|
||||
describe("Check deepen parsing of key name", () => {
|
||||
test("Convert spacing", () => {
|
||||
expect(
|
||||
deepen({
|
||||
"navds-spacing-1": { value: "0.25rem" },
|
||||
"navds-spacing-2": { value: "0.50rem" },
|
||||
"navds-spacing-3": { value: "0.75rem" },
|
||||
})
|
||||
).toEqual({
|
||||
navds: {
|
||||
spacing: {
|
||||
"1": { value: "0.25rem" },
|
||||
"2": { value: "0.50rem" },
|
||||
"3": { value: "0.75rem" },
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("Convert colors", () => {
|
||||
expect(
|
||||
deepen({
|
||||
"navds-global-color-red-100": { value: "rbga(0,1,0,0)" },
|
||||
"navds-global-color-green-100": { value: "rbga(0,4,0,0)" },
|
||||
"navds-global-color-green-200": { value: "rbga(0,5,0,0)" },
|
||||
"navds-semantic-color-border": { value: "rbga(0,10,0,0)" },
|
||||
"navds-semantic-color-background": { value: "rbga(0,11,0,0)" },
|
||||
})
|
||||
).toEqual({
|
||||
navds: {
|
||||
global: {
|
||||
color: {
|
||||
red: {
|
||||
"100": { value: "rbga(0,1,0,0)" },
|
||||
},
|
||||
green: {
|
||||
"100": { value: "rbga(0,4,0,0)" },
|
||||
"200": { value: "rbga(0,5,0,0)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
semantic: {
|
||||
color: {
|
||||
border: { value: "rbga(0,10,0,0)" },
|
||||
background: { value: "rbga(0,11,0,0)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
[
|
||||
{
|
||||
"key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
|
||||
"file_key": "0mfgBpI1SEf32yYXo5efgf",
|
||||
"node_id": "1:5",
|
||||
"style_type": "TEXT",
|
||||
"thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/vzj/ib4/z0B6PeiKmHxp5c6U/style_thumbnail_4.png?Expires=1636329600&Signature=UHMortZ3iu3smP3gjEZD9GdqIoADlILTQmP0AhrpcxwiN5S6GOBR9IcsWGqF6MvRxgZoqn5OctEM0GAC86QK2ed88j1u~bunEcbjK7-GPOiZJzxZ0~DkFOQpYyBQVqm~vTSXcOaWKHldJlrKXz4fUxeIeklygu~N7d1if5P1id9iikHrMODwiM6SMCjn09nwlXClVYAdzrt-F-o0J9fZ6nu9Vu7eKt-lKvisAQFbit7pqnUtZ9n0IEZLNFRIbWhIN~6hIvwCNhd0lquNFs4RAgWbMEwe7cOdMpzPUM~Vw4z1ChhUYkDrcDjkxuBfIpHyUj2FCQUqHomoCgHNpw97QQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"name": "test-text-style",
|
||||
"description": "",
|
||||
"created_at": "2021-10-26T17:18:57.283Z",
|
||||
"updated_at": "2021-10-26T17:18:57.283Z",
|
||||
"user": {
|
||||
"id": "872810555172448100",
|
||||
"handle": "Andreas Nordahl",
|
||||
"img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
|
||||
},
|
||||
"sort_position": "!"
|
||||
},
|
||||
{
|
||||
"key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
|
||||
"file_key": "0mfgBpI1SEf32yYXo5efgf",
|
||||
"node_id": "1:3",
|
||||
"style_type": "FILL",
|
||||
"thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/12q/5sp/wUcwiMEw4aN4noCs/style_thumbnail_3.png?Expires=1636329600&Signature=Z~1e2~wSQh2zWxf4pv1Z-vNsdYJVYa92vfuSwRlyOYlZGbtiSNN7MbyAFIrdcOicw1MJ-D8cJUT-nifAiD3BVQah9l~A3w~qHEhqgkKy5IP7-f34NX-MxnmxSGg4H5bWLvjGj4sa8SaqsWdugyteV0RejV0--qJCpRSoDdG0aMNa8hiehoxtJGSr8wCTCVENRb0fXAlYHtJDSbW9Ddok-LAUBdlXP0gO44MNKCuL~LQ9yz-MntiT5FGgq1bmA3e530l86cRnG9Ravgl~vgozJN7D4eF~msgH7l8T3S7SLXgy7ZpAmZ81eYYl2F2eqxlVHOAQu5s15f1L1kNjHmhfxg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"name": "test-color-style",
|
||||
"description": "",
|
||||
"created_at": "2021-10-26T17:18:57.279Z",
|
||||
"updated_at": "2021-10-26T17:18:57.279Z",
|
||||
"user": {
|
||||
"id": "872810555172448100",
|
||||
"handle": "Andreas Nordahl",
|
||||
"img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
|
||||
},
|
||||
"sort_position": "\""
|
||||
},
|
||||
{
|
||||
"key": "b5548b234042939980688e7130cccc5e33f717e8",
|
||||
"file_key": "0mfgBpI1SEf32yYXo5efgf",
|
||||
"node_id": "2:6",
|
||||
"style_type": "FILL",
|
||||
"thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/kyd/RB9/NkuKodQ2JxOFJAvH/style_thumbnail_2.png?Expires=1636329600&Signature=V1BXHDoHkAIBg-V1KpQzQhFPqO5nSVjJyZY7WOTigBynJ7jlf7QGxzJoefOEUHPKOVgtEs-9qXPABp9REBQ2kWXq21D08313VPkCBFDpXil1FHOW4bS1ogoFw4lZKQppHVNcNWnAxcm9Kt2NyiM1egR-SJX47r9W6v0ydIyvbOtvSds04nugHuEt-L3EC2NPx0TWAFlF-YO3Mqfn8PxikFwuFTQNPlrtiLxs~vcDtdfXiQvhs1McHFC6EhuTho0MJR25RPel1bwzhaOkqKB9IXvccjOx7d-BDcs8jty8cccbNimNO2CPJ5Bf4GuUqF2pDA5QHj9xr98aaVk-yepy8A__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"name": "red-see-through",
|
||||
"description": "",
|
||||
"created_at": "2021-10-26T17:18:57.276Z",
|
||||
"updated_at": "2021-10-26T17:18:57.276Z",
|
||||
"user": {
|
||||
"id": "872810555172448100",
|
||||
"handle": "Andreas Nordahl",
|
||||
"img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
|
||||
},
|
||||
"sort_position": "#"
|
||||
},
|
||||
{
|
||||
"key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
|
||||
"file_key": "0mfgBpI1SEf32yYXo5efgf",
|
||||
"node_id": "3:12",
|
||||
"style_type": "FILL",
|
||||
"thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/SCW/gWi/dNc5At7iWR4CmFxB/style_thumbnail_1.png?Expires=1636329600&Signature=RqsSEZMyvH-h6~X~xBL2Y4R0gnASnbXBHswjxGdqsx1YhBXkixKBO~--zG4TX-OT5cp4BXigXkHYvpd6AWazBuPdnAoN45MgZwv~qz8pgfRcRzUtJCtxnTzaKUQiLkR1Ln5AISUX7efr9KqVN4aDiagaZUXbVfyA7lnDVNbWPe6WN9f80DaIy5N6C4-lcpJWCWGCuLVkKAvI~ZI0L5qz6zJhpnQ~Rig0jn7gMidAQ92P6RvC4KTJREhCBYxPa4m1zsQg43wE4VGk75t-sWTs2On7j4k7754FRfmv1dHkGWuqk5MRaYaWOm8JzR1T2ln2pJYQzlz5wIhfPBtlMkptKA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"name": "stroke-color-style",
|
||||
"description": "",
|
||||
"created_at": "2021-10-26T17:18:57.272Z",
|
||||
"updated_at": "2021-10-26T17:18:57.272Z",
|
||||
"user": {
|
||||
"id": "872810555172448100",
|
||||
"handle": "Andreas Nordahl",
|
||||
"img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
|
||||
},
|
||||
"sort_position": "$"
|
||||
},
|
||||
{
|
||||
"key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
|
||||
"file_key": "0mfgBpI1SEf32yYXo5efgf",
|
||||
"node_id": "3:15",
|
||||
"style_type": "FILL",
|
||||
"thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/dNp/kEC/VltRP5wczk9nIaJx/style_thumbnail_0.png?Expires=1636329600&Signature=c~j1TRW0Wvxn-ZZkNzk1NJQeymLJ3BJ5qvh~t8Cy8vwYLgxwVz0tz6LomPlwcNmx3xfv6TetosqudMzawSKbd3VBsRfACE84u4TNY7kTBsFkUkeI8JM~00g4LZJC9ESqB4VWIXcK1w0l6tAMdjHtJ8SRER9yF~t7N2sqebq4hOiuwTT1ZcpxpGhnAdRJGJfQt1kxbniryjWQfiadXLEIrHw25pEX0VbFJ2EAn9IL3Jhl2d49TBSE2MEZ5ht-1qU6m9Lnj1Hex3sU-EiS8DhDAeb~twtE7mGiPlXoXRSFUcpkB4EPS5wOa4D4wpq8G85MW3XlpNH08s6N5qG1x66-BQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"name": "stroke-color-style-2",
|
||||
"description": "",
|
||||
"created_at": "2021-10-26T17:18:57.267Z",
|
||||
"updated_at": "2021-10-26T17:18:57.267Z",
|
||||
"user": {
|
||||
"id": "872810555172448100",
|
||||
"handle": "Andreas Nordahl",
|
||||
"img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
|
||||
},
|
||||
"sort_position": "%"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,30 @@
|
||||
import file from "./file.json";
|
||||
import fileStyles from "./file-styles.json";
|
||||
import getFileStyles from "../file-styles";
|
||||
|
||||
test("get file styles", () => {
|
||||
expect(getFileStyles(file, fileStyles)).toEqual({
|
||||
colors: {
|
||||
"test-color-style": "rgba(196, 196, 196, 1)",
|
||||
"stroke-color-style": "rgba(84, 138, 83, 1)",
|
||||
"stroke-color-style-2": "rgba(133, 111, 195, 0.69)",
|
||||
"red-see-through": "rgba(219, 16, 16, 0.33)",
|
||||
},
|
||||
textStyles: {
|
||||
"test-text-style": {
|
||||
fontFamily: "Roboto",
|
||||
fontPostScriptName: null,
|
||||
fontWeight: 400,
|
||||
textAutoResize: "WIDTH_AND_HEIGHT",
|
||||
fontSize: 12,
|
||||
textAlignHorizontal: "LEFT",
|
||||
textAlignVertical: "TOP",
|
||||
letterSpacing: 0,
|
||||
lineHeightPx: 20,
|
||||
lineHeightPercent: 142.22222900390625,
|
||||
lineHeightPercentFontSize: 166.6666717529297,
|
||||
lineHeightUnit: "PIXELS",
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,472 @@
|
||||
{
|
||||
"document": {
|
||||
"id": "0:0",
|
||||
"name": "Document",
|
||||
"type": "DOCUMENT",
|
||||
"children": [
|
||||
{
|
||||
"id": "0:1",
|
||||
"name": "Page 1",
|
||||
"type": "CANVAS",
|
||||
"children": [
|
||||
{
|
||||
"id": "1:2",
|
||||
"name": "Rectangle 1",
|
||||
"type": "RECTANGLE",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"absoluteBoundingBox": {
|
||||
"x": -208,
|
||||
"y": -113,
|
||||
"width": 219,
|
||||
"height": 119
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.7686274647712708,
|
||||
"g": 0.7686274647712708,
|
||||
"b": 0.7686274647712708,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"styles": {
|
||||
"fills": "1:3"
|
||||
},
|
||||
"effects": []
|
||||
},
|
||||
{
|
||||
"id": "1:4",
|
||||
"name": "A Text",
|
||||
"type": "TEXT",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"absoluteBoundingBox": {
|
||||
"x": -224,
|
||||
"y": 170,
|
||||
"width": 34,
|
||||
"height": 20
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0,
|
||||
"g": 0,
|
||||
"b": 0,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "OUTSIDE",
|
||||
"effects": [],
|
||||
"characters": "A Text",
|
||||
"style": {
|
||||
"fontFamily": "Roboto",
|
||||
"fontPostScriptName": null,
|
||||
"fontWeight": 400,
|
||||
"textAutoResize": "WIDTH_AND_HEIGHT",
|
||||
"fontSize": 12,
|
||||
"textAlignHorizontal": "LEFT",
|
||||
"textAlignVertical": "TOP",
|
||||
"letterSpacing": 0,
|
||||
"lineHeightPx": 20,
|
||||
"lineHeightPercent": 142.22222900390625,
|
||||
"lineHeightPercentFontSize": 166.6666717529297,
|
||||
"lineHeightUnit": "PIXELS"
|
||||
},
|
||||
"layoutVersion": 3,
|
||||
"characterStyleOverrides": [],
|
||||
"styleOverrideTable": {},
|
||||
"styles": {
|
||||
"text": "1:5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "3:14",
|
||||
"name": "Frame 1",
|
||||
"type": "FRAME",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"children": [
|
||||
{
|
||||
"id": "3:13",
|
||||
"name": "Rectangle 2",
|
||||
"type": "RECTANGLE",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"absoluteBoundingBox": {
|
||||
"x": 58,
|
||||
"y": 360,
|
||||
"width": 257,
|
||||
"height": 166
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.7686274647712708,
|
||||
"g": 0.7686274647712708,
|
||||
"b": 0.7686274647712708,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [
|
||||
{
|
||||
"opacity": 0.6899999976158142,
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.5208221077919006,
|
||||
"g": 0.4344444274902344,
|
||||
"b": 0.7666666507720947,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"styles": {
|
||||
"stroke": "3:15"
|
||||
},
|
||||
"effects": []
|
||||
}
|
||||
],
|
||||
"absoluteBoundingBox": {
|
||||
"x": -149,
|
||||
"y": 310,
|
||||
"width": 502,
|
||||
"height": 401
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"clipsContent": true,
|
||||
"background": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"backgroundColor": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
},
|
||||
"effects": []
|
||||
}
|
||||
],
|
||||
"backgroundColor": {
|
||||
"r": 0.8980392217636108,
|
||||
"g": 0.8980392217636108,
|
||||
"b": 0.8980392217636108,
|
||||
"a": 1
|
||||
},
|
||||
"prototypeStartNodeID": null,
|
||||
"flowStartingPoints": [],
|
||||
"prototypeDevice": {
|
||||
"type": "NONE",
|
||||
"rotation": "NONE"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2:7",
|
||||
"name": "Page 2",
|
||||
"type": "CANVAS",
|
||||
"children": [
|
||||
{
|
||||
"id": "2:8",
|
||||
"name": "Frame 1",
|
||||
"type": "FRAME",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"children": [
|
||||
{
|
||||
"id": "2:9",
|
||||
"name": "Group 1",
|
||||
"type": "GROUP",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"children": [
|
||||
{
|
||||
"id": "2:10",
|
||||
"name": "Rectangle 2",
|
||||
"type": "RECTANGLE",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"absoluteBoundingBox": {
|
||||
"x": -137,
|
||||
"y": -79,
|
||||
"width": 219,
|
||||
"height": 119
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"fills": [
|
||||
{
|
||||
"opacity": 0.33000001311302185,
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.8583333492279053,
|
||||
"g": 0.060798585414886475,
|
||||
"b": 0.060798585414886475,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.3293333053588867,
|
||||
"g": 0.5416666865348816,
|
||||
"b": 0.32499998807907104,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"styles": {
|
||||
"fill": "2:6"
|
||||
},
|
||||
"effects": []
|
||||
},
|
||||
{
|
||||
"id": "2:11",
|
||||
"name": "A Text",
|
||||
"type": "TEXT",
|
||||
"blendMode": "PASS_THROUGH",
|
||||
"absoluteBoundingBox": {
|
||||
"x": -72,
|
||||
"y": -26,
|
||||
"width": 34,
|
||||
"height": 20
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0,
|
||||
"g": 0,
|
||||
"b": 0,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 0.3293333053588867,
|
||||
"g": 0.5416666865348816,
|
||||
"b": 0.32499998807907104,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "OUTSIDE",
|
||||
"styles": {
|
||||
"strokes": "3:12",
|
||||
"text": "1:5"
|
||||
},
|
||||
"effects": [],
|
||||
"characters": "A Text",
|
||||
"style": {
|
||||
"fontFamily": "Roboto",
|
||||
"fontPostScriptName": null,
|
||||
"fontWeight": 400,
|
||||
"textAutoResize": "WIDTH_AND_HEIGHT",
|
||||
"fontSize": 12,
|
||||
"textAlignHorizontal": "LEFT",
|
||||
"textAlignVertical": "TOP",
|
||||
"letterSpacing": 0,
|
||||
"lineHeightPx": 20,
|
||||
"lineHeightPercent": 142.22222900390625,
|
||||
"lineHeightPercentFontSize": 166.6666717529297,
|
||||
"lineHeightUnit": "PIXELS"
|
||||
},
|
||||
"layoutVersion": 3,
|
||||
"characterStyleOverrides": [],
|
||||
"styleOverrideTable": {}
|
||||
}
|
||||
],
|
||||
"absoluteBoundingBox": {
|
||||
"x": -137,
|
||||
"y": -79,
|
||||
"width": 219,
|
||||
"height": 119
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"clipsContent": false,
|
||||
"background": [],
|
||||
"fills": [],
|
||||
"strokes": [],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"backgroundColor": {
|
||||
"r": 0,
|
||||
"g": 0,
|
||||
"b": 0,
|
||||
"a": 0
|
||||
},
|
||||
"effects": []
|
||||
}
|
||||
],
|
||||
"absoluteBoundingBox": {
|
||||
"x": -228,
|
||||
"y": -170,
|
||||
"width": 455,
|
||||
"height": 338
|
||||
},
|
||||
"constraints": {
|
||||
"vertical": "TOP",
|
||||
"horizontal": "LEFT"
|
||||
},
|
||||
"clipsContent": true,
|
||||
"background": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"fills": [
|
||||
{
|
||||
"blendMode": "NORMAL",
|
||||
"type": "SOLID",
|
||||
"color": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"strokes": [],
|
||||
"strokeWeight": 1,
|
||||
"strokeAlign": "INSIDE",
|
||||
"backgroundColor": {
|
||||
"r": 1,
|
||||
"g": 1,
|
||||
"b": 1,
|
||||
"a": 1
|
||||
},
|
||||
"effects": []
|
||||
}
|
||||
],
|
||||
"backgroundColor": {
|
||||
"r": 0.8980392217636108,
|
||||
"g": 0.8980392217636108,
|
||||
"b": 0.8980392217636108,
|
||||
"a": 1
|
||||
},
|
||||
"prototypeStartNodeID": null,
|
||||
"flowStartingPoints": [],
|
||||
"prototypeDevice": {
|
||||
"type": "NONE",
|
||||
"rotation": "NONE"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"components": {},
|
||||
"componentSets": {},
|
||||
"schemaVersion": 0,
|
||||
"styles": {
|
||||
"1:3": {
|
||||
"key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
|
||||
"name": "test-color-style",
|
||||
"styleType": "FILL",
|
||||
"description": ""
|
||||
},
|
||||
"1:5": {
|
||||
"key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
|
||||
"name": "test-text-style",
|
||||
"styleType": "TEXT",
|
||||
"description": ""
|
||||
},
|
||||
"3:15": {
|
||||
"key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
|
||||
"name": "stroke-color-style-2",
|
||||
"styleType": "FILL",
|
||||
"description": ""
|
||||
},
|
||||
"2:6": {
|
||||
"key": "b5548b234042939980688e7130cccc5e33f717e8",
|
||||
"name": "red-see-through",
|
||||
"styleType": "FILL",
|
||||
"description": ""
|
||||
},
|
||||
"3:12": {
|
||||
"key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
|
||||
"name": "stroke-color-style",
|
||||
"styleType": "FILL",
|
||||
"description": ""
|
||||
}
|
||||
},
|
||||
"name": "Untitled",
|
||||
"lastModified": "2021-10-25T14:11:38Z",
|
||||
"thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/0mfgBpI1SEf32yYXo5efgf/default?Expires=1636329600&Signature=UTYTy-IQUHP7nzFXJCQoB9ORcA3L0766gsczI2Il~zEcp1XMqZR6AkFCFJA0PSx-nmT3xkkS~wkEbWyK5--ncek6qZsGwA48GPcLf9NH4iViXg7noQFFrEauFYHihs2MJDuRo3YkLo6l5XTbtgJW2lKiP1yqNre91V9IMCyOsW1al-WaBALacZYYO2NOwV76URr8VCeUWhGwfTZcyj6bra40Arx-cw7gv2j3Zuz~c9CiRz42J9gNJpM2Xl2zPp6teEwvNUCMWvoiclcyTPm3g3mSXc5kQeSBTNNTpk46YEQP~XmHUXMu4d~s66d~3xXATV~QrWjAJ7lZQVYz7VBgSA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"version": "1235987453",
|
||||
"role": "owner",
|
||||
"editorType": "figma"
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import formatToStyledDictionary from "../format-sd";
|
||||
|
||||
describe("Check conversion to Styled-dictionary format", () => {
|
||||
test("Converting colors", () => {
|
||||
expect(
|
||||
JSON.stringify(
|
||||
formatToStyledDictionary(
|
||||
{
|
||||
"navds-global-color-red-500": "rgba(1,1,1,1)",
|
||||
"navds-global-color-red-400": "rgba(1,2,1,1)",
|
||||
"navds-global-color-red-300": "rgba(1,3,1,1)",
|
||||
"navds-semantic-color-danger": "navds-global-color-red-400",
|
||||
"navds-semantic-color-danger-hover": "navds-global-color-red-300",
|
||||
},
|
||||
"color"
|
||||
)
|
||||
)
|
||||
).toBe(
|
||||
JSON.stringify({
|
||||
navds: {
|
||||
global: {
|
||||
color: {
|
||||
red: {
|
||||
"500": { value: "rgba(1,1,1,1)" },
|
||||
"400": { value: "rgba(1,2,1,1)" },
|
||||
"300": { value: "rgba(1,3,1,1)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
semantic: {
|
||||
color: {
|
||||
danger: {
|
||||
hover: {
|
||||
value: "{navds.global.color.red.300.value}",
|
||||
},
|
||||
"@": { value: "{navds.global.color.red.400.value}" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
test("Converting spacing", () => {
|
||||
expect(
|
||||
JSON.stringify(
|
||||
formatToStyledDictionary(
|
||||
{
|
||||
"navds-spacing-1": "0.25rem",
|
||||
"navds-spacing-2": "0.5rem",
|
||||
"navds-spacing-3": "0.75rem",
|
||||
"navds-spacing-4": "1rem",
|
||||
},
|
||||
"spacing"
|
||||
)
|
||||
)
|
||||
).toBe(
|
||||
JSON.stringify({
|
||||
navds: {
|
||||
spacing: {
|
||||
"1": { value: "0.25rem" },
|
||||
"2": { value: "0.5rem" },
|
||||
"3": { value: "0.75rem" },
|
||||
"4": { value: "1rem" },
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import globalColorRefs from "../global-color-ref";
|
||||
|
||||
test("Global color refs", () => {
|
||||
let colors = [
|
||||
{ name: "navds-global-color-red-400", color: "#D05C4A" },
|
||||
{ name: "navds-global-color-red-500", color: "#BA3A26" },
|
||||
{ name: "navds-semantic-color-error", color: "#D05C4A" },
|
||||
{ name: "navds-semantic-color-hover", color: "#BA3A26" },
|
||||
{ name: "navds-semantic-color-noref", color: "#AAAAAA" },
|
||||
];
|
||||
|
||||
let parsedColors = [
|
||||
{ name: "navds-global-color-red-400", color: "#D05C4A" },
|
||||
{ name: "navds-global-color-red-500", color: "#BA3A26" },
|
||||
{ name: "navds-semantic-color-error", color: "navds-global-color-red-400" },
|
||||
{ name: "navds-semantic-color-hover", color: "navds-global-color-red-500" },
|
||||
{ name: "navds-semantic-color-noref", color: "#AAAAAA" },
|
||||
];
|
||||
|
||||
const newColors = globalColorRefs(colors);
|
||||
|
||||
expect(JSON.stringify(newColors, null, 2)).toBe(
|
||||
JSON.stringify(parsedColors, null, 2)
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import { PaintType } from "figma-api";
|
||||
import paintToRgba from "../paint-to-rgba";
|
||||
|
||||
describe("parse-color", () => {
|
||||
test("white", () => {
|
||||
expect(
|
||||
paintToRgba({
|
||||
type: PaintType.SOLID,
|
||||
color: {
|
||||
r: 1,
|
||||
g: 1,
|
||||
b: 1,
|
||||
a: 1,
|
||||
},
|
||||
})
|
||||
).toBe("rgba(255, 255, 255, 1)");
|
||||
});
|
||||
|
||||
test("gray", () => {
|
||||
expect(
|
||||
paintToRgba({
|
||||
type: PaintType.SOLID,
|
||||
color: {
|
||||
r: 0.9725490212440491,
|
||||
g: 0.9725490212440491,
|
||||
b: 0.9725490212440491,
|
||||
a: 1,
|
||||
},
|
||||
})
|
||||
).toBe("rgba(248, 248, 248, 1)");
|
||||
});
|
||||
|
||||
test("transparent", () => {
|
||||
expect(
|
||||
paintToRgba({
|
||||
type: PaintType.SOLID,
|
||||
color: {
|
||||
r: 1,
|
||||
g: 1,
|
||||
b: 1,
|
||||
a: 1,
|
||||
},
|
||||
opacity: 0,
|
||||
})
|
||||
).toBe("rgba(255, 255, 255, 0)");
|
||||
});
|
||||
|
||||
test("partly transparent", () => {
|
||||
expect(
|
||||
paintToRgba({
|
||||
type: PaintType.SOLID,
|
||||
color: {
|
||||
r: 0.5208221077919006,
|
||||
g: 0.4344444274902344,
|
||||
b: 0.7666666507720947,
|
||||
a: 1,
|
||||
},
|
||||
opacity: 0.6899999976158142,
|
||||
})
|
||||
).toBe("rgba(133, 111, 195, 0.69)");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
import parseName from "../parse-name";
|
||||
|
||||
test("parse-name", () => {
|
||||
new Map([
|
||||
["Global/blue-500", "navds-global-color-blue-500"],
|
||||
["Global/red-100", "navds-global-color-red-100"],
|
||||
[
|
||||
"Semantic/Interaction/primary-hover",
|
||||
"navds-semantic-color-interaction-primary-hover",
|
||||
],
|
||||
]).forEach((value, key) => expect(parseName(key)).toBe(value));
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import unifyNestedLevel from "../unify-nested-level";
|
||||
|
||||
describe("Check unifying of nested levels", () => {
|
||||
test("Check color nesting", () => {
|
||||
const obj = {
|
||||
"navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
|
||||
"navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
|
||||
"navds-semantic-color-primary-hover": {
|
||||
value: "rbga(0,3,0,0)",
|
||||
},
|
||||
"navds-semantic-color-primary-hover-subtle": {
|
||||
value: "rbga(0,4,0,0)",
|
||||
},
|
||||
"navds-semantic-color-danger": { value: "rbga(0,5,0,0)" },
|
||||
"navds-semantic-color-danger-hover": {
|
||||
value: "rbga(0,6,0,0)",
|
||||
},
|
||||
"navds-semantic-color-danger-hover-subtle": {
|
||||
value: "rbga(0,7,0,0)",
|
||||
},
|
||||
};
|
||||
|
||||
const newObj = unifyNestedLevel(obj);
|
||||
|
||||
expect(newObj).toEqual({
|
||||
"navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
|
||||
"navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
|
||||
"navds-semantic-color-primary-hover-@": {
|
||||
value: "rbga(0,3,0,0)",
|
||||
},
|
||||
"navds-semantic-color-primary-hover-subtle": {
|
||||
value: "rbga(0,4,0,0)",
|
||||
},
|
||||
"navds-semantic-color-danger-@-@": { value: "rbga(0,5,0,0)" },
|
||||
"navds-semantic-color-danger-hover-@": {
|
||||
value: "rbga(0,6,0,0)",
|
||||
},
|
||||
"navds-semantic-color-danger-hover-subtle": {
|
||||
value: "rbga(0,7,0,0)",
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
const unifyNestedLevel = (obj: { [key: string]: { value: string } }) => {
|
||||
// deep copy
|
||||
const workObj = JSON.parse(JSON.stringify(obj));
|
||||
|
||||
Object.keys(workObj).forEach((k) => {
|
||||
const deeperKeys = Object.keys(workObj).filter(
|
||||
(k2) => k2.startsWith(`${k}-`) && k2.length > k.length
|
||||
);
|
||||
if (deeperKeys.length > 0) {
|
||||
const neededNestedLevel =
|
||||
Math.max(...deeperKeys.map((k) => k.split("-").length)) -
|
||||
k.split("-").length;
|
||||
|
||||
delete Object.assign(workObj, {
|
||||
[k + "-@".repeat(neededNestedLevel)]: workObj[k],
|
||||
})[k];
|
||||
}
|
||||
});
|
||||
return workObj;
|
||||
};
|
||||
|
||||
export default unifyNestedLevel;
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
transform: {
|
||||
"^.+\\.ts?$": "ts-jest",
|
||||
},
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "0.5.3",
|
||||
"version": "0.7.0",
|
||||
"private": false,
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -20,7 +20,8 @@
|
||||
"build": "node ./build.js",
|
||||
"watch": "nodemon --watch src/index.js --exec \"yarn build\"",
|
||||
"token": "style-dictionary build",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"update": "ts-node figma/index.ts dotenv/config"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -28,10 +29,14 @@
|
||||
"directory": "@navikt/core/tokens"
|
||||
},
|
||||
"devDependencies": {
|
||||
"color": "^4.0.1",
|
||||
"@types/jest": "^27.0.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"figma-api": "^1.7.0",
|
||||
"jest": "^27.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"nodemon": "^2.0.12",
|
||||
"style-dictionary": "^3.0.2"
|
||||
"style-dictionary": "^3.0.2",
|
||||
"ts-jest": "^27.0.5",
|
||||
"ts-node": "^10.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
{
|
||||
"navds": {
|
||||
"global": {
|
||||
"color": {
|
||||
"blue": {
|
||||
"50": {
|
||||
"value": "rgba(230, 240, 255, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(204, 225, 255, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(153, 195, 255, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(102, 165, 244, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(51, 134, 224, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(0, 103, 197, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(0, 86, 180, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(0, 69, 156, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(0, 52, 125, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(0, 34, 82, 1)"
|
||||
}
|
||||
},
|
||||
"deepblue": {
|
||||
"50": {
|
||||
"value": "rgba(230, 241, 248, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(204, 226, 240, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(153, 196, 221, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(102, 163, 196, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(51, 128, 165, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(0, 91, 130, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(0, 80, 119, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(0, 67, 103, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(0, 52, 83, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(0, 36, 58, 1)"
|
||||
}
|
||||
},
|
||||
"gray": {
|
||||
"50": {
|
||||
"value": "rgba(247, 247, 247, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(241, 241, 241, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(201, 201, 201, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(160, 160, 160, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(106, 106, 106, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(79, 79, 79, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(38, 38, 38, 1)"
|
||||
}
|
||||
},
|
||||
"green": {
|
||||
"50": {
|
||||
"value": "rgba(243, 252, 245, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(204, 241, 214, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(153, 222, 173, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(102, 199, 134, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(51, 170, 95, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(6, 137, 58, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(0, 124, 46, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(0, 106, 35, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(0, 85, 25, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(0, 59, 15, 1)"
|
||||
}
|
||||
},
|
||||
"lightblue": {
|
||||
"50": {
|
||||
"value": "rgba(235, 252, 255, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(216, 249, 255, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(181, 241, 255, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(151, 230, 255, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(124, 218, 248, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(102, 203, 236, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(76, 173, 205, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(54, 141, 168, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(35, 107, 125, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(19, 72, 82, 1)"
|
||||
}
|
||||
},
|
||||
"limegreen": {
|
||||
"50": {
|
||||
"value": "rgba(253, 255, 230, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(249, 252, 204, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(236, 243, 153, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(217, 227, 102, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(193, 203, 51, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(162, 173, 0, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(147, 158, 0, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(127, 137, 0, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(102, 110, 0, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(71, 78, 0, 1)"
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"red": {
|
||||
"value": "rgba(195, 0, 0, 1)"
|
||||
}
|
||||
},
|
||||
"orange": {
|
||||
"50": {
|
||||
"value": "rgba(255, 249, 240, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(255, 236, 204, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(255, 215, 153, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(255, 193, 102, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(255, 170, 51, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(255, 145, 0, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(212, 123, 0, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(168, 100, 0, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(125, 76, 0, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(82, 51, 0, 1)"
|
||||
}
|
||||
},
|
||||
"purple": {
|
||||
"50": {
|
||||
"value": "rgba(239, 236, 244, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(224, 216, 233, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(192, 178, 210, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(161, 141, 187, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(130, 105, 162, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(99, 70, 137, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(82, 56, 116, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(65, 43, 93, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(48, 31, 70, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(31, 20, 47, 1)"
|
||||
}
|
||||
},
|
||||
"red": {
|
||||
"50": {
|
||||
"value": "rgba(253, 232, 230, 1)"
|
||||
},
|
||||
"100": {
|
||||
"value": "rgba(249, 210, 204, 1)"
|
||||
},
|
||||
"200": {
|
||||
"value": "rgba(239, 168, 157, 1)"
|
||||
},
|
||||
"300": {
|
||||
"value": "rgba(225, 128, 113, 1)"
|
||||
},
|
||||
"400": {
|
||||
"value": "rgba(208, 92, 74, 1)"
|
||||
},
|
||||
"500": {
|
||||
"value": "rgba(186, 58, 38, 1)"
|
||||
},
|
||||
"600": {
|
||||
"value": "rgba(163, 42, 23, 1)"
|
||||
},
|
||||
"700": {
|
||||
"value": "rgba(136, 29, 12, 1)"
|
||||
},
|
||||
"800": {
|
||||
"value": "rgba(106, 18, 4, 1)"
|
||||
},
|
||||
"900": {
|
||||
"value": "rgba(72, 9, 0, 1)"
|
||||
}
|
||||
},
|
||||
"transparent": {
|
||||
"value": "rgba(255, 255, 255, 0)"
|
||||
},
|
||||
"white": {
|
||||
"value": "rgba(255, 255, 255, 1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"semantic": {
|
||||
"color": {
|
||||
"border": {
|
||||
"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": {
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
},
|
||||
"light": {
|
||||
"value": "{navds.global.color.white.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.gray.100.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"component": {
|
||||
"background": {
|
||||
"alternate": {
|
||||
"value": "{navds.global.color.gray.50.value}"
|
||||
},
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
},
|
||||
"light": {
|
||||
"value": "{navds.global.color.white.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"divider": {
|
||||
"value": "{navds.global.color.gray.200.value}"
|
||||
},
|
||||
"feedback": {
|
||||
"danger": {
|
||||
"background": {
|
||||
"value": "{navds.global.color.red.100.value}"
|
||||
},
|
||||
"border": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
},
|
||||
"icon": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
},
|
||||
"text": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
}
|
||||
},
|
||||
"info": {
|
||||
"background": {
|
||||
"value": "{navds.global.color.lightblue.100.value}"
|
||||
},
|
||||
"border": {
|
||||
"value": "{navds.global.color.lightblue.700.value}"
|
||||
},
|
||||
"icon": {
|
||||
"value": "{navds.global.color.lightblue.700.value}"
|
||||
}
|
||||
},
|
||||
"success": {
|
||||
"background": {
|
||||
"value": "{navds.global.color.green.100.value}"
|
||||
},
|
||||
"border": {
|
||||
"value": "{navds.global.color.green.500.value}"
|
||||
},
|
||||
"icon": {
|
||||
"value": "{navds.global.color.green.600.value}"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"background": {
|
||||
"value": "{navds.global.color.orange.100.value}"
|
||||
},
|
||||
"border": {
|
||||
"value": "{navds.global.color.orange.600.value}"
|
||||
},
|
||||
"icon": {
|
||||
"value": "{navds.global.color.orange.500.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"focus": {
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.blue.200.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.800.value}"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"danger": {
|
||||
"hover": {
|
||||
"value": "{navds.global.color.red.600.value}"
|
||||
},
|
||||
"selected": {
|
||||
"value": "{navds.global.color.red.700.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.red.500.value}"
|
||||
}
|
||||
},
|
||||
"primary": {
|
||||
"hover": {
|
||||
"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}"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
"visited": {
|
||||
"value": "{navds.global.color.purple.500.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.blue.500.value}"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"inverted": {
|
||||
"value": "{navds.global.color.white.value}"
|
||||
},
|
||||
"muted": {
|
||||
"value": "{navds.global.color.gray.600.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{navds.global.color.gray.900.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,140 +1,8 @@
|
||||
const Color = require("color");
|
||||
|
||||
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: {
|
||||
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: {
|
||||
@@ -172,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": {
|
||||
@@ -208,31 +57,5 @@ module.exports = {
|
||||
popover: { value: 1000 },
|
||||
focus: { value: 10 },
|
||||
},
|
||||
sidebar: {
|
||||
sticky: {
|
||||
offset: { value: "0" },
|
||||
},
|
||||
},
|
||||
spacing: Array(24)
|
||||
.fill(0)
|
||||
.reduce(
|
||||
(spacing, _, index) => ({
|
||||
...spacing,
|
||||
[index + 1]: { value: `${(index + 1) / 4}rem` },
|
||||
}),
|
||||
{}
|
||||
),
|
||||
checkmark: {
|
||||
image: {
|
||||
white: {
|
||||
value:
|
||||
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
|
||||
},
|
||||
blue: {
|
||||
value:
|
||||
"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loaded 100 of 119 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user