Tailwind
Oppdatert 20. mai 2022Designsystemet har en egen tailwind-config for lettere bruk av alle våre tokens. Selve configen er generert basert på tokens i @navikt/ds-tokens
pakken.
Bruk
Basert på hvordan du tar i bruk tailwind kan du legge til @navikt/ds-tailwind
som en preset i tailwind.config.*
filen din.
// tailwind.config.jsmodule.exports = {presets: [require("@navikt/ds-tailwind")]}
Det går dessverre ikke å bruke Tailwind + vår preset med CDN for eks prototyping rett i HTML, men er relativt enkelt å sette opp med postcss slik tailwind har dokumentert .
Config
Merk at color ikke extender tailwind config og overskriver da tailwind sine standard-farger. Configen blir manuelt oppdatert her så kan hende den ikke er i synk. Nyeste oppdaterte versjon kan finnes på jsdelivery .
module.exports = {"theme": {"colors": {"blue-50": "rgba(230, 240, 255, 1)","blue-100": "rgba(204, 225, 255, 1)","blue-200": "rgba(153, 195, 255, 1)","blue-300": "rgba(102, 165, 244, 1)","blue-400": "rgba(51, 134, 224, 1)","blue-500": "rgba(0, 103, 197, 1)","blue-600": "rgba(0, 86, 180, 1)","blue-700": "rgba(0, 69, 156, 1)","blue-800": "rgba(0, 52, 125, 1)","blue-900": "rgba(0, 34, 82, 1)","deepblue-50": "rgba(230, 241, 248, 1)","deepblue-100": "rgba(204, 226, 240, 1)","deepblue-200": "rgba(153, 196, 221, 1)","deepblue-300": "rgba(102, 163, 196, 1)","deepblue-400": "rgba(51, 128, 165, 1)","deepblue-500": "rgba(0, 91, 130, 1)","deepblue-600": "rgba(0, 80, 119, 1)","deepblue-700": "rgba(0, 67, 103, 1)","deepblue-800": "rgba(0, 52, 83, 1)","deepblue-900": "rgba(0, 36, 58, 1)","gray-50": "rgba(247, 247, 247, 1)","gray-100": "rgba(241, 241, 241, 1)","gray-200": "rgba(229, 229, 229, 1)","gray-300": "rgba(207, 207, 207, 1)","gray-400": "rgba(176, 176, 176, 1)","gray-500": "rgba(143, 143, 143, 1)","gray-600": "rgba(112, 112, 112, 1)","gray-700": "rgba(89, 89, 89, 1)","gray-800": "rgba(64, 64, 64, 1)","gray-900": "rgba(38, 38, 38, 1)","green-50": "rgba(243, 252, 245, 1)","green-100": "rgba(204, 241, 214, 1)","green-200": "rgba(153, 222, 173, 1)","green-300": "rgba(102, 199, 134, 1)","green-400": "rgba(51, 170, 95, 1)","green-500": "rgba(6, 137, 58, 1)","green-600": "rgba(0, 124, 46, 1)","green-700": "rgba(0, 106, 35, 1)","green-800": "rgba(0, 85, 25, 1)","green-900": "rgba(0, 59, 15, 1)","lightblue-50": "rgba(235, 252, 255, 1)","lightblue-100": "rgba(216, 249, 255, 1)","lightblue-200": "rgba(181, 241, 255, 1)","lightblue-300": "rgba(151, 230, 255, 1)","lightblue-400": "rgba(124, 218, 248, 1)","lightblue-500": "rgba(102, 203, 236, 1)","lightblue-600": "rgba(76, 173, 205, 1)","lightblue-700": "rgba(54, 141, 168, 1)","lightblue-800": "rgba(35, 107, 125, 1)","lightblue-900": "rgba(19, 72, 82, 1)","limegreen-50": "rgba(253, 255, 230, 1)","limegreen-100": "rgba(249, 252, 204, 1)","limegreen-200": "rgba(236, 243, 153, 1)","limegreen-300": "rgba(217, 227, 102, 1)","limegreen-400": "rgba(193, 203, 51, 1)","limegreen-500": "rgba(162, 173, 0, 1)","limegreen-600": "rgba(147, 158, 0, 1)","limegreen-700": "rgba(127, 137, 0, 1)","limegreen-800": "rgba(102, 110, 0, 1)","limegreen-900": "rgba(71, 78, 0, 1)","nav-red": "rgba(195, 0, 0, 1)","orange-50": "rgba(255, 249, 240, 1)","orange-100": "rgba(255, 236, 204, 1)","orange-200": "rgba(255, 215, 153, 1)","orange-300": "rgba(255, 193, 102, 1)","orange-400": "rgba(255, 170, 51, 1)","orange-500": "rgba(255, 145, 0, 1)","orange-600": "rgba(212, 123, 0, 1)","orange-700": "rgba(168, 100, 0, 1)","orange-800": "rgba(125, 76, 0, 1)","orange-900": "rgba(82, 51, 0, 1)","purple-50": "rgba(239, 236, 244, 1)","purple-100": "rgba(224, 216, 233, 1)","purple-200": "rgba(192, 178, 210, 1)","purple-300": "rgba(161, 141, 187, 1)","purple-400": "rgba(130, 105, 162, 1)","purple-500": "rgba(99, 70, 137, 1)","purple-600": "rgba(82, 56, 116, 1)","purple-700": "rgba(65, 43, 93, 1)","purple-800": "rgba(48, 31, 70, 1)","purple-900": "rgba(31, 20, 47, 1)","red-50": "rgba(253, 232, 230, 1)","red-100": "rgba(249, 210, 204, 1)","red-200": "rgba(239, 168, 157, 1)","red-300": "rgba(225, 128, 113, 1)","red-400": "rgba(208, 92, 74, 1)","red-500": "rgba(186, 58, 38, 1)","red-600": "rgba(163, 42, 23, 1)","red-700": "rgba(136, 29, 12, 1)","red-800": "rgba(106, 18, 4, 1)","red-900": "rgba(72, 9, 0, 1)","transparent": "rgba(255, 255, 255, 0)","white": "rgba(255, 255, 255, 1)","border-inverted": "rgba(229, 229, 229, 1)","border-muted": "rgba(143, 143, 143, 1)","border": "rgba(112, 112, 112, 1)","canvas-background-inverted": "rgba(38, 38, 38, 1)","canvas-background-light": "rgba(255, 255, 255, 1)","canvas-background": "rgba(241, 241, 241, 1)","component-background-alternate": "rgba(247, 247, 247, 1)","component-background-inverted": "rgba(38, 38, 38, 1)","component-background-light": "rgba(255, 255, 255, 1)","divider": "rgba(229, 229, 229, 1)","feedback-danger-background": "rgba(249, 210, 204, 1)","feedback-danger-border": "rgba(186, 58, 38, 1)","feedback-danger-icon": "rgba(186, 58, 38, 1)","feedback-danger-text": "rgba(186, 58, 38, 1)","feedback-info-background": "rgba(216, 249, 255, 1)","feedback-info-border": "rgba(54, 141, 168, 1)","feedback-info-icon": "rgba(54, 141, 168, 1)","feedback-success-background": "rgba(204, 241, 214, 1)","feedback-success-border": "rgba(6, 137, 58, 1)","feedback-success-icon": "rgba(0, 124, 46, 1)","feedback-warning-background": "rgba(255, 236, 204, 1)","feedback-warning-border": "rgba(212, 123, 0, 1)","feedback-warning-icon": "rgba(212, 123, 0, 1)","focus-inverted": "rgba(102, 165, 244, 1)","focus": "rgba(0, 52, 125, 1)","interaction-danger-hover": "rgba(163, 42, 23, 1)","interaction-danger-selected": "rgba(136, 29, 12, 1)","interaction-danger": "rgba(186, 58, 38, 1)","interaction-primary-hover-subtle": "rgba(230, 240, 255, 1)","interaction-primary-hover": "rgba(0, 86, 180, 1)","interaction-primary-selected": "rgba(0, 91, 130, 1)","interaction-primary": "rgba(0, 103, 197, 1)","link-visited": "rgba(99, 70, 137, 1)","link": "rgba(0, 103, 197, 1)","text-inverted": "rgba(255, 255, 255, 1)","text-muted": "rgba(112, 112, 112, 1)","text": "rgba(38, 38, 38, 1)"},"extend": {"spacing": {"1": "0.25rem","2": "0.5rem","3": "0.75rem","4": "1rem","5": "1.25rem","6": "1.5rem","7": "1.75rem","8": "2rem","9": "2.25rem","10": "2.5rem","11": "2.75rem","12": "3rem","14": "3.5rem","16": "4rem","18": "4.5rem","20": "5rem","24": "6rem","32": "8rem"},"zIndex": {"modal": 2000,"popover": 1000,"focus": 10,"tooltip": 3000},"boxShadow": {"xsmall": "0 1px 2px 0 rgba(0, 0, 0, 0.12)","small": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.10)","medium": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)","large": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)","xlarge": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)","focus": "0 0 0 3px rgba(0, 52, 125, 1)","focus-inverted": "0 0 0 3px rgba(102, 165, 244, 1)","popover": "0 2px 4px 0 rgba(229, 229, 229, 1)","card": "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)"},"fontWeight": {"bold": "600","regular": "400"},"fontSize": {"heading-2xlarge": "2.5rem","heading-xlarge": "2rem","heading-large": "1.75rem","heading-medium": "1.5rem","heading-small": "1.25rem","heading-xsmall": "1.125rem","xlarge": "1.25rem","large": "1.125rem","medium": "1rem","small": "0.875rem"},"lineHeight": {"heading-2xlarge": "3.25rem","heading-xlarge": "2.5rem","heading-large": "2.25rem","heading-medium": "2rem","heading-small": "1.75rem","heading-xsmall": "1.5rem","xlarge": "1.75rem","large": "1.5rem","medium": "1.25rem"},"fontFamily": {"font-family": "\"Source Sans Pro\", Arial, sans-serif"},"borderRadius": {"small": "2px","medium": "4px","large": "8px","xlarge": "12px","full": "9999px"}}}};