Tailwind

Oppdatert 20. mai 2022
// tailwind.config.js
module.exports = {
presets: [require("@navikt/ds-tailwind")]
}
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"
}
}
}
};