@aarhus-university/au-designsystem-delphinus 0.48.0 → 0.48.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.48.1 (July 18, 2023)
+
+### Core Delphinus Updates
+Updates Figma tokens to use the new black Omnibus theme color.
+
+### Delphinus Projects Updates
+None
+
+
+
 ## 0.48.0 (July 18, 2023)
 
 ### Core Delphinus Updates

package/build/changelog.html

@@ -17,7 +17,12 @@ a(href="/components" class= active_nav_item=="components" ? "nav__item--active"
 a(href="/atom-fonts.html" class= active_nav_item=="atoms" ? "nav__item--active" : "").nav__item Atoms
 a(href="/code.html" class= active_nav_item=="code" ? "nav__item--active" : "").nav__item Code
 a(href="/projects" class= active_nav_item=="projects" ? "nav__item--active" : "").nav__item Projects
-a(href="/changelog.html" class= active_nav_item=="changelog" ? "nav__item--active" : "").nav__item Changelog--><!--button(title="Show full menu" aria-label="Show full menu" aria-haspopup="true" aria-expanded="false" aria-controls="nav-items-global").nav__toggle Menu--></div></nav></header><main class="page__content theme--normal" id="content"><div class="page__content__block"><h1> <strong>Changelog</strong></h1><div class="changelog"><h2>0.48.0 (July 18, 2023)</h2>
+a(href="/changelog.html" class= active_nav_item=="changelog" ? "nav__item--active" : "").nav__item Changelog--><!--button(title="Show full menu" aria-label="Show full menu" aria-haspopup="true" aria-expanded="false" aria-controls="nav-items-global").nav__toggle Menu--></div></nav></header><main class="page__content theme--normal" id="content"><div class="page__content__block"><h1> <strong>Changelog</strong></h1><div class="changelog"><h2>0.48.1 (July 18, 2023)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Updates Figma tokens to use the new black Omnibus theme color.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.48.0 (July 18, 2023)</h2>
 <h3>Core Delphinus Updates</h3>
 <ul>
 <li>Adds support for using the <a href="https://delphinus.au.dk/components/switch">Switch component</a> inside a form.</li>

package/build/figma-tokens/color-themes.json

@@ -3521,29 +3521,29 @@
 	"Omnibus": {
 		"Primary": {
 			"Theme": {
-				"value": "#ffd500",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
 			},
 			"Theme-secondary": {
-				"value": "#ffe97f",
+				"value": "#a3a3a3",
 				"type": "color",
 				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
 			}
 		},
 		"Additional foregrounds": {
 			"Foreground-theme": {
-				"value": "#8b7400",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
 			},
 			"Foreground-branding": {
-				"value": "#8b7400",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
 			},
 			"Theme, Foreground": {
-				"value": "#0a0a0a",
+				"value": "#fefefe",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
 			},
@@ -3553,46 +3553,46 @@
 				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
 			},
 			"Theme-secondary, Foreground-secondary": {
-				"value": "#736939",
+				"value": "#3a3a3a",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
 			}
 		},
 		"Supplemental": {
 			"Border-theme": {
-				"value": "#ffd500",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
 			},
 			"Border-text-link": {
-				"value": "#a68b00",
+				"value": "#010101",
 				"type": "color",
 				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
 			},
 			"Overlay": {
-				"value": "rgba(97,81,0,0.6)",
+				"value": "rgba(4,4,4,0.6)",
 				"type": "color",
 				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
 			}
 		},
 		"Hovers": {
 			"Theme, hover": {
-				"value": "#eac300",
+				"value": "#010101",
 				"type": "color",
 				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
 			},
 			"Theme-secondary, hover": {
-				"value": "#fff4be",
+				"value": "#acacac",
 				"type": "color",
 				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
 			},
 			"Foreground-branding, hover": {
-				"value": "#665503",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
 			},
 			"Foreground-theme, hover": {
-				"value": "#aa9945",
+				"value": "#353535",
 				"type": "color",
 				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
 			}
@@ -3658,118 +3658,118 @@
 		"Dark": {
 			"Primary": {
 				"Background": {
-					"value": "#615100",
+					"value": "#040404",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
 				},
 				"Background-secondary": {
-					"value": "#6c5d11",
+					"value": "#1c1c1c",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
 				},
 				"Foreground-secondary": {
-					"value": "#cbc5aa",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
 				},
 				"Border": {
-					"value": "#a19767",
+					"value": "#545454",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
 				},
 				"Background-input": {
-					"value": "#67580a",
+					"value": "#131313",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
 				},
 				"Interactive": {
-					"value": "#796c27",
+					"value": "#2d2d2d",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
 				},
 				"Theme-secondary": {
-					"value": "#ac9000",
+					"value": "#080808",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
 				}
 			},
 			"Additional foregrounds": {
 				"Foreground-theme": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
 				},
 				"Foreground-disabled": {
-					"value": "#8e8349",
+					"value": "#434343",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
 				},
 				"Theme-secondary, Foreground": {
-					"value": "#0a0a0a",
+					"value": "#fefefe",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
 				},
 				"Theme-secondary, Foreground-secondary": {
-					"value": "#f7f4e6",
+					"value": "#787878",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
 				}
 			},
 			"Supplemental": {
 				"Border-theme": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
 				},
 				"Border-text-link": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
 				},
 				"Overlay": {
-					"value": "rgba(97,81,0,0.7)",
+					"value": "rgba(4,4,4,0.7)",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
 				}
 			},
 			"Hovers": {
 				"Theme, hover": {
-					"value": "#ffed8f",
+					"value": "#202020",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
 				},
 				"Theme-secondary, hover": {
-					"value": "#b29914",
+					"value": "#161616",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
 				},
 				"Foreground-branding, hover": {
-					"value": "#d1ccb5",
+					"value": "#cbcbcb",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
 				},
 				"Background, hover": {
-					"value": "#67580a",
+					"value": "#131313",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
 				},
 				"Background-secondary, hover": {
-					"value": "#776a23",
+					"value": "#2b2b2b",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
 				},
 				"Interactive, hover": {
-					"value": "#85793a",
+					"value": "#3a3a3a",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
 				},
 				"Foreground, hover": {
-					"value": "#d1ccb5",
+					"value": "#cbcbcb",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
 				},
 				"Foreground-theme, hover": {
-					"value": "#cba900",
+					"value": "#575757",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
 				}

package/build/figma-tokens/design-system.json

@@ -5926,29 +5926,29 @@
 	"Omnibus": {
 		"Primary": {
 			"Theme": {
-				"value": "#ffd500",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
 			},
 			"Theme-secondary": {
-				"value": "#ffe97f",
+				"value": "#a3a3a3",
 				"type": "color",
 				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
 			}
 		},
 		"Additional foregrounds": {
 			"Foreground-theme": {
-				"value": "#8b7400",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
 			},
 			"Foreground-branding": {
-				"value": "#8b7400",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
 			},
 			"Theme, Foreground": {
-				"value": "#0a0a0a",
+				"value": "#fefefe",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
 			},
@@ -5958,46 +5958,46 @@
 				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
 			},
 			"Theme-secondary, Foreground-secondary": {
-				"value": "#736939",
+				"value": "#3a3a3a",
 				"type": "color",
 				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
 			}
 		},
 		"Supplemental": {
 			"Border-theme": {
-				"value": "#ffd500",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
 			},
 			"Border-text-link": {
-				"value": "#a68b00",
+				"value": "#010101",
 				"type": "color",
 				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
 			},
 			"Overlay": {
-				"value": "rgba(97,81,0,0.6)",
+				"value": "rgba(4,4,4,0.6)",
 				"type": "color",
 				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
 			}
 		},
 		"Hovers": {
 			"Theme, hover": {
-				"value": "#eac300",
+				"value": "#010101",
 				"type": "color",
 				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
 			},
 			"Theme-secondary, hover": {
-				"value": "#fff4be",
+				"value": "#acacac",
 				"type": "color",
 				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
 			},
 			"Foreground-branding, hover": {
-				"value": "#665503",
+				"value": "#0a0a0a",
 				"type": "color",
 				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
 			},
 			"Foreground-theme, hover": {
-				"value": "#aa9945",
+				"value": "#353535",
 				"type": "color",
 				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
 			}
@@ -6063,118 +6063,118 @@
 		"Dark": {
 			"Primary": {
 				"Background": {
-					"value": "#615100",
+					"value": "#040404",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
 				},
 				"Background-secondary": {
-					"value": "#6c5d11",
+					"value": "#1c1c1c",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
 				},
 				"Foreground-secondary": {
-					"value": "#cbc5aa",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
 				},
 				"Border": {
-					"value": "#a19767",
+					"value": "#545454",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
 				},
 				"Background-input": {
-					"value": "#67580a",
+					"value": "#131313",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
 				},
 				"Interactive": {
-					"value": "#796c27",
+					"value": "#2d2d2d",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
 				},
 				"Theme-secondary": {
-					"value": "#ac9000",
+					"value": "#080808",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
 				}
 			},
 			"Additional foregrounds": {
 				"Foreground-theme": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
 				},
 				"Foreground-disabled": {
-					"value": "#8e8349",
+					"value": "#434343",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
 				},
 				"Theme-secondary, Foreground": {
-					"value": "#0a0a0a",
+					"value": "#fefefe",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
 				},
 				"Theme-secondary, Foreground-secondary": {
-					"value": "#f7f4e6",
+					"value": "#787878",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
 				}
 			},
 			"Supplemental": {
 				"Border-theme": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
 				},
 				"Border-text-link": {
-					"value": "#ffd500",
+					"value": "#777",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
 				},
 				"Overlay": {
-					"value": "rgba(97,81,0,0.7)",
+					"value": "rgba(4,4,4,0.7)",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
 				}
 			},
 			"Hovers": {
 				"Theme, hover": {
-					"value": "#ffed8f",
+					"value": "#202020",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
 				},
 				"Theme-secondary, hover": {
-					"value": "#b29914",
+					"value": "#161616",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
 				},
 				"Foreground-branding, hover": {
-					"value": "#d1ccb5",
+					"value": "#cbcbcb",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
 				},
 				"Background, hover": {
-					"value": "#67580a",
+					"value": "#131313",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
 				},
 				"Background-secondary, hover": {
-					"value": "#776a23",
+					"value": "#2b2b2b",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
 				},
 				"Interactive, hover": {
-					"value": "#85793a",
+					"value": "#3a3a3a",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
 				},
 				"Foreground, hover": {
-					"value": "#d1ccb5",
+					"value": "#cbcbcb",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
 				},
 				"Foreground-theme, hover": {
-					"value": "#cba900",
+					"value": "#575757",
 					"type": "color",
 					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
 				}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aarhus-university/au-designsystem-delphinus",
   "sideEffects": false,
-  "version": "0.48.0",
+  "version": "0.48.1",
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",

package/source/figma-tokens/cssvars/figma-tokens.scss

@@ -3,7 +3,7 @@
 
 //add your overwrites for atoms-settings here
 $color-brands: map-merge($color-brands, ('mitstudie': #45be55));
-$color-brands: map-merge($color-brands, ('omnibus': #ffd500));
+$color-brands: map-merge($color-brands, ('omnibus': #0a0a0a));
 $color-brands: map-merge($color-brands, ('brightspace': #006fbf)); //NOTE Brightspace uses different foreground and background colors, not currently implemented in Figma Tokens
 
 @import "../../atoms/colors/colors";