hr-design-system-handlebars 1.11.12 → 1.12.0

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.11.12",
+    "version": "1.12.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -15,7 +15,7 @@
         "build-storybook-docs": "storybook build --docs",
         "build-storybook-docs-with-tailwind": "npm run build:tailwind && npm run build-storybook-docs",
         "build:tailwind": "postcss src/assets/tailwind.css -o dist/assets/index.css",
-        "build": "npm run clean && npm run build:tailwind && node ./build/scripts/build.js",
+        "build": "yarn clean && yarn build:tailwind && node ./build/scripts/build.js && yarn preparePartialsForDelivery",
         "chromatic": "npx chromatic --project-token 84f1628f224a",
         "clean": "rimraf  dist",
         "release": "npx auto shipit --base-branch=main",
@@ -23,6 +23,7 @@
         "optimize-svgs": "gulp optimizeSvgs",
         "parseJson": "gulp parseJson",
         "partialsToJs": "gulp convertPartialsToJs",
+        "preparePartialsForDelivery": "gulp preparePartialsForDelivery",
         "create-modernizr-config": "gulp createModernizrConfig",
         "merge-locatags": "gulp mergeLocatags"
     },
@@ -71,6 +72,7 @@
         "gulp-merge-json": "^2.1.2",
         "gulp-modernizr": "^4.0.3",
         "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.1.4",
         "gulp-svgmin": "^4.0.1",
         "gulp-svgstore": "^8.0.0",
         "handlebars": "^4.7.6",

package/src/assets/css/custom-components.css

@@ -42,12 +42,12 @@
     .headline-barrier:before,
     .headline-barrier:after {
         border-bottom: 1px solid;
-        content: ''; 
-        @apply pt-3.5 md:pt-5     
+        content: '';
+        @apply pt-3.5 md:pt-5;
     }
     .justifyLine.headline-barrier:before,
     .justifyLine.headline-barrier:after {
-        @apply pt-3.5      
+        @apply pt-3.5;
     }
 
     /* PODCAST SEEK SLIDER*/
@@ -77,12 +77,11 @@
     /* CONTENT NAV ACCENTED GROUP MIXED*/
 
     .group-accented .autoSuggest .mixed-input {
-        border-color: transparent!important;
+        border-color: transparent !important;
         height: 32px;
         border-bottom: none;
     }
 
-
     .ds-focus {
         @apply z-20;
         @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
@@ -111,27 +110,23 @@
     }
 
     .ds-link {
-        @apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
+        @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
     }
-    
+
     .ds-link:focus:not(:focus-visible) {
         @apply shadow-none;
     }
 
-    .ds-link-clusterTeaser {
-        @apply block text-grey-scorpion focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
-    }
-
-    .ds-link-clusterTeaser:focus:not(:focus-visible) {
-        @apply shadow-none;
+    .ds-link.ds-teaser-focus {
+        @apply focus:shadow-none;
     }
 
-    .ds-link-inset  {
-        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;    
+    .ds-link-inset {
+        @apply focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state;
     }
 
     .ds-link-inset:focus:not(:focus-visible) {
-        @apply ring-0;     
+        @apply ring-0;
     }
 
     .ds-teaser-focus {
@@ -139,23 +134,23 @@
     }
 
     .ds-teaser-focus:focus::before,
-    .ds-teaser-focus:focus + .ds-cta span {
+    .ds-teaser-focus:focus + .ds-cta > * {
         @apply shadow-teaser-focus;
         @apply shadow-focus-state;
     }
 
-    .ds-teaser-focus:focus + .ds-cta span {
+    .ds-teaser-focus:focus + .ds-cta > * {
         @apply bg-button-inverted;
         @apply text-button-hollow;
         @apply border-none;
     }
 
     .ds-teaser-focus:focus:not(:focus-visible)::before,
-    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
         @apply shadow-none;
     }
 
-    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
         @apply bg-transparent;
         @apply text-button-inverted;
         @apply border-solid;
@@ -164,10 +159,10 @@
     .ds-teaser-focus:focus {
         @apply outline-none;
     }
-/* ----------------Content NAV------------------ */
-/* ---------------- NAV ITEMS ------------------ */
+    /* ----------------Content NAV------------------ */
+    /* ---------------- NAV ITEMS ------------------ */
     .content-nav-item {
-        @apply h-10;    
+        @apply h-10;
         @apply text-base;
         @apply font-copy;
         @apply list-none;
@@ -180,7 +175,7 @@
         @apply hover:text-white;
         @apply hover:underline;
     }
-/* ----------------LIST - NAV ITEMS ------------------ */
+    /* ----------------LIST - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-list {
         @apply w-full;
         @apply border;
@@ -191,13 +186,13 @@
         @apply w-full;
         @apply md:w-fit;
     }
-/* ----------------FLOW - NAV ITEMS ------------------ */
+    /* ----------------FLOW - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-flow {
         @apply w-fit;
         @apply border;
         @apply hover:no-underline;
     }
-/* ----------------MIXED - NAV ITEMS ------------------ */
+    /* ----------------MIXED - NAV ITEMS ------------------ */
     .teaser-size-100 .content-nav-item.content-nav-item-mixed,
     .teaser-size-66 .content-nav-item.content-nav-item-mixed {
         @apply md:w-fit;
@@ -210,7 +205,6 @@
         @apply md:hover:text-white;
         @apply md:hover:!bg-content-nav;
         @apply md:hover:!fill-white;
-
     }
     .content-nav-item.content-nav-item-mixed {
         @apply w-full;
@@ -226,7 +220,7 @@
         @apply hover:!bg-white;
         @apply hover:!fill-content-nav;
     }
-/* ----------------DROPDOWN - NAV ITEMS ------------------ */    
+    /* ----------------DROPDOWN - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-dropdown {
         @apply w-full;
         @apply border-gray-400;
@@ -236,21 +230,20 @@
         @apply hover:text-content-nav;
         @apply hover:!bg-white;
         @apply hover:!fill-content-nav;
-                
     }
-/* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
-    .content-nav-dropdown_dropdown.-isDropdown  {
+    /* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
+    .content-nav-dropdown_dropdown.-isDropdown {
         @apply flex;
     }
-    .content-nav-dropdown_dropdown.-isMixed  {
+    .content-nav-dropdown_dropdown.-isMixed {
         @apply flex;
     }
     .teaser-size-100 .content-nav-dropdown_dropdown.-isMixed,
-    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed  {
+    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed {
         @apply flex;
         @apply md:hidden;
     }
-/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
+    /* ---------------- NAV DROPDOWN - CONTENT ------------------ */
     .content-nav-dropdown_content.-isOpen {
         @apply z-9999;
         @apply shadow-lg;
@@ -260,12 +253,12 @@
         @apply z-10;
         @apply hidden;
     }
-/* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */    
-    .content-nav-dropdown_content.-isMixed {        
+    /* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */
+    .content-nav-dropdown_content.-isMixed {
         @apply hidden;
     }
     .teaser-size-100 .content-nav-dropdown_content.-isMixed,
-    .teaser-size-66 .content-nav-dropdown_content.-isMixed  {        
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed {
         @apply md:block;
     }
     .content-nav-dropdown_content.-isMixed.-isOpen {
@@ -281,4 +274,10 @@
         @apply hidden;
         @apply md:block;
     }
-}
+}
+
+/* ---------------------------- BUTTON ------------------------------ */
+.ds-button-label + .ds-button-icon,
+.ds-button-icon + .ds-button-label {
+    @apply ml-2;
+}

package/src/assets/css/custom-utilities.css

@@ -118,10 +118,10 @@
     }
 
     .link-focus-inset {
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50;
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-gray-scorpion/50;
     }
     .link-focus {
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50;
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-gray-scorpion/50;
     }
     .link-focus-inset-white {
         @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50;

package/src/assets/fixtures/event/calendar/event_calendar_months.inc.json

@@ -389,7 +389,11 @@
                                     "url": "https://hr.de",
                                     "isTargetBlank": true,
                                     "webviewUrl": "",
-                                    "readMoreText": ""
+                                    "readMoreText": "",
+                                    "cmsDocument": {
+                                        "title": "Tickets Finale Landeswettbewerb Jugend jazzt",
+                                        "sophoraId": "finale_landeswettbewerb_jugend_jazzt_100"
+                                    }
                                 }
                             },
                             "concertInfo": {

package/src/assets/tailwind.css

@@ -28,7 +28,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.matisse');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Sendungsdokument */
@@ -42,7 +42,7 @@
     /* Eventkalender */
     --color-label-event-calendar-title: theme('colors.teal.deeperPool');
     --color-eventcalendar-primary: var(--color-primary-ds);
-    --color-eventcalendar-secondary: theme('colors.grey.boulder');
+    --color-eventcalendar-secondary: theme('colors.gray.boulder');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
@@ -53,7 +53,7 @@
     --color-stage-primary: theme('colors.blue.deepCerulean');
     --color-stage-link: var('--color-link');
     /* geoTag */
-    --color-geoTag: theme('colors.grey.brightGray');
+    --color-geoTag: theme('colors.gray.brightGray');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
@@ -61,6 +61,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
+    --color-button-secondary: theme('colors.blue.science');
+    --color-button-ghost: theme('colors.blue.science');
     /* Media-Button */
     --color-media-button: theme('colors.blue.jellyBean');
     /* States */
@@ -71,7 +73,7 @@
     --color-podcast: theme('colors.blue.science');
     --color-podcast-text: var(--color-link);
     /* Byline */
-    --color-byline: theme('colors.grey.scorpion');
+    --color-byline: theme('colors.gray.scorpion');
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
@@ -102,7 +104,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.matisse');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Kurzmeldung */
@@ -121,14 +123,20 @@
     --color-stage-text: theme('colors.white.DEFAULT');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* geoTag */
-    --color-geoTag: theme('colors.grey.brightGray');
+    --color-geoTag: theme('colors.gray.brightGray');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
     /* Button */
     --color-button: var(--color-primary-ds);
+    --color-button-primary: theme('colors.blue.science');
+    --color-button-primary-dark: theme('colors.blue.congress');
+    --color-button-primary-inverted: theme('colors.white.DEFAULT');
+    --color-button-primary-inverted-dark: theme('colors.blue.accented');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
+    --color-button-secondary: theme('colors.blue.science');
+    --color-button-ghost: theme('colors.blue.science');
     /* Media-Button */
     --color-media-button: theme('colors.blue.science');
     /* States */
@@ -165,7 +173,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -190,6 +198,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.purple.jazzberry');
+    --color-button-secondary: theme('colors.purple.jazzberry');
+    --color-button-ghost: theme('colors.purple.jazzberry');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -222,7 +232,7 @@
     /* Sendung */
     --color-label-program: theme('colors.pink.rose');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -246,6 +256,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.jellyBean');
+    --color-button-secondary: theme('colors.blue.jellyBean');
+    --color-button-ghost: theme('colors.blue.jellyBean');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -262,7 +274,7 @@
 }
 
 [data-theme='hr-rundfunkrat'] {
-    --color-primary-ds: theme('colors.grey.scorpion');
+    --color-primary-ds: theme('colors.gray.scorpion');
     --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
@@ -278,7 +290,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -304,6 +316,8 @@
     --color-button: theme('colors.blue.deepCerulean');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.deepCerulean');
+    --color-button-secondary: theme('colors.blue.deepCerulean');
+    --color-button-ghost: theme('colors.blue.deepCerulean');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -336,7 +350,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -362,6 +376,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -380,7 +396,7 @@
 [data-theme='hr-sinfonieorchester'] {
     --color-primary-ds: theme('colors.red.burntUmber');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.alto');
+    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -394,7 +410,7 @@
     /* Sendung */
     --color-label-program: theme('colors.green.goBen');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -418,6 +434,8 @@
     --color-button: theme('colors.red.wellRead');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.wellRead');
+    --color-button-secondary: theme('colors.red.wellRead');
+    --color-button-ghost: theme('colors.red.wellRead');
     /* Media-Button */
     --color-media-button: theme('colors.red.wellRead');
     /* States */
@@ -450,7 +468,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.blueStone');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -474,6 +492,8 @@
     --color-button: theme('colors.blue.teal');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.teal');
+    --color-button-secondary: theme('colors.blue.teal');
+    --color-button-ghost: theme('colors.blue.teal');
     /* Media-Button */
     --color-media-button: theme('colors.blue.teal');
     /* States */
@@ -506,7 +526,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
@@ -532,6 +552,8 @@
     --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -590,6 +612,8 @@
     --color-button: theme('colors.yellow.olive');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.yellow.olive');
+    --color-button-secondary: theme('colors.yellow.olive');
+    --color-button-ghost: theme('colors.yellow.olive');
     /* Media-Button */
     --color-media-button: theme('colors.yellow.olive');
     /* States */
@@ -608,7 +632,7 @@
 [data-theme='hr2'] {
     --color-primary-ds: theme('colors.orange.clementine');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.alto');
+    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -622,7 +646,7 @@
     /* Sendung */
     --color-label-program: theme('colors.red.paprika');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -647,6 +671,8 @@
     --color-button: theme('colors.red.paprika');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.paprika');
+    --color-button-secondary: theme('colors.red.paprika');
+    --color-button-ghost: theme('colors.red.paprika');
     /* Media-Button */
     --color-media-button: theme('colors.orange.burntOrange');
     /* States */
@@ -665,7 +691,7 @@
 [data-theme='hr3'] {
     --color-primary-ds: theme('colors.red.monza');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.mercury');
+    --color-highlight-1: theme('colors.gray.mercury');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerie */
@@ -679,7 +705,7 @@
     /* Sendung */
     --color-label-program: theme('colors.green.pineGreen');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -706,6 +732,8 @@
     --color-button: theme('colors.red.scarlett');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.scarlett');
+    --color-button-secondary: theme('colors.red.scarlett');
+    --color-button-ghost: theme('colors.red.scarlett');
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -738,7 +766,7 @@
     /* Sendung */
     --color-label-program: theme('colors.pink.fuchsie');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -765,6 +793,8 @@
     --color-button: theme('colors.green.casal');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.green.casal');
+    --color-button-secondary: theme('colors.green.casal');
+    --color-button-ghost: theme('colors.green.casal');
     /* Media-Button */
     --color-media-button: theme('colors.green.eden');
     /* States */
@@ -785,7 +815,7 @@
 [data-theme='you-fm'] {
     --color-primary-ds: #c20016;
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.grey.platinum');
+    --color-highlight-1: theme('colors.gray.platinum');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
     /* Medieninhalte, Video, Audio, Bildergalerien */
@@ -799,7 +829,7 @@
     /* Sendung */
     --color-label-program: theme('colors.blue.lightCerulean');
     /* Download */
-    --color-label-download: theme('colors.grey.scorpion');
+    --color-label-download: theme('colors.gray.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Kurzmeldung */
@@ -824,6 +854,8 @@
     --color-button: var(--color-link);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: var(--color-link);
+    --color-button-secondary: var(--color-link);
+    --color-button-ghost: var(--color-link);
     /* Media-Button */
     --color-media-button: theme('colors.black.DEFAULT');
     /* States */