diff --git a/scripts/variable-exporter.ts b/scripts/variable-exporter.ts index c9452f07..47e47c82 100644 --- a/scripts/variable-exporter.ts +++ b/scripts/variable-exporter.ts @@ -7,20 +7,18 @@ const FIGMA_FILE_KEY = process.env.FIGMA_FILE_KEY; const OUTPUT_DIR = "src/variables"; const WANTED_COLLECTIONS = new Set([ - "1. Semantic colors", - "1.1 Base colors", - "2. Semantic dimensions", - "2.1 Base dimensions", - "3. Semantic fonts", - "3.1 Base fonts", + "TEDI colors base", + "TEDI colors semantic", + "TEDI dimensions base", + "TEDI dimensions semantic", + "TEDI fonts base", + "TEDI fonts semantic", ]); const THEME_MAP: Record = { default: { folder: "default", fileSuffix: "default" }, light: { folder: "default", fileSuffix: "default" }, dark: { folder: "default", fileSuffix: "dark" }, - muis: { folder: "muis", fileSuffix: "muis" }, - rit: { folder: "rit", fileSuffix: "rit" }, }; const RESPONSIVE_MEDIA: Record = { @@ -194,7 +192,7 @@ async function run() { ); const baseLines: string[] = []; - for (const coll of wantedColls.filter(c => c.name.includes("Base"))) { + for (const coll of wantedColls.filter(c => c.name.includes("base"))) { const modeId = coll.defaultModeId ?? coll.modes[0]?.modeId; if (!modeId) continue; @@ -216,11 +214,11 @@ async function run() { fs.writeFileSync(path.join(OUTPUT_DIR, "_base-variables.scss"), css); } - for (const coll of wantedColls.filter(c => !c.name.includes("Base"))) { + for (const coll of wantedColls.filter(c => !c.name.includes("base"))) { const unit = getUnit(coll.name); - const isFonts = coll.name === "3. Semantic fonts"; - const isColors = coll.name === "1. Semantic colors"; - const isDimensions = coll.name === "2. Semantic dimensions"; + const isFonts = coll.name === "TEDI fonts semantic"; + const isColors = coll.name === "TEDI colors semantic"; + const isDimensions = coll.name === "TEDI dimensions semantic"; if (isFonts) { const desktopLines: string[] = []; diff --git a/src/variables/_base-variables.scss b/src/variables/_base-variables.scss index af93b842..067e8342 100644 --- a/src/variables/_base-variables.scss +++ b/src/variables/_base-variables.scss @@ -1,4 +1,34 @@ :root { + --accent-100: var(--orange-100); + --accent-200: var(--orange-200); + --accent-300: var(--orange-300); + --accent-400: var(--orange-400); + --accent-500: var(--orange-500); + --accent-600: var(--orange-600); + --accent-700: var(--orange-700); + --accent-800: var(--orange-800); + --alpha-01: rgb(0 0 0 / 0.1%); + --alpha-10: rgb(0 0 0 / 10%); + --alpha-14: rgb(0 0 0 / 14%); + --alpha-20: rgb(0 0 0 / 20%); + --alpha-40: rgb(23 23 23 / 40%); + --alpha-80: rgb(34 35 43 / 80%); + --alpha-primary-08: rgb(0 90 163 / 8%); + --alpha-primary-20: rgb(0 90 163 / 20%); + --alpha-white-10: rgb(255 255 255 / 10%); + --alpha-white-14: rgb(255 255 255 / 14%); + --alpha-white-20: rgb(255 255 255 / 20%); + --alpha-white-30: rgb(255 255 255 / 30%); + --alpha-white-50: rgb(255 255 255 / 50%); + --alpha-white-80: rgb(255 255 255 / 80%); + --blue-100: rgb(231 240 246); + --blue-200: rgb(208 225 238); + --blue-300: rgb(153 189 218); + --blue-400: rgb(69 135 188); + --blue-500: rgb(51 123 181); + --blue-600: rgb(0 90 163); + --blue-700: rgb(0 66 119); + --blue-800: rgb(0 54 98); --borders-01: 0.0625rem; --borders-02: 0.125rem; --borders-03: 0.1875rem; @@ -42,123 +72,57 @@ --dimensions-23: 6rem; --dimensions-24: 10rem; --dimensions-25: 24rem; - --muis-accent-100: var(--tedi-orange-100); - --muis-accent-200: var(--tedi-orange-200); - --muis-accent-300: var(--tedi-orange-300); - --muis-accent-400: var(--tedi-orange-400); - --muis-accent-500: var(--tedi-orange-500); - --muis-accent-600: var(--tedi-orange-600); - --muis-accent-700: var(--tedi-orange-700); - --muis-accent-800: var(--tedi-orange-800); - --muis-alpha-01: rgb(0 0 0 / 0.1%); - --muis-alpha-10: rgb(0 0 0 / 10%); - --muis-alpha-14: rgb(0 0 0 / 14%); - --muis-alpha-20: rgb(0 0 0 / 20%); - --muis-alpha-40: rgb(23 23 23 / 40%); - --muis-alpha-80: rgb(34 35 43 / 80%); - --muis-alpha-primary-08: rgb(0 90 163 / 8%); - --muis-alpha-primary-20: rgb(0 90 163 / 20%); - --muis-alpha-white-10: rgb(255 255 255 / 10%); - --muis-alpha-white-14: rgb(255 255 255 / 14%); - --muis-alpha-white-20: rgb(255 255 255 / 20%); - --muis-alpha-white-30: rgb(255 255 255 / 30%); - --muis-alpha-white-50: rgb(255 255 255 / 50%); - --muis-alpha-white-80: rgb(255 255 255 / 80%); - --muis-blue-0: rgb(226 243 242); - --muis-blue-00: rgb(238 246 246); - --muis-blue-100: rgb(217 239 239); - --muis-blue-1000: rgb(0 68 97); - --muis-blue-1100: rgb(0 49 65); - --muis-blue-200: rgb(160 210 216); - --muis-blue-300: rgb(112 203 215); - --muis-blue-400: rgb(1 148 168); - --muis-blue-500: rgb(0 140 171); - --muis-blue-600: rgb(1 129 157); - --muis-blue-700: rgb(0 129 147); - --muis-blue-800: rgb(1 110 157); - --muis-blue-900: rgb(0 80 96); - --muis-family-open-sans: open sans; - --muis-green-100: rgb(234 243 238); - --muis-green-200: rgb(214 231 221); - --muis-green-300: rgb(208 255 191); - --muis-green-400: rgb(131 182 152); - --muis-green-500: rgb(89 158 117); - --muis-green-600: rgb(17 207 0); - --muis-green-700: rgb(38 107 66); - --muis-green-800: rgb(29 80 50); - --muis-line-height-00: 1rem; - --muis-line-height-01: 1.25rem; - --muis-line-height-02: 1.3125rem; - --muis-line-height-03: 1.5rem; - --muis-line-height-04: 1.625rem; - --muis-line-height-05: 1.75rem; - --muis-line-height-06: 1.875rem; - --muis-line-height-07: 2rem; - --muis-line-height-08: 2.25rem; - --muis-line-height-09: 2.625rem; - --muis-line-height-10: 2.875rem; - --muis-line-height-11: 3rem; - --muis-neutral-100: rgb(255 255 255); - --muis-neutral-200: rgb(243 243 243); - --muis-neutral-300: rgb(241 241 241); - --muis-neutral-350: rgb(240 240 240); - --muis-neutral-400: rgb(217 217 217); - --muis-neutral-450: rgb(202 202 202); - --muis-neutral-500: rgb(185 195 203); - --muis-neutral-550: rgb(196 196 196); - --muis-neutral-600: rgb(193 193 193); - --muis-neutral-650: rgb(170 170 170); - --muis-neutral-700: rgb(91 91 91); - --muis-neutral-750: rgb(61 61 61); - --muis-neutral-800: rgb(38 43 59); - --muis-neutral-850: rgb(21 25 38); - --muis-neutral-900: rgb(0 0 0); - --muis-orange-100: rgb(255 242 230); - --muis-orange-200: rgb(255 230 204); - --muis-orange-300: rgb(255 204 153); - --muis-orange-400: rgb(255 179 102); - --muis-orange-500: rgb(255 153 51); - --muis-orange-600: rgb(231 116 0); - --muis-orange-700: rgb(153 77 0); - --muis-orange-800: rgb(102 51 0); - --muis-primary-100: var(--muis-blue-100); - --muis-primary-1000: rgb(0 0 0); - --muis-primary-200: var(--muis-blue-200); - --muis-primary-300: var(--muis-blue-300); - --muis-primary-400: var(--muis-blue-400); - --muis-primary-500: var(--muis-blue-700); - --muis-primary-600: var(--muis-blue-900); - --muis-primary-700: var(--muis-blue-1000); - --muis-primary-900: var(--muis-blue-1100); - --muis-red-100: rgb(251 236 236); - --muis-red-200: rgb(247 216 216); - --muis-red-300: rgb(239 178 178); - --muis-red-400: rgb(231 139 139); - --muis-red-500: rgb(223 101 101); - --muis-red-600: rgb(255 46 0); - --muis-red-700: rgb(172 50 50); - --muis-red-800: rgb(129 37 37); - --muis-size-00: 0.75rem; - --muis-size-01: 0.875rem; - --muis-size-02: 1rem; - --muis-size-03: 1.125rem; - --muis-size-04: 1.25rem; - --muis-size-05: 1.375rem; - --muis-size-06: 1.5rem; - --muis-size-07: 1.75rem; - --muis-size-08: 1.875rem; - --muis-size-09: 2rem; - --muis-weight-01: 300; - --muis-weight-02: 400; - --muis-weight-03: 700; - --muis-yellow-100: rgb(255 248 231); - --muis-yellow-200: rgb(255 240 207); - --muis-yellow-300: rgb(255 225 160); - --muis-yellow-400: rgb(255 211 112); - --muis-yellow-500: rgb(255 181 17); - --muis-yellow-600: rgb(186 131 13); - --muis-yellow-700: rgb(148 105 13); - --muis-yellow-800: rgb(102 72 7); + --family-roboto: roboto; + --green-100: rgb(234 243 238); + --green-200: rgb(214 231 221); + --green-300: rgb(172 207 186); + --green-400: rgb(131 182 152); + --green-500: rgb(89 158 117); + --green-600: rgb(48 134 83); + --green-700: rgb(38 107 66); + --green-800: rgb(29 80 50); + --line-height-00: 1rem; + --line-height-01: 1.25rem; + --line-height-02: 1.3125rem; + --line-height-03: 1.5rem; + --line-height-04: 1.625rem; + --line-height-05: 1.75rem; + --line-height-06: 1.875rem; + --line-height-07: 2rem; + --line-height-08: 2.25rem; + --line-height-09: 2.625rem; + --line-height-10: 2.875rem; + --line-height-11: 3rem; + --neutral-100: rgb(255 255 255); + --neutral-200: rgb(249 249 249); + --neutral-300: rgb(240 240 242); + --neutral-350: rgb(225 226 229); + --neutral-400: rgb(210 211 216); + --neutral-450: rgb(146 147 164); + --neutral-500: rgb(131 132 148); + --neutral-550: rgb(115 116 130); + --neutral-600: rgb(93 96 113); + --neutral-700: rgb(75 78 98); + --neutral-750: rgb(52 57 76); + --neutral-800: rgb(38 43 59); + --neutral-850: rgb(21 25 38); + --neutral-900: rgb(0 0 0); + --orange-100: rgb(255 242 230); + --orange-200: rgb(255 230 204); + --orange-300: rgb(255 204 153); + --orange-400: rgb(255 179 102); + --orange-500: rgb(255 153 51); + --orange-600: rgb(231 116 0); + --orange-700: rgb(153 77 0); + --orange-800: rgb(102 51 0); + --primary-100: var(--blue-100); + --primary-200: var(--blue-200); + --primary-300: var(--blue-300); + --primary-400: var(--blue-400); + --primary-500: var(--blue-500); + --primary-600: var(--blue-600); + --primary-700: var(--blue-700); + --primary-800: var(--blue-800); --radius-00: 0; --radius-01: 0.125rem; --radius-02-default: 0.25rem; @@ -168,235 +132,33 @@ --radius-06: 2.5rem; --radius-07: 6.25rem; --radius-08: 22.5rem; - --rit-accent-100: rgb(205 244 171); - --rit-accent-200: rgb(205 244 171); - --rit-accent-300: rgb(154 233 87); - --rit-accent-400: rgb(102 222 0); - --rit-accent-500: rgb(30 184 0); - --rit-accent-600: rgb(0 135 0); - --rit-accent-700: rgb(0 135 0); - --rit-accent-800: rgb(0 135 0); - --rit-accent-extra-1: rgb(0 60 165); - --rit-accent-extra-10: rgb(58 216 204); - --rit-accent-extra-2: rgb(247 102 79); - --rit-accent-extra-3: rgb(67 199 246); - --rit-accent-extra-4: rgb(173 36 15); - --rit-accent-extra-5: rgb(158 183 213); - --rit-accent-extra-6: rgb(253 192 183); - --rit-accent-extra-7: rgb(0 132 85); - --rit-accent-extra-8: rgb(255 200 50); - --rit-accent-extra-9: rgb(85 25 155); - --rit-alpha-01: rgb(0 0 0 / 0.1%); - --rit-alpha-10: rgb(0 0 0 / 10%); - --rit-alpha-14: rgb(0 0 0 / 14%); - --rit-alpha-20: rgb(0 0 0 / 20%); - --rit-alpha-40: rgb(23 23 23 / 40%); - --rit-alpha-80: rgb(34 35 43 / 80%); - --rit-alpha-primary-08: rgb(0 90 163 / 8%); - --rit-alpha-primary-20: rgb(0 90 163 / 20%); - --rit-alpha-white-10: rgb(255 255 255 / 10%); - --rit-alpha-white-14: rgb(255 255 255 / 14%); - --rit-alpha-white-20: rgb(255 255 255 / 20%); - --rit-alpha-white-30: rgb(255 255 255 / 30%); - --rit-alpha-white-50: rgb(255 255 255 / 50%); - --rit-alpha-white-80: rgb(255 255 255 / 80%); - --rit-blue-100: rgb(231 240 246); - --rit-blue-200: rgb(208 225 238); - --rit-blue-300: rgb(153 189 218); - --rit-blue-400: rgb(69 135 188); - --rit-blue-500: rgb(51 123 181); - --rit-blue-600: rgb(0 90 163); - --rit-blue-700: rgb(0 66 119); - --rit-blue-800: rgb(0 54 98); - --rit-family-roboto: roboto; - --rit-family-space-grotesk: space grotesk; - --rit-green-100: rgb(234 243 238); - --rit-green-200: rgb(214 231 221); - --rit-green-300: rgb(172 207 186); - --rit-green-400: rgb(131 182 152); - --rit-green-500: rgb(89 158 117); - --rit-green-600: rgb(48 134 83); - --rit-green-700: rgb(38 107 66); - --rit-green-800: rgb(29 80 50); - --rit-line-height-00: 1rem; - --rit-line-height-01: 1.25rem; - --rit-line-height-02: 1.3125rem; - --rit-line-height-03: 1.5rem; - --rit-line-height-04: 1.625rem; - --rit-line-height-05: 1.75rem; - --rit-line-height-06: 1.875rem; - --rit-line-height-07: 2rem; - --rit-line-height-08: 2.25rem; - --rit-line-height-09: 2.625rem; - --rit-line-height-10: 2.875rem; - --rit-line-height-11: 3rem; - --rit-neutral-100: rgb(255 255 255); - --rit-neutral-200: rgb(249 249 249); - --rit-neutral-300: rgb(240 240 242); - --rit-neutral-350: rgb(225 226 229); - --rit-neutral-400: rgb(210 211 216); - --rit-neutral-450: rgb(146 147 164); - --rit-neutral-500: rgb(131 132 148); - --rit-neutral-550: rgb(115 116 130); - --rit-neutral-600: rgb(93 96 113); - --rit-neutral-700: rgb(75 78 98); - --rit-neutral-750: rgb(52 57 76); - --rit-neutral-800: rgb(38 43 59); - --rit-neutral-850: rgb(21 25 38); - --rit-neutral-900: rgb(0 0 0); - --rit-orange-100: rgb(255 242 230); - --rit-orange-200: rgb(255 230 204); - --rit-orange-300: rgb(255 204 153); - --rit-orange-400: rgb(255 179 102); - --rit-orange-500: rgb(255 153 51); - --rit-orange-600: rgb(231 116 0); - --rit-orange-700: rgb(153 77 0); - --rit-orange-800: rgb(102 51 0); - --rit-primary-100: rgb(210 210 210); - --rit-primary-200: rgb(210 210 210); - --rit-primary-300: rgb(170 170 170); - --rit-primary-400: rgb(130 130 130); - --rit-primary-500: rgb(90 90 90); - --rit-primary-600: rgb(0 0 0); - --rit-primary-700: rgb(0 0 0); - --rit-primary-800: rgb(0 0 0); - --rit-red-100: rgb(251 236 236); - --rit-red-200: rgb(247 216 216); - --rit-red-300: rgb(239 178 178); - --rit-red-400: rgb(231 139 139); - --rit-red-500: rgb(223 101 101); - --rit-red-600: rgb(215 62 62); - --rit-red-700: rgb(172 50 50); - --rit-red-800: rgb(129 37 37); - --rit-size-00: 0.75rem; - --rit-size-01: 0.875rem; - --rit-size-02: 1rem; - --rit-size-03: 1.125rem; - --rit-size-04: 1.25rem; - --rit-size-05: 1.375rem; - --rit-size-06: 1.5rem; - --rit-size-07: 1.75rem; - --rit-size-08: 1.875rem; - --rit-size-09: 2rem; - --rit-weight-01: 300; - --rit-weight-02: 400; - --rit-weight-03: 700; - --rit-yellow-100: rgb(255 248 231); - --rit-yellow-200: rgb(255 240 207); - --rit-yellow-300: rgb(255 225 160); - --rit-yellow-400: rgb(255 211 112); - --rit-yellow-500: rgb(255 181 17); - --rit-yellow-600: rgb(186 131 13); - --rit-yellow-700: rgb(148 105 13); - --rit-yellow-800: rgb(102 72 7); - --tedi-accent-100: var(--tedi-orange-100); - --tedi-accent-200: var(--tedi-orange-200); - --tedi-accent-300: var(--tedi-orange-300); - --tedi-accent-400: var(--tedi-orange-400); - --tedi-accent-500: var(--tedi-orange-500); - --tedi-accent-600: var(--tedi-orange-600); - --tedi-accent-700: var(--tedi-orange-700); - --tedi-accent-800: var(--tedi-orange-800); - --tedi-alpha-01: rgb(0 0 0 / 0.1%); - --tedi-alpha-10: rgb(0 0 0 / 10%); - --tedi-alpha-14: rgb(0 0 0 / 14%); - --tedi-alpha-20: rgb(0 0 0 / 20%); - --tedi-alpha-40: rgb(23 23 23 / 40%); - --tedi-alpha-80: rgb(34 35 43 / 80%); - --tedi-alpha-primary-08: rgb(0 90 163 / 8%); - --tedi-alpha-primary-20: rgb(0 90 163 / 20%); - --tedi-alpha-white-10: rgb(255 255 255 / 10%); - --tedi-alpha-white-14: rgb(255 255 255 / 14%); - --tedi-alpha-white-20: rgb(255 255 255 / 20%); - --tedi-alpha-white-30: rgb(255 255 255 / 30%); - --tedi-alpha-white-50: rgb(255 255 255 / 50%); - --tedi-alpha-white-80: rgb(255 255 255 / 80%); - --tedi-blue-100: rgb(231 240 246); - --tedi-blue-200: rgb(208 225 238); - --tedi-blue-300: rgb(153 189 218); - --tedi-blue-400: rgb(69 135 188); - --tedi-blue-500: rgb(51 123 181); - --tedi-blue-600: rgb(0 90 163); - --tedi-blue-700: rgb(0 66 119); - --tedi-blue-800: rgb(0 54 98); - --tedi-family-roboto: roboto; - --tedi-green-100: rgb(234 243 238); - --tedi-green-200: rgb(214 231 221); - --tedi-green-300: rgb(172 207 186); - --tedi-green-400: rgb(131 182 152); - --tedi-green-500: rgb(89 158 117); - --tedi-green-600: rgb(48 134 83); - --tedi-green-700: rgb(38 107 66); - --tedi-green-800: rgb(29 80 50); - --tedi-line-height-00: 1rem; - --tedi-line-height-01: 1.25rem; - --tedi-line-height-02: 1.3125rem; - --tedi-line-height-03: 1.5rem; - --tedi-line-height-04: 1.625rem; - --tedi-line-height-05: 1.75rem; - --tedi-line-height-06: 1.875rem; - --tedi-line-height-07: 2rem; - --tedi-line-height-08: 2.25rem; - --tedi-line-height-09: 2.625rem; - --tedi-line-height-10: 2.875rem; - --tedi-line-height-11: 3rem; - --tedi-neutral-100: rgb(255 255 255); - --tedi-neutral-200: rgb(249 249 249); - --tedi-neutral-300: rgb(240 240 242); - --tedi-neutral-350: rgb(225 226 229); - --tedi-neutral-400: rgb(210 211 216); - --tedi-neutral-450: rgb(146 147 164); - --tedi-neutral-500: rgb(131 132 148); - --tedi-neutral-550: rgb(115 116 130); - --tedi-neutral-600: rgb(93 96 113); - --tedi-neutral-700: rgb(75 78 98); - --tedi-neutral-750: rgb(52 57 76); - --tedi-neutral-800: rgb(38 43 59); - --tedi-neutral-850: rgb(21 25 38); - --tedi-neutral-900: rgb(0 0 0); - --tedi-orange-100: rgb(255 242 230); - --tedi-orange-200: rgb(255 230 204); - --tedi-orange-300: rgb(255 204 153); - --tedi-orange-400: rgb(255 179 102); - --tedi-orange-500: rgb(255 153 51); - --tedi-orange-600: rgb(231 116 0); - --tedi-orange-700: rgb(153 77 0); - --tedi-orange-800: rgb(102 51 0); - --tedi-primary-100: var(--tedi-blue-100); - --tedi-primary-200: var(--tedi-blue-200); - --tedi-primary-300: var(--tedi-blue-300); - --tedi-primary-400: var(--tedi-blue-400); - --tedi-primary-500: var(--tedi-blue-500); - --tedi-primary-600: var(--tedi-blue-600); - --tedi-primary-700: var(--tedi-blue-700); - --tedi-primary-800: var(--tedi-blue-800); - --tedi-red-100: rgb(251 236 236); - --tedi-red-200: rgb(247 216 216); - --tedi-red-300: rgb(239 178 178); - --tedi-red-400: rgb(231 139 139); - --tedi-red-500: rgb(223 101 101); - --tedi-red-600: rgb(215 62 62); - --tedi-red-700: rgb(172 50 50); - --tedi-red-800: rgb(129 37 37); - --tedi-size-00: 0.75rem; - --tedi-size-01: 0.875rem; - --tedi-size-02: 1rem; - --tedi-size-03: 1.125rem; - --tedi-size-04: 1.25rem; - --tedi-size-05: 1.375rem; - --tedi-size-06: 1.5rem; - --tedi-size-07: 1.75rem; - --tedi-size-08: 1.875rem; - --tedi-size-09: 2rem; - --tedi-weight-01: 300; - --tedi-weight-02: 400; - --tedi-weight-03: 700; - --tedi-yellow-100: rgb(255 248 231); - --tedi-yellow-200: rgb(255 240 207); - --tedi-yellow-300: rgb(255 225 160); - --tedi-yellow-400: rgb(255 211 112); - --tedi-yellow-500: rgb(255 181 17); - --tedi-yellow-600: rgb(186 131 13); - --tedi-yellow-700: rgb(148 105 13); - --tedi-yellow-800: rgb(102 72 7); + --red-100: rgb(251 236 236); + --red-200: rgb(247 216 216); + --red-300: rgb(239 178 178); + --red-400: rgb(231 139 139); + --red-500: rgb(223 101 101); + --red-600: rgb(215 62 62); + --red-700: rgb(172 50 50); + --red-800: rgb(129 37 37); + --size-00: 0.75rem; + --size-01: 0.875rem; + --size-02: 1rem; + --size-03: 1.125rem; + --size-04: 1.25rem; + --size-05: 1.375rem; + --size-06: 1.5rem; + --size-07: 1.75rem; + --size-08: 1.875rem; + --size-09: 2rem; + --weight-01: 300; + --weight-02: 400; + --weight-03: 700; + --yellow-100: rgb(255 248 231); + --yellow-200: rgb(255 240 207); + --yellow-300: rgb(255 225 160); + --yellow-400: rgb(255 211 112); + --yellow-500: rgb(255 181 17); + --yellow-600: rgb(186 131 13); + --yellow-700: rgb(148 105 13); + --yellow-800: rgb(102 72 7); } diff --git a/src/variables/_dimensional-variables.scss b/src/variables/_dimensional-variables.scss index a913ff3e..6a13b4f5 100644 --- a/src/variables/_dimensional-variables.scss +++ b/src/variables/_dimensional-variables.scss @@ -99,10 +99,10 @@ --feedback-star-size: var(--icon-05); --file-dropzone-padding-x: var(--dimensions-13); --file-dropzone-padding-y: var(--dimensions-13); - --filter-default-inner-spacing: var(--dimensions-02); + --filter-default-inner-spacing: var(--dimensions-04); + --filter-default-inner-spacing-sm: var(--dimensions-02); --filter-default-padding-x: var(--dimensions-04); --filter-default-padding-y: var(--dimensions-03); - --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing); --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x); --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y); --form-calendar-date-width: 40px; @@ -131,6 +131,7 @@ --form-field-button-height: var(--dimensions-14); --form-field-button-height-sm: var(--dimensions-13); --form-field-height: var(--dimensions-16); + --form-field-height-lg: var(--dimensions-19); --form-field-height-sm: var(--dimensions-14); --form-field-inner-spacing: var(--dimensions-05); --form-field-inner-spacing-sm: var(--dimensions-03); @@ -387,6 +388,7 @@ --table-of-contents-width: var(--containers-04); --table-radius: var(--radius-02-default); --tag-default-loader-padding-y: var(--dimensions-04); + --tag-default-padding-sm: var(--dimensions-01); --tag-default-padding-x: var(--dimensions-03); --tag-default-padding-y: var(--dimensions-02); --tag-default-radius: var(--radius-02-default); @@ -517,10 +519,10 @@ --feedback-star-size: var(--icon-06); --file-dropzone-padding-x: var(--dimensions-13); --file-dropzone-padding-y: var(--dimensions-13); - --filter-default-inner-spacing: var(--dimensions-02); + --filter-default-inner-spacing: var(--dimensions-04); + --filter-default-inner-spacing-sm: var(--dimensions-02); --filter-default-padding-x: var(--dimensions-04); --filter-default-padding-y: var(--dimensions-03); - --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing); --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x); --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y); --form-calendar-date-width: 40px; @@ -549,6 +551,7 @@ --form-field-button-height: var(--dimensions-14); --form-field-button-height-sm: var(--dimensions-13); --form-field-height: var(--dimensions-16); + --form-field-height-lg: var(--dimensions-19); --form-field-height-sm: var(--dimensions-14); --form-field-inner-spacing: var(--dimensions-05); --form-field-inner-spacing-sm: var(--dimensions-03); @@ -805,6 +808,7 @@ --table-of-contents-width: var(--containers-04); --table-radius: var(--radius-02-default); --tag-default-loader-padding-y: var(--dimensions-04); + --tag-default-padding-sm: var(--dimensions-01); --tag-default-padding-x: var(--dimensions-03); --tag-default-padding-y: var(--dimensions-02); --tag-default-radius: var(--radius-02-default); @@ -936,10 +940,10 @@ --feedback-star-size: var(--icon-06); --file-dropzone-padding-x: var(--dimensions-10); --file-dropzone-padding-y: var(--dimensions-13); - --filter-default-inner-spacing: var(--dimensions-02); + --filter-default-inner-spacing: var(--dimensions-04); + --filter-default-inner-spacing-sm: var(--dimensions-02); --filter-default-padding-x: var(--dimensions-04); --filter-default-padding-y: var(--dimensions-03); - --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing); --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x); --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y); --form-calendar-date-width: 40px; @@ -968,6 +972,7 @@ --form-field-button-height: var(--dimensions-14); --form-field-button-height-sm: var(--dimensions-13); --form-field-height: var(--dimensions-17); + --form-field-height-lg: var(--dimensions-19); --form-field-height-sm: var(--dimensions-17); --form-field-inner-spacing: var(--dimensions-05); --form-field-inner-spacing-sm: var(--dimensions-03); @@ -1224,6 +1229,7 @@ --table-of-contents-width: var(--containers-04); --table-radius: var(--radius-02-default); --tag-default-loader-padding-y: var(--dimensions-04); + --tag-default-padding-sm: var(--dimensions-01); --tag-default-padding-x: var(--dimensions-03); --tag-default-padding-y: var(--dimensions-02); --tag-default-radius: var(--radius-02-default); diff --git a/src/variables/themes/default/color-variables__dark.scss b/src/variables/themes/default/color-variables__dark.scss index 0db9f9e9..8332e159 100644 --- a/src/variables/themes/default/color-variables__dark.scss +++ b/src/variables/themes/default/color-variables__dark.scss @@ -25,41 +25,41 @@ --alert-toast-text-success: var(--alert-default-text-success); --alert-toast-text-warning: var(--alert-default-text-warning); --avatar-background-default: var(--general-status-neutral-background-light); - --brand-logo: var(--tedi-neutral-100); - --button-card-active-background: var(--tedi-neutral-750); - --button-card-active-border: var(--tedi-neutral-800); - --button-card-active-icon-background: var(--tedi-neutral-750); + --brand-logo: var(--neutral-100); + --button-card-active-background: var(--neutral-750); + --button-card-active-border: var(--neutral-800); + --button-card-active-icon-background: var(--neutral-750); --button-card-disabled-background: var(--form-general-background-disabled); --button-card-disabled-border: var(--form-general-border-disabled); - --button-card-hover-background: var(--tedi-neutral-800); - --button-card-hover-border: var(--tedi-neutral-750); - --button-card-hover-icon-background: var(--tedi-neutral-800); + --button-card-hover-background: var(--neutral-800); + --button-card-hover-border: var(--neutral-750); + --button-card-hover-icon-background: var(--neutral-800); --button-card-icon-default: var(--general-icon-secondary); --button-card-icon-disabled: var(--general-text-disabled); --button-card-icon-hover: var(--general-icon-white); - --button-close-background-active: var(--tedi-alpha-20); - --button-close-background-default: var(--tedi-alpha-01); - --button-close-background-focus: var(--tedi-alpha-01); - --button-close-background-hover: var(--tedi-alpha-10); + --button-close-background-active: var(--alpha-20); + --button-close-background-default: var(--alpha-01); + --button-close-background-focus: var(--alpha-01); + --button-close-background-hover: var(--alpha-10); --button-close-text-active: var(--general-text-primary); - --button-close-text-default: var(--tedi-alpha-white-80); + --button-close-text-default: var(--alpha-white-80); --button-close-text-focus: var(--general-text-primary); --button-close-text-hover: var(--general-text-primary); - --button-floating-primary-background-active: var(--tedi-primary-100); - --button-floating-primary-background-default: var(--tedi-primary-300); - --button-floating-primary-background-focus: var(--tedi-primary-300); - --button-floating-primary-background-hover: var(--tedi-primary-200); + --button-floating-primary-background-active: var(--primary-100); + --button-floating-primary-background-default: var(--primary-300); + --button-floating-primary-background-focus: var(--primary-300); + --button-floating-primary-background-hover: var(--primary-200); --button-floating-primary-border-active: var(--button-floating-primary-background-active); --button-floating-primary-border-default: var(--button-floating-primary-background-default); --button-floating-primary-border-focus: var(--button-floating-primary-background-focus); --button-floating-primary-border-hover: var(--button-floating-primary-background-hover); - --button-floating-primary-text-active: var(--tedi-primary-800); - --button-floating-primary-text-default: var(--tedi-primary-700); - --button-floating-primary-text-hover: var(--tedi-primary-800); - --button-floating-secondary-background-active: var(--tedi-neutral-700); - --button-floating-secondary-background-default: var(--tedi-neutral-800); - --button-floating-secondary-background-focus: var(--tedi-neutral-800); - --button-floating-secondary-background-hover: var(--tedi-neutral-750); + --button-floating-primary-text-active: var(--primary-800); + --button-floating-primary-text-default: var(--primary-700); + --button-floating-primary-text-hover: var(--primary-800); + --button-floating-secondary-background-active: var(--neutral-700); + --button-floating-secondary-background-default: var(--neutral-800); + --button-floating-secondary-background-focus: var(--neutral-800); + --button-floating-secondary-background-hover: var(--neutral-750); --button-floating-secondary-border-active: var(--button-floating-secondary-background-active); --button-floating-secondary-border-default: var(--button-floating-secondary-background-default); --button-floating-secondary-border-focus: var(--button-floating-secondary-background-focus); @@ -79,7 +79,7 @@ --button-group-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background); --button-group-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group); --button-group-primary-selected-text: var(--form-checkbox-radio-card-primary-hover-text); - --button-group-secondary-disabled-background: var(--tedi-alpha-01); + --button-group-secondary-disabled-background: var(--alpha-01); --button-group-secondary-disabled-border: var(--button-group-secondary-inactive-border); --button-group-secondary-disabled-text: var(--button-main-disabled-general-text); --button-group-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background); @@ -91,117 +91,120 @@ --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background); --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border); --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text); - --button-main-danger-background-active: var(--tedi-red-500); - --button-main-danger-background-default: var(--tedi-red-300); - --button-main-danger-background-focus: var(--tedi-red-300); - --button-main-danger-background-hover: var(--tedi-red-400); + --button-main-danger-background-active: var(--red-500); + --button-main-danger-background-default: var(--red-300); + --button-main-danger-background-focus: var(--red-300); + --button-main-danger-background-hover: var(--red-400); --button-main-danger-border-active: var(--button-main-danger-background-active); --button-main-danger-border-default: var(--button-main-danger-background-default); --button-main-danger-border-focus: var(--button-main-danger-background-focus); --button-main-danger-border-hover: var(--button-main-danger-background-hover); - --button-main-danger-neutral-background-active: var(--tedi-alpha-01); - --button-main-danger-neutral-background-default: var(--tedi-alpha-01); - --button-main-danger-neutral-background-focus: var(--tedi-alpha-01); - --button-main-danger-neutral-background-hover: var(--tedi-alpha-01); - --button-main-danger-neutral-border-active: var(--tedi-alpha-01); - --button-main-danger-neutral-border-default: var(--tedi-alpha-01); + --button-main-danger-neutral-background-active: var(--alpha-01); + --button-main-danger-neutral-background-default: var(--alpha-01); + --button-main-danger-neutral-background-focus: var(--alpha-01); + --button-main-danger-neutral-background-hover: var(--alpha-01); + --button-main-danger-neutral-border-active: var(--alpha-01); + --button-main-danger-neutral-border-default: var(--alpha-01); --button-main-danger-neutral-border-focus: var(--general-surface-primary); - --button-main-danger-neutral-border-hover: var(--tedi-alpha-01); - --button-main-danger-neutral-icon-only-background-active: var(--tedi-red-800); + --button-main-danger-neutral-border-hover: var(--alpha-01); + --button-main-danger-neutral-icon-only-background-active: var(--red-800); --button-main-danger-neutral-icon-only-background-default: var(--button-main-danger-neutral-background-default); --button-main-danger-neutral-icon-only-background-focus: var(--button-main-danger-neutral-background-focus); - --button-main-danger-neutral-icon-only-background-hover: var(--tedi-red-700); - --button-main-danger-neutral-text-active: var(--tedi-red-100); - --button-main-danger-neutral-text-default: var(--tedi-red-300); - --button-main-danger-neutral-text-focus: var(--tedi-red-300); - --button-main-danger-neutral-text-hover: var(--tedi-red-200); - --button-main-danger-text-default: var(--tedi-neutral-900); + --button-main-danger-neutral-icon-only-background-hover: var(--red-700); + --button-main-danger-neutral-text-active: var(--red-100); + --button-main-danger-neutral-text-default: var(--red-300); + --button-main-danger-neutral-text-focus: var(--red-300); + --button-main-danger-neutral-text-hover: var(--red-200); + --button-main-danger-text-default: var(--neutral-900); --button-main-disabled-general-background: var(--general-surface-disabled); --button-main-disabled-general-border: var(--general-surface-disabled); --button-main-disabled-general-text: var(--general-text-disabled); --button-main-disabled-neutral-background: var(--button-main-neutral-background-default); --button-main-disabled-neutral-border: var(--button-main-neutral-border-default); - --button-main-neutral-background-active: var(--tedi-alpha-01); - --button-main-neutral-background-default: var(--tedi-alpha-01); - --button-main-neutral-background-focus: var(--tedi-alpha-01); - --button-main-neutral-background-hover: var(--tedi-alpha-01); - --button-main-neutral-border-active: var(--tedi-alpha-01); - --button-main-neutral-border-default: var(--tedi-alpha-01); + --button-main-neutral-background-active: var(--alpha-01); + --button-main-neutral-background-default: var(--alpha-01); + --button-main-neutral-background-focus: var(--alpha-01); + --button-main-neutral-background-hover: var(--alpha-01); + --button-main-neutral-border-active: var(--alpha-01); + --button-main-neutral-border-default: var(--alpha-01); --button-main-neutral-border-focus: var(--general-surface-primary); - --button-main-neutral-border-hover: var(--tedi-alpha-01); + --button-main-neutral-border-hover: var(--alpha-01); --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active); - --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01); + --button-main-neutral-icon-only-background-default: var(--alpha-01); --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default); --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover); - --button-main-neutral-inverted-background-active: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-default: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-focus: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-hover: var(--tedi-alpha-01); - --button-main-neutral-inverted-border-active: var(--tedi-alpha-01); - --button-main-neutral-inverted-border-default: var(--tedi-alpha-01); + --button-main-neutral-inverted-background-active: var(--alpha-01); + --button-main-neutral-inverted-background-default: var(--alpha-01); + --button-main-neutral-inverted-background-focus: var(--alpha-01); + --button-main-neutral-inverted-background-hover: var(--alpha-01); + --button-main-neutral-inverted-border-active: var(--alpha-01); + --button-main-neutral-inverted-border-default: var(--alpha-01); --button-main-neutral-inverted-border-focus: var(--general-surface-primary); - --button-main-neutral-inverted-border-hover: var(--tedi-alpha-01); + --button-main-neutral-inverted-border-hover: var(--alpha-01); --button-main-neutral-inverted-icon-only-background-active: var(--button-main-secondary-inverted-background-active); --button-main-neutral-inverted-icon-only-background-default: var(--button-main-secondary-inverted-background-default); --button-main-neutral-inverted-icon-only-background-focus: var(--button-main-secondary-inverted-background-focus); --button-main-neutral-inverted-icon-only-background-hover: var(--button-main-secondary-inverted-background-hover); - --button-main-neutral-inverted-text-active: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-default: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-hover: var(--tedi-primary-200); - --button-main-neutral-text-active: var(--tedi-primary-300); - --button-main-neutral-text-default: var(--tedi-neutral-100); - --button-main-neutral-text-focus: var(--tedi-neutral-100); - --button-main-neutral-text-hover: var(--tedi-primary-200); - --button-main-primary-background-active: var(--tedi-primary-100); - --button-main-primary-background-default: var(--tedi-primary-300); - --button-main-primary-background-focus: var(--tedi-primary-300); - --button-main-primary-background-hover: var(--tedi-primary-200); + --button-main-neutral-inverted-text-active: var(--neutral-100); + --button-main-neutral-inverted-text-default: var(--neutral-100); + --button-main-neutral-inverted-text-focus: var(--neutral-100); + --button-main-neutral-inverted-text-hover: var(--primary-200); + --button-main-neutral-text-active: var(--primary-300); + --button-main-neutral-text-default: var(--neutral-100); + --button-main-neutral-text-focus: var(--neutral-100); + --button-main-neutral-text-hover: var(--primary-200); + --button-main-primary-background-active: var(--primary-100); + --button-main-primary-background-default: var(--primary-300); + --button-main-primary-background-focus: var(--primary-300); + --button-main-primary-background-hover: var(--primary-200); --button-main-primary-border-active: var(--button-main-primary-background-active); --button-main-primary-border-default: var(--button-main-primary-background-default); --button-main-primary-border-focus: var(--button-main-primary-background-focus); --button-main-primary-border-hover: var(--button-main-primary-background-hover); - --button-main-primary-inverted-background-active: var(--tedi-primary-300); - --button-main-primary-inverted-background-default: var(--tedi-primary-200); + --button-main-primary-inverted-background-active: var(--primary-300); + --button-main-primary-inverted-background-default: var(--primary-200); --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default); - --button-main-primary-inverted-background-hover: var(--tedi-primary-300); + --button-main-primary-inverted-background-hover: var(--primary-300); --button-main-primary-inverted-border-active: var(--button-main-primary-inverted-background-active); --button-main-primary-inverted-border-default: var(--button-main-primary-inverted-background-default); --button-main-primary-inverted-border-focus: var(--button-main-primary-inverted-background-focus); --button-main-primary-inverted-border-hover: var(--button-main-primary-inverted-background-hover); - --button-main-primary-inverted-text-active: var(--tedi-primary-800); - --button-main-primary-inverted-text-default: var(--tedi-primary-700); - --button-main-primary-inverted-text-hover: var(--tedi-primary-700); - --button-main-primary-text-active: var(--tedi-primary-800); - --button-main-primary-text-default: var(--tedi-primary-700); - --button-main-primary-text-hover: var(--tedi-primary-800); + --button-main-primary-inverted-text-active: var(--primary-800); + --button-main-primary-inverted-text-default: var(--primary-700); + --button-main-primary-inverted-text-hover: var(--primary-700); + --button-main-primary-text-active: var(--primary-800); + --button-main-primary-text-default: var(--primary-700); + --button-main-primary-text-hover: var(--primary-800); --button-main-secondary-background-active: var(--general-surface-brand-tertiary); - --button-main-secondary-background-default: var(--tedi-neutral-850); - --button-main-secondary-background-focus: var(--tedi-neutral-850); + --button-main-secondary-background-default: var(--neutral-850); + --button-main-secondary-background-focus: var(--neutral-850); --button-main-secondary-background-hover: var(--general-surface-hover); - --button-main-secondary-border-active: var(--tedi-primary-200); - --button-main-secondary-border-default: var(--tedi-neutral-300); - --button-main-secondary-border-focus: var(--tedi-primary-100); - --button-main-secondary-border-hover: var(--tedi-primary-100); - --button-main-secondary-inverted-background-active: var(--tedi-alpha-white-10); - --button-main-secondary-inverted-background-default: var(--tedi-alpha-01); - --button-main-secondary-inverted-background-focus: var(--tedi-alpha-01); - --button-main-secondary-inverted-background-hover: var(--tedi-alpha-white-10); - --button-main-secondary-inverted-border-active: var(--tedi-neutral-100); - --button-main-secondary-inverted-border-default: var(--tedi-alpha-white-50); - --button-main-secondary-inverted-border-focus: var(--tedi-neutral-100); - --button-main-secondary-inverted-border-hover: var(--tedi-neutral-100); + --button-main-secondary-border-active: var(--primary-200); + --button-main-secondary-border-default: var(--neutral-300); + --button-main-secondary-border-focus: var(--primary-100); + --button-main-secondary-border-hover: var(--primary-100); + --button-main-secondary-inverted-background-active: var(--alpha-white-10); + --button-main-secondary-inverted-background-default: var(--alpha-01); + --button-main-secondary-inverted-background-focus: var(--alpha-01); + --button-main-secondary-inverted-background-hover: var(--alpha-white-10); + --button-main-secondary-inverted-border-active: var(--neutral-100); + --button-main-secondary-inverted-border-default: var(--alpha-white-50); + --button-main-secondary-inverted-border-focus: var(--neutral-100); + --button-main-secondary-inverted-border-hover: var(--neutral-100); --button-main-secondary-inverted-text-default: var(--general-text-white); - --button-main-secondary-text-default: var(--tedi-neutral-100); - --button-main-success-background-active: var(--tedi-green-500); - --button-main-success-background-default: var(--tedi-green-300); - --button-main-success-background-focus: var(--tedi-green-300); - --button-main-success-background-hover: var(--tedi-green-400); + --button-main-secondary-text-active: var(--neutral-100); + --button-main-secondary-text-default: var(--neutral-100); + --button-main-secondary-text-focus: var(--neutral-100); + --button-main-secondary-text-hover: var(--neutral-100); + --button-main-success-background-active: var(--green-500); + --button-main-success-background-default: var(--green-300); + --button-main-success-background-focus: var(--green-300); + --button-main-success-background-hover: var(--green-400); --button-main-success-border-active: var(--button-main-success-background-active); --button-main-success-border-default: var(--button-main-success-background-default); --button-main-success-border-focus: var(--button-main-success-background-focus); --button-main-success-border-hover: var(--button-main-success-background-hover); - --button-main-success-text-default: var(--tedi-neutral-900); + --button-main-success-text-default: var(--neutral-900); --card-background-accent: var(--general-surface-accent); --card-background-brand-primary: var(--general-surface-brand-primary); --card-background-brand-quaternary: var(--general-surface-brand-quaternary); @@ -219,7 +222,7 @@ --card-body-background-secondary: var(--general-surface-secondary); --card-border-distinctive: var(--card-body-background-distinctive-primary); --card-border-primary: var(--general-border-primary); - --card-border-selected: var(--tedi-primary-300); + --card-border-selected: var(--primary-300); --carousel-dot-background-active: var(--button-main-primary-background-active); --carousel-dot-background-focus: var(--general-surface-primary); --carousel-dot-background-selected: var(--button-main-primary-background-default); @@ -228,7 +231,7 @@ --carousel-dot-border-focus: var(--button-main-primary-background-focus); --carousel-dot-border-hover: var(--button-main-primary-background-hover); --carousel-dot-border-selected: var(--button-main-primary-background-default); - --choice-group-active-text: var(--tedi-neutral-100); + --choice-group-active-text: var(--neutral-100); --dropdown-item-active-background: var(--general-surface-selected); --dropdown-item-active-text: var(--general-text-white); --dropdown-item-default-background: var(--general-surface-primary); @@ -274,18 +277,18 @@ --filter-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background); --filter-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border); --filter-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text); - --footer-background: var(--tedi-neutral-750); - --footer-bottom-background: var(--tedi-neutral-800); - --footer-icon-background: var(--tedi-alpha-white-20); + --footer-background: var(--neutral-750); + --footer-bottom-background: var(--neutral-800); + --footer-icon-background: var(--alpha-white-20); --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text); --form-checkbox-radio-card-primary-default-background: var(--general-surface-primary); - --form-checkbox-radio-card-primary-default-border-group: var(--tedi-neutral-500); - --form-checkbox-radio-card-primary-default-border-separate: var(--tedi-neutral-500); + --form-checkbox-radio-card-primary-default-border-group: var(--neutral-500); + --form-checkbox-radio-card-primary-default-border-separate: var(--neutral-500); --form-checkbox-radio-card-primary-default-text: var(--general-text-secondary); --form-checkbox-radio-card-primary-disabled-default-background: var(--form-general-background-disabled); --form-checkbox-radio-card-primary-disabled-default-text: var(--general-text-disabled); - --form-checkbox-radio-card-primary-disabled-selected-background: var(--tedi-primary-800); - --form-checkbox-radio-card-primary-disabled-selected-text: var(--tedi-primary-500); + --form-checkbox-radio-card-primary-disabled-selected-background: var(--primary-800); + --form-checkbox-radio-card-primary-disabled-selected-text: var(--primary-500); --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover); --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover); --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default); @@ -301,32 +304,32 @@ --form-checkbox-radio-card-secondary-disabled-default-text: var(--general-text-disabled); --form-checkbox-radio-card-secondary-disabled-selected-background: var(--general-surface-primary); --form-checkbox-radio-card-secondary-disabled-selected-border: var(--form-checkbox-radio-default-border-selected-disabled); - --form-checkbox-radio-card-secondary-disabled-selected-text: var(--tedi-primary-600); + --form-checkbox-radio-card-secondary-disabled-selected-text: var(--primary-600); --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover); --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover); --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-border-hover); --form-checkbox-radio-card-secondary-selected-background: var(--button-main-secondary-background-default); - --form-checkbox-radio-card-secondary-selected-border: var(--tedi-primary-300); + --form-checkbox-radio-card-secondary-selected-border: var(--primary-300); --form-checkbox-radio-card-secondary-selected-text: var(--general-text-brand); - --form-checkbox-radio-default-background-active: var(--tedi-primary-300); - --form-checkbox-radio-default-background-default: var(--tedi-neutral-850); - --form-checkbox-radio-default-background-error: var(--tedi-neutral-850); - --form-checkbox-radio-default-background-focus: var(--tedi-neutral-850); - --form-checkbox-radio-default-background-hover: var(--tedi-neutral-850); - --form-checkbox-radio-default-background-inverted: var(--tedi-neutral-100); - --form-checkbox-radio-default-background-selected: var(--tedi-primary-200); - --form-checkbox-radio-default-background-selected-disabled: var(--tedi-primary-700); - --form-checkbox-radio-default-background-selected-inverted: var(--tedi-primary-600); - --form-checkbox-radio-default-border-active: var(--tedi-primary-400); + --form-checkbox-radio-default-background-active: var(--primary-300); + --form-checkbox-radio-default-background-default: var(--neutral-850); + --form-checkbox-radio-default-background-error: var(--neutral-850); + --form-checkbox-radio-default-background-focus: var(--neutral-850); + --form-checkbox-radio-default-background-hover: var(--neutral-850); + --form-checkbox-radio-default-background-inverted: var(--neutral-100); + --form-checkbox-radio-default-background-selected: var(--primary-200); + --form-checkbox-radio-default-background-selected-disabled: var(--primary-700); + --form-checkbox-radio-default-background-selected-inverted: var(--primary-600); + --form-checkbox-radio-default-border-active: var(--primary-400); --form-checkbox-radio-default-border-default: var(--form-general-border-default); --form-checkbox-radio-default-border-focus: var(--form-general-border-default); - --form-checkbox-radio-default-border-hover: var(--tedi-primary-300); - --form-checkbox-radio-default-border-inverted: var(--tedi-primary-300); - --form-checkbox-radio-default-border-selected: var(--tedi-primary-400); - --form-checkbox-radio-default-border-selected-disabled: var(--tedi-primary-700); - --form-checkbox-radio-default-border-selected-inverted: var(--tedi-primary-600); - --form-checkbox-radio-default-check-indicator-active: var(--tedi-primary-700); - --form-checkbox-radio-default-check-indicator-default: var(--tedi-primary-600); + --form-checkbox-radio-default-border-hover: var(--primary-300); + --form-checkbox-radio-default-border-inverted: var(--primary-300); + --form-checkbox-radio-default-border-selected: var(--primary-400); + --form-checkbox-radio-default-border-selected-disabled: var(--primary-700); + --form-checkbox-radio-default-border-selected-inverted: var(--primary-600); + --form-checkbox-radio-default-check-indicator-active: var(--primary-700); + --form-checkbox-radio-default-check-indicator-default: var(--primary-600); --form-datepicker-date-active: var(--button-main-secondary-background-active); --form-datepicker-date-available: var(--general-status-success-background-primary); --form-datepicker-date-default: var(--button-main-secondary-background-default); @@ -336,18 +339,18 @@ --form-datepicker-date-text-available: var(--general-status-success-text); --form-datepicker-date-text-muted: var(--general-text-disabled); --form-datepicker-date-text-selected: var(--general-text-white); - --form-datepicker-today-border: var(--tedi-alpha-white-80); - --form-datepicker-today-border-secondary: var(--tedi-alpha-white-80); + --form-datepicker-today-border: var(--alpha-white-80); + --form-datepicker-today-border-secondary: var(--alpha-white-80); --form-general-background-action-background: var(--general-surface-secondary); --form-general-background-default: var(--general-surface-primary); - --form-general-background-disabled: var(--tedi-neutral-850); - --form-general-border-default: var(--tedi-neutral-400); - --form-general-border-disabled: var(--tedi-neutral-700); - --form-general-feedback-error-border: var(--tedi-red-400); - --form-general-feedback-error-text: var(--tedi-red-300); - --form-general-feedback-success-border: var(--tedi-green-400); - --form-general-feedback-success-text: var(--tedi-green-300); - --form-hidden-default: var(--tedi-alpha-01); + --form-general-background-disabled: var(--neutral-850); + --form-general-border-default: var(--neutral-400); + --form-general-border-disabled: var(--neutral-700); + --form-general-feedback-error-border: var(--red-400); + --form-general-feedback-error-text: var(--red-300); + --form-general-feedback-success-border: var(--green-400); + --form-general-feedback-success-text: var(--green-300); + --form-hidden-default: var(--alpha-01); --form-hidden-hover: var(--general-surface-tertiary); --form-input-background-default: var(--form-general-background-default); --form-input-background-disabled: var(--form-general-background-disabled); @@ -355,127 +358,127 @@ --form-input-border-default: var(--form-general-border-default); --form-input-border-disabled: var(--form-general-border-disabled); --form-input-border-focus: var(--form-input-border-hover); - --form-input-border-hover: var(--tedi-primary-300); + --form-input-border-hover: var(--primary-300); --form-input-text-disabled: var(--general-text-secondary); --form-input-text-filled: var(--general-text-primary); - --form-input-text-placeholder: var(--tedi-neutral-450); - --form-slider-active-background-active: var(--tedi-blue-500); - --form-slider-active-background-default: var(--tedi-blue-300); - --form-slider-active-background-disabled: var(--tedi-neutral-700); - --form-slider-active-background-focus: var(--tedi-blue-300); - --form-slider-active-background-hover: var(--tedi-blue-400); - --form-slider-border-default: var(--tedi-neutral-550); - --form-slider-passive-background-default: var(--tedi-neutral-900); + --form-input-text-placeholder: var(--neutral-450); + --form-slider-active-background-active: var(--blue-500); + --form-slider-active-background-default: var(--blue-300); + --form-slider-active-background-disabled: var(--neutral-700); + --form-slider-active-background-focus: var(--blue-300); + --form-slider-active-background-hover: var(--blue-400); + --form-slider-border-default: var(--neutral-550); + --form-slider-passive-background-default: var(--neutral-900); --form-slider-range-label-text: var(--general-text-tertiary); --form-slider-thumb-background-active: var(--general-surface-brand-tertiary); - --form-slider-thumb-background-default: var(--tedi-neutral-100); - --form-slider-thumb-background-disabled: var(--tedi-neutral-100); - --form-slider-thumb-background-focus: var(--tedi-neutral-100); + --form-slider-thumb-background-default: var(--neutral-100); + --form-slider-thumb-background-disabled: var(--neutral-100); + --form-slider-thumb-background-focus: var(--neutral-100); --form-slider-thumb-background-hover: var(--general-surface-brand-tertiary); - --form-slider-thumb-border-active: var(--tedi-blue-500); - --form-slider-thumb-border-default: var(--tedi-blue-300); - --form-slider-thumb-border-disabled: var(--tedi-neutral-700); - --form-slider-thumb-border-focus: var(--tedi-blue-300); - --form-slider-thumb-border-hover: var(--tedi-blue-400); + --form-slider-thumb-border-active: var(--blue-500); + --form-slider-thumb-border-default: var(--blue-300); + --form-slider-thumb-border-disabled: var(--neutral-700); + --form-slider-thumb-border-focus: var(--blue-300); + --form-slider-thumb-border-hover: var(--blue-400); --form-slider-track: var(--general-surface-primary); - --form-toggl-colored-active-active: var(--tedi-green-600); - --form-toggl-colored-active-default: var(--tedi-green-500); - --form-toggl-colored-active-hover: var(--tedi-green-600); - --form-toggl-colored-active-icon: var(--tedi-green-500); + --form-toggl-colored-active-active: var(--green-600); + --form-toggl-colored-active-default: var(--green-500); + --form-toggl-colored-active-hover: var(--green-600); + --form-toggl-colored-active-icon: var(--green-500); --form-toggl-colored-active-icon-outlined: var(--general-icon-white); - --form-toggl-colored-active-indicator: var(--tedi-neutral-100); - --form-toggl-colored-inactive-active: var(--tedi-red-600); - --form-toggl-colored-inactive-default: var(--tedi-red-500); - --form-toggl-colored-inactive-hover: var(--tedi-red-600); - --form-toggl-colored-inactive-icon: var(--tedi-red-600); + --form-toggl-colored-active-indicator: var(--neutral-100); + --form-toggl-colored-inactive-active: var(--red-600); + --form-toggl-colored-inactive-default: var(--red-500); + --form-toggl-colored-inactive-hover: var(--red-600); + --form-toggl-colored-inactive-icon: var(--red-600); --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white); - --form-toggl-colored-inactive-indicator: var(--tedi-neutral-100); - --form-toggl-outlined-background: var(--tedi-alpha-01); - --form-toggl-primary-active-active: var(--tedi-primary-500); - --form-toggl-primary-active-default: var(--tedi-primary-400); - --form-toggl-primary-active-hover: var(--tedi-primary-500); - --form-toggl-primary-active-icon: var(--tedi-primary-400); + --form-toggl-colored-inactive-indicator: var(--neutral-100); + --form-toggl-outlined-background: var(--alpha-01); + --form-toggl-primary-active-active: var(--primary-500); + --form-toggl-primary-active-default: var(--primary-400); + --form-toggl-primary-active-hover: var(--primary-500); + --form-toggl-primary-active-icon: var(--primary-400); --form-toggl-primary-active-icon-outlined: var(--general-icon-white); - --form-toggl-primary-active-indicator: var(--tedi-neutral-100); - --form-toggl-primary-inactive-active: var(--tedi-neutral-550); - --form-toggl-primary-inactive-default: var(--tedi-neutral-450); - --form-toggl-primary-inactive-hover: var(--tedi-neutral-500); - --form-toggl-primary-inactive-icon: var(--tedi-neutral-450); + --form-toggl-primary-active-indicator: var(--neutral-100); + --form-toggl-primary-inactive-active: var(--neutral-550); + --form-toggl-primary-inactive-default: var(--neutral-450); + --form-toggl-primary-inactive-hover: var(--neutral-500); + --form-toggl-primary-inactive-icon: var(--neutral-450); --form-toggl-primary-inactive-icon-outlined: var(--general-icon-white); - --form-toggl-primary-inactive-indicator: var(--tedi-neutral-100); - --general-border-accent: var(--tedi-accent-600); - --general-border-brand: var(--tedi-primary-600); - --general-border-primary: var(--tedi-neutral-750); - --general-border-secondary: var(--tedi-neutral-500); - --general-border-transparent-white: var(--tedi-alpha-white-30); - --general-border-white: var(--tedi-neutral-100); - --general-icon-accent: var(--tedi-orange-300); + --form-toggl-primary-inactive-indicator: var(--neutral-100); + --general-border-accent: var(--accent-600); + --general-border-brand: var(--primary-600); + --general-border-primary: var(--neutral-750); + --general-border-secondary: var(--neutral-500); + --general-border-transparent-white: var(--alpha-white-30); + --general-border-white: var(--neutral-100); + --general-icon-accent: var(--orange-300); --general-icon-background-brand-primary: var(--general-surface-brand-primary); --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary); - --general-icon-background-primary: var(--tedi-alpha-40); - --general-icon-background-secondary: var(--tedi-alpha-white-30); - --general-icon-brand: var(--tedi-primary-300); - --general-icon-brand-dark: var(--tedi-primary-400); - --general-icon-danger: var(--tedi-red-300); - --general-icon-primary: var(--tedi-neutral-100); - --general-icon-secondary: var(--tedi-neutral-450); - --general-icon-success: var(--tedi-green-300); - --general-icon-tertiary: var(--tedi-neutral-400); - --general-icon-warning: var(--tedi-yellow-200); - --general-icon-warning-dark: var(--tedi-yellow-300); - --general-icon-white: var(--tedi-neutral-100); + --general-icon-background-primary: var(--alpha-40); + --general-icon-background-secondary: var(--alpha-white-30); + --general-icon-brand: var(--primary-300); + --general-icon-brand-dark: var(--primary-400); + --general-icon-danger: var(--red-300); + --general-icon-primary: var(--neutral-100); + --general-icon-secondary: var(--neutral-450); + --general-icon-success: var(--green-300); + --general-icon-tertiary: var(--neutral-400); + --general-icon-warning: var(--yellow-200); + --general-icon-warning-dark: var(--yellow-300); + --general-icon-white: var(--neutral-100); --general-separator-primary: var(--general-border-primary); - --general-status-danger-background-primary: var(--tedi-red-700); - --general-status-danger-background-secondary: var(--tedi-red-700); - --general-status-danger-background-tertiary: var(--tedi-red-600); - --general-status-danger-border: var(--tedi-red-500); + --general-status-danger-background-primary: var(--red-700); + --general-status-danger-background-secondary: var(--red-700); + --general-status-danger-background-tertiary: var(--red-600); + --general-status-danger-border: var(--red-500); --general-status-danger-text: var(--general-text-primary); - --general-status-info-background-dark: var(--tedi-blue-400); - --general-status-info-background-light: var(--tedi-blue-700); - --general-status-info-border: var(--tedi-blue-400); + --general-status-info-background-dark: var(--blue-400); + --general-status-info-background-light: var(--blue-700); + --general-status-info-border: var(--blue-400); --general-status-info-text: var(--general-text-primary); - --general-status-neutral-background-dark: var(--tedi-neutral-350); - --general-status-neutral-background-light: var(--tedi-neutral-800); - --general-status-neutral-border: var(--tedi-neutral-400); + --general-status-neutral-background-dark: var(--neutral-350); + --general-status-neutral-background-light: var(--neutral-800); + --general-status-neutral-border: var(--neutral-400); --general-status-neutral-text: var(--general-text-primary); - --general-status-success-background-primary: var(--tedi-green-700); - --general-status-success-background-primary: var(--tedi-green-700); - --general-status-success-background-secondary: var(--tedi-green-700); - --general-status-success-background-tertiary: var(--tedi-green-600); - --general-status-success-border: var(--tedi-green-500); + --general-status-success-background-primary: var(--green-700); + --general-status-success-background-primary: var(--green-700); + --general-status-success-background-secondary: var(--green-700); + --general-status-success-background-tertiary: var(--green-600); + --general-status-success-border: var(--green-500); --general-status-success-text: var(--general-text-primary); - --general-status-warning-background-dark: var(--tedi-yellow-400); - --general-status-warning-background-light: var(--tedi-yellow-700); - --general-status-warning-background-primary: var(--tedi-yellow-700); - --general-status-warning-border: var(--tedi-yellow-600); + --general-status-warning-background-dark: var(--yellow-400); + --general-status-warning-background-light: var(--yellow-700); + --general-status-warning-background-primary: var(--yellow-700); + --general-status-warning-border: var(--yellow-600); --general-status-warning-text: var(--general-text-primary); - --general-surface-accent: var(--tedi-accent-700); + --general-surface-accent: var(--accent-700); --general-surface-active: var(--general-surface-brand-secondary); - --general-surface-brand-primary: var(--tedi-primary-600); - --general-surface-brand-quaternary: var(--tedi-primary-800); - --general-surface-brand-secondary: var(--tedi-primary-500); - --general-surface-brand-tertiary: var(--tedi-primary-700); - --general-surface-disabled: var(--tedi-neutral-850); + --general-surface-brand-primary: var(--primary-600); + --general-surface-brand-quaternary: var(--primary-800); + --general-surface-brand-secondary: var(--primary-500); + --general-surface-brand-tertiary: var(--primary-700); + --general-surface-disabled: var(--neutral-850); --general-surface-hover: var(--general-surface-brand-quaternary); - --general-surface-inverted-primary: var(--tedi-neutral-350); - --general-surface-inverted-secondary: var(--tedi-neutral-300); - --general-surface-inverted-tertiary: var(--tedi-neutral-400); - --general-surface-overlay: var(--tedi-alpha-80); - --general-surface-primary: var(--tedi-neutral-850); - --general-surface-secondary: var(--tedi-neutral-800); + --general-surface-inverted-primary: var(--neutral-350); + --general-surface-inverted-secondary: var(--neutral-300); + --general-surface-inverted-tertiary: var(--neutral-400); + --general-surface-overlay: var(--alpha-80); + --general-surface-primary: var(--neutral-850); + --general-surface-secondary: var(--neutral-800); --general-surface-selected: var(--general-surface-brand-secondary); --general-surface-success: var(--general-status-success-background-primary); - --general-surface-tertiary: var(--tedi-neutral-750); - --general-text-brand: var(--tedi-primary-200); - --general-text-dark: var(--tedi-neutral-850); - --general-text-disabled: var(--tedi-neutral-600); - --general-text-primary: var(--tedi-neutral-100); - --general-text-secondary: var(--tedi-neutral-300); - --general-text-tertiary: var(--tedi-neutral-400); - --general-text-text-inverted-tehik: var(--tedi-neutral-100); - --general-text-white: var(--tedi-neutral-100); + --general-surface-tertiary: var(--neutral-750); + --general-text-brand: var(--primary-200); + --general-text-dark: var(--neutral-850); + --general-text-disabled: var(--neutral-600); + --general-text-primary: var(--neutral-100); + --general-text-secondary: var(--neutral-300); + --general-text-tertiary: var(--neutral-400); + --general-text-text-inverted-tehik: var(--neutral-100); + --general-text-white: var(--neutral-100); --header-background: var(--general-surface-primary); - --header-bottom-border: var(--tedi-neutral-900); + --header-bottom-border: var(--neutral-900); --header-modal-item-active-background: var(--dropdown-item-active-background); --header-modal-item-active-text: var(--dropdown-item-active-text); --header-modal-item-default-background: var(--dropdown-item-default-background); @@ -484,7 +487,7 @@ --header-modal-item-disabled-text: var(--dropdown-item-disabled-text); --header-modal-item-hover-background: var(--dropdown-item-hover-background); --header-modal-item-hover-text: var(--dropdown-item-hover-text); - --header-popover-border-top: var(--tedi-primary-500); + --header-popover-border-top: var(--primary-500); --header-popover-item-active: var(--general-surface-active); --header-popover-item-hover: var(--general-surface-hover); --header-popover-item-selected: var(--general-surface-selected); @@ -493,13 +496,13 @@ --link-inverted-default: var(--general-text-white); --link-inverted-focus: var(--general-text-white); --link-inverted-hover: var(--general-text-white); - --link-primary-active: var(--tedi-primary-100); - --link-primary-default: var(--tedi-primary-400); - --link-primary-focus: var(--tedi-primary-200); - --link-primary-hover: var(--tedi-primary-400); + --link-primary-active: var(--primary-100); + --link-primary-default: var(--primary-400); + --link-primary-focus: var(--primary-200); + --link-primary-hover: var(--primary-400); --loader-skeleton-color: rgb(146 147 164 / 20%); - --loader-spinner-color-primary: var(--tedi-alpha-white-80); - --loader-spinner-color-secondary: var(--tedi-alpha-white-80); + --loader-spinner-color-primary: var(--alpha-white-80); + --loader-spinner-color-secondary: var(--alpha-white-80); --modal-background: var(--general-surface-primary); --modal-border-inner: var(--general-border-primary); --modal-border-outer: var(--general-border-primary); @@ -512,35 +515,38 @@ --navigation-horizontal-item-background-hover: var(--navigation-vertical-item-background-hover); --navigation-horizontal-item-background-selected: var(--navigation-vertical-item-background-active); --navigation-horizontal-item-border: var(--navigation-horizontal-item-background-default); - --navigation-horizontal-item-text: var(--navigation-vertical-item-text); + --navigation-horizontal-item-text-default: var(--navigation-vertical-item-text-default); --navigation-horizontal-submenu-background: var(--navigation-horizontal-item-background-selected); --navigation-horizontal-submenu-item-border: var(--navigation-horizontal-item-background-default); - --navigation-horizontal-submenu-item-border-active: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-border-default: var(--tedi-primary-200); - --navigation-horizontal-submenu-item-border-focus: var(--tedi-alpha-01); - --navigation-horizontal-submenu-item-border-hover: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-border-selected: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-active: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-default: var(--tedi-primary-200); + --navigation-horizontal-submenu-item-border-active: var(--neutral-100); + --navigation-horizontal-submenu-item-border-default: var(--primary-200); + --navigation-horizontal-submenu-item-border-focus: var(--alpha-01); + --navigation-horizontal-submenu-item-border-hover: var(--neutral-100); + --navigation-horizontal-submenu-item-border-selected: var(--neutral-100); + --navigation-horizontal-submenu-item-text-active: var(--neutral-100); + --navigation-horizontal-submenu-item-text-default: var(--primary-200); --navigation-horizontal-submenu-item-text-focus: var(--navigation-horizontal-submenu-item-text-default); - --navigation-horizontal-submenu-item-text-hover: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-selected: var(--tedi-neutral-100); + --navigation-horizontal-submenu-item-text-hover: var(--neutral-100); + --navigation-horizontal-submenu-item-text-selected: var(--neutral-100); --navigation-vertical-background: var(--navigation-vertical-item-background-default); - --navigation-vertical-group-title-text: var(--tedi-neutral-450); - --navigation-vertical-item-background-active: var(--tedi-neutral-800); - --navigation-vertical-item-background-arrow-button-active: var(--tedi-neutral-850); - --navigation-vertical-item-background-arrow-button-hover: var(--tedi-neutral-800); - --navigation-vertical-item-background-default: var(--tedi-neutral-900); - --navigation-vertical-item-background-focus: var(--tedi-neutral-900); - --navigation-vertical-item-background-hover: var(--tedi-neutral-850); - --navigation-vertical-item-border: var(--tedi-neutral-800); - --navigation-vertical-item-text: var(--general-text-white); - --navigation-vertical-tree-brand-active: var(--tedi-neutral-700); - --navigation-vertical-tree-brand-default: var(--tedi-neutral-550); - --navigation-vertical-tree-brand-hover: var(--tedi-neutral-600); - --navigation-vertical-tree-neutral-active: var(--tedi-neutral-700); - --navigation-vertical-tree-neutral-default: var(--tedi-neutral-550); - --navigation-vertical-tree-neutral-hover: var(--tedi-neutral-600); + --navigation-vertical-group-title-text: var(--neutral-450); + --navigation-vertical-item-background-active: var(--neutral-800); + --navigation-vertical-item-background-arrow-button-active: var(--neutral-850); + --navigation-vertical-item-background-arrow-button-hover: var(--neutral-800); + --navigation-vertical-item-background-default: var(--neutral-900); + --navigation-vertical-item-background-focus: var(--neutral-900); + --navigation-vertical-item-background-hover: var(--neutral-850); + --navigation-vertical-item-border: var(--neutral-800); + --navigation-vertical-item-text-default: var(--general-text-white); + --navigation-vertical-item-text-focus: var(--navigation-vertical-item-text-default); + --navigation-vertical-item-text-hover: var(--navigation-vertical-item-text-default); + --navigation-vertical-item-text-selected: var(--navigation-vertical-item-text-default); + --navigation-vertical-tree-brand-active: var(--neutral-700); + --navigation-vertical-tree-brand-default: var(--neutral-550); + --navigation-vertical-tree-brand-hover: var(--neutral-600); + --navigation-vertical-tree-neutral-active: var(--neutral-700); + --navigation-vertical-tree-neutral-default: var(--neutral-550); + --navigation-vertical-tree-neutral-hover: var(--neutral-600); --popover-background: var(--general-surface-primary); --popover-border: var(--general-border-secondary); --popover-text: var(--general-text-primary); @@ -548,25 +554,25 @@ --progress-bar-background-passive: var(--form-slider-passive-background-default); --progress-bar-border-default: var(--form-slider-border-default); --progress-bar-range-label-text: var(--form-slider-range-label-text); - --status-badge-background-accent: var(--tedi-orange-700); + --status-badge-background-accent: var(--orange-700); --status-badge-background-brand: var(--general-status-info-background-light); --status-badge-background-danger: var(--general-status-danger-background-primary); --status-badge-background-neutral: var(--general-status-neutral-background-light); --status-badge-background-success: var(--general-status-success-background-primary); - --status-badge-background-transparent: var(--tedi-alpha-01); + --status-badge-background-transparent: var(--alpha-01); --status-badge-background-warning: var(--general-status-warning-background-light); - --status-badge-border-accent: var(--tedi-orange-400); + --status-badge-border-accent: var(--orange-400); --status-badge-border-brand: var(--general-status-info-border); --status-badge-border-danger: var(--general-status-danger-border); --status-badge-border-neutral: var(--general-status-neutral-border); --status-badge-border-success: var(--general-status-success-border); --status-badge-border-warning: var(--general-status-warning-border); - --status-badge-icon-accent: var(--tedi-neutral-100); - --status-badge-icon-brand: var(--tedi-neutral-100); - --status-badge-icon-danger: var(--tedi-neutral-100); - --status-badge-icon-neutral: var(--tedi-neutral-100); - --status-badge-icon-success: var(--tedi-neutral-100); - --status-badge-icon-warning: var(--tedi-neutral-100); + --status-badge-icon-accent: var(--neutral-100); + --status-badge-icon-brand: var(--neutral-100); + --status-badge-icon-danger: var(--neutral-100); + --status-badge-icon-neutral: var(--neutral-100); + --status-badge-icon-success: var(--neutral-100); + --status-badge-icon-warning: var(--neutral-100); --status-badge-indicator-border: var(--general-surface-primary); --status-badge-indicator-danger: var(--general-status-danger-background-secondary); --status-badge-indicator-inactive: var(--general-status-neutral-background-dark); @@ -586,17 +592,17 @@ --stepper-item-horizontal-text-default: var(--general-text-secondary); --stepper-item-horizontal-text-hover: var(--general-text-secondary); --stepper-item-horizontal-text-selected: var(--general-text-white); - --stepper-item-horizontal-type-completed-bg-active: var(--tedi-green-700); + --stepper-item-horizontal-type-completed-bg-active: var(--green-700); --stepper-item-horizontal-type-completed-bg-default: var(--general-status-success-background-primary); - --stepper-item-horizontal-type-completed-bg-hover: var(--tedi-green-700); - --stepper-item-horizontal-type-danger-bg-active: var(--tedi-red-600); + --stepper-item-horizontal-type-completed-bg-hover: var(--green-700); + --stepper-item-horizontal-type-danger-bg-active: var(--red-600); --stepper-item-horizontal-type-danger-bg-default: var(--general-status-danger-background-primary); - --stepper-item-horizontal-type-danger-bg-hover: var(--tedi-red-600); + --stepper-item-horizontal-type-danger-bg-hover: var(--red-600); --stepper-item-horizontal-type-default-bg-active: var(--general-surface-secondary); --stepper-item-horizontal-type-default-bg-default: var(--general-surface-tertiary); --stepper-item-horizontal-type-default-bg-hover: var(--general-surface-secondary); --stepper-item-horizontal-type-selected-bg-default: var(--general-border-brand); - --stepper-item-vertical-line: var(--tedi-neutral-600); + --stepper-item-vertical-line: var(--neutral-600); --stepper-item-vertical-mobile-progressbar-completed: var(--general-status-success-background-tertiary); --stepper-item-vertical-mobile-progressbar-default: var(--stepper-item-vertical-line); --stepper-item-vertical-text-default: var(--general-text-primary); @@ -604,9 +610,9 @@ --stepper-item-vertical-text-hover: var(--link-primary-hover); --stepper-item-vertical-text-selected: var(--link-primary-hover); --stepper-step-completed-bg: var(--general-status-success-background-tertiary); - --stepper-step-completed-bg-hover: var(--tedi-green-800); + --stepper-step-completed-bg-hover: var(--green-800); --stepper-step-danger-bg: var(--general-status-danger-background-tertiary); - --stepper-step-danger-bg-hover: var(--tedi-red-700); + --stepper-step-danger-bg-hover: var(--red-700); --stepper-step-default-bg: var(--general-surface-primary); --stepper-step-default-bg-hover: var(--general-surface-primary); --stepper-step-default-border: var(--stepper-item-vertical-line); @@ -615,17 +621,17 @@ --stepper-step-disabled-border: var(--timeline-default); --stepper-step-selected-bg: var(--general-surface-primary); --stepper-step-selected-border: var(--general-surface-active); - --stepper-step-selected-border-hover: var(--tedi-primary-600); + --stepper-step-selected-border-hover: var(--primary-600); --tab-background: var(--general-surface-secondary); --tab-item-active-background: var(--general-surface-brand-tertiary); - --tab-item-active-text: var(--tedi-primary-200); - --tab-item-default-background: var(--tedi-alpha-01); + --tab-item-active-text: var(--primary-200); + --tab-item-default-background: var(--alpha-01); --tab-item-default-text: var(--general-text-primary); --tab-item-hover-background: var(--general-surface-hover); - --tab-item-hover-text: var(--tedi-primary-200); + --tab-item-hover-text: var(--primary-200); --tab-item-selected-background: var(--general-surface-primary); --tab-item-selected-border: var(--general-surface-selected); - --tab-item-selected-text: var(--tedi-primary-100); + --tab-item-selected-text: var(--primary-100); --table-active: var(--general-surface-brand-tertiary); --table-border: var(--general-border-primary); --table-border-th: var(--general-border-secondary); @@ -633,11 +639,11 @@ --table-hover: var(--general-surface-hover); --table-striped: var(--general-surface-tertiary); --tag-danger-background: var(--general-status-danger-background-primary); - --tag-danger-border: var(--tedi-red-600); - --tag-primary-background: var(--tedi-primary-800); - --tag-primary-border: var(--tedi-primary-600); - --tag-secondary-background: var(--tedi-neutral-800); - --tag-secondary-border: var(--tedi-neutral-800); + --tag-danger-border: var(--red-600); + --tag-primary-background: var(--primary-800); + --tag-primary-border: var(--primary-600); + --tag-secondary-background: var(--neutral-800); + --tag-secondary-border: var(--neutral-800); --timeline-completed: var(--general-border-accent); --timeline-default: var(--general-border-secondary); --tooltip-background: var(--general-surface-inverted-primary); diff --git a/src/variables/themes/default/color-variables__default.scss b/src/variables/themes/default/color-variables__default.scss index 40674652..2491393c 100644 --- a/src/variables/themes/default/color-variables__default.scss +++ b/src/variables/themes/default/color-variables__default.scss @@ -25,22 +25,22 @@ --alert-toast-text-success: var(--alert-default-text-success); --alert-toast-text-warning: var(--alert-default-text-warning); --avatar-background-default: var(--general-status-neutral-background-light); - --brand-logo: var(--tedi-primary-600); + --brand-logo: var(--primary-600); --button-card-active-background: var(--general-surface-brand-tertiary); - --button-card-active-border: var(--tedi-primary-400); + --button-card-active-border: var(--primary-400); --button-card-active-icon-background: var(--general-surface-brand-primary); --button-card-disabled-background: var(--form-general-background-disabled); --button-card-disabled-border: var(--form-general-border-disabled); --button-card-hover-background: var(--button-main-secondary-background-hover); - --button-card-hover-border: var(--tedi-primary-300); + --button-card-hover-border: var(--primary-300); --button-card-hover-icon-background: var(--general-surface-brand-primary); --button-card-icon-default: var(--general-icon-secondary); --button-card-icon-disabled: var(--general-text-disabled); --button-card-icon-hover: var(--general-icon-brand); - --button-close-background-active: var(--tedi-alpha-20); - --button-close-background-default: var(--tedi-alpha-01); - --button-close-background-focus: var(--tedi-alpha-01); - --button-close-background-hover: var(--tedi-alpha-10); + --button-close-background-active: var(--alpha-20); + --button-close-background-default: var(--alpha-01); + --button-close-background-focus: var(--alpha-01); + --button-close-background-hover: var(--alpha-10); --button-close-text-active: var(--general-text-primary); --button-close-text-default: var(--general-text-tertiary); --button-close-text-focus: var(--general-text-primary); @@ -79,7 +79,7 @@ --button-group-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background); --button-group-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group); --button-group-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text); - --button-group-secondary-disabled-background: var(--tedi-alpha-01); + --button-group-secondary-disabled-background: var(--alpha-01); --button-group-secondary-disabled-border: var(--button-main-disabled-general-border); --button-group-secondary-disabled-text: var(--button-main-disabled-general-text); --button-group-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background); @@ -91,112 +91,115 @@ --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background); --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border); --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text); - --button-main-danger-background-active: var(--tedi-red-800); - --button-main-danger-background-default: var(--tedi-red-600); - --button-main-danger-background-focus: var(--tedi-red-600); - --button-main-danger-background-hover: var(--tedi-red-700); + --button-main-danger-background-active: var(--red-800); + --button-main-danger-background-default: var(--red-600); + --button-main-danger-background-focus: var(--red-600); + --button-main-danger-background-hover: var(--red-700); --button-main-danger-border-active: var(--button-main-danger-background-active); --button-main-danger-border-default: var(--button-main-danger-background-default); --button-main-danger-border-focus: var(--button-main-danger-background-focus); --button-main-danger-border-hover: var(--button-main-danger-background-hover); - --button-main-danger-neutral-background-active: var(--tedi-alpha-01); - --button-main-danger-neutral-background-default: var(--tedi-alpha-01); - --button-main-danger-neutral-background-focus: var(--tedi-alpha-01); - --button-main-danger-neutral-background-hover: var(--tedi-alpha-01); - --button-main-danger-neutral-border-active: var(--tedi-alpha-01); - --button-main-danger-neutral-border-default: var(--tedi-alpha-01); - --button-main-danger-neutral-border-focus: var(--tedi-neutral-100); - --button-main-danger-neutral-border-hover: var(--tedi-alpha-01); - --button-main-danger-neutral-icon-only-background-active: var(--tedi-red-200); + --button-main-danger-neutral-background-active: var(--alpha-01); + --button-main-danger-neutral-background-default: var(--alpha-01); + --button-main-danger-neutral-background-focus: var(--alpha-01); + --button-main-danger-neutral-background-hover: var(--alpha-01); + --button-main-danger-neutral-border-active: var(--alpha-01); + --button-main-danger-neutral-border-default: var(--alpha-01); + --button-main-danger-neutral-border-focus: var(--neutral-100); + --button-main-danger-neutral-border-hover: var(--alpha-01); + --button-main-danger-neutral-icon-only-background-active: var(--red-200); --button-main-danger-neutral-icon-only-background-default: var(--button-main-danger-neutral-background-default); --button-main-danger-neutral-icon-only-background-focus: var(--button-main-danger-neutral-background-focus); - --button-main-danger-neutral-icon-only-background-hover: var(--tedi-red-100); - --button-main-danger-neutral-text-active: var(--tedi-red-800); - --button-main-danger-neutral-text-default: var(--tedi-red-600); - --button-main-danger-neutral-text-focus: var(--tedi-red-600); - --button-main-danger-neutral-text-hover: var(--tedi-red-700); + --button-main-danger-neutral-icon-only-background-hover: var(--red-100); + --button-main-danger-neutral-text-active: var(--red-800); + --button-main-danger-neutral-text-default: var(--red-600); + --button-main-danger-neutral-text-focus: var(--red-600); + --button-main-danger-neutral-text-hover: var(--red-700); --button-main-danger-text-default: var(--general-text-white); --button-main-disabled-general-background: var(--general-surface-disabled); --button-main-disabled-general-border: var(--button-main-disabled-general-background); --button-main-disabled-general-text: var(--general-text-disabled); --button-main-disabled-neutral-background: var(--button-main-neutral-background-default); --button-main-disabled-neutral-border: var(--button-main-neutral-border-default); - --button-main-neutral-background-active: var(--tedi-alpha-01); - --button-main-neutral-background-default: var(--tedi-alpha-01); - --button-main-neutral-background-focus: var(--tedi-alpha-01); - --button-main-neutral-background-hover: var(--tedi-alpha-01); - --button-main-neutral-border-active: var(--tedi-alpha-01); - --button-main-neutral-border-default: var(--tedi-alpha-01); - --button-main-neutral-border-focus: var(--tedi-neutral-100); - --button-main-neutral-border-hover: var(--tedi-alpha-01); + --button-main-neutral-background-active: var(--alpha-01); + --button-main-neutral-background-default: var(--alpha-01); + --button-main-neutral-background-focus: var(--alpha-01); + --button-main-neutral-background-hover: var(--alpha-01); + --button-main-neutral-border-active: var(--alpha-01); + --button-main-neutral-border-default: var(--alpha-01); + --button-main-neutral-border-focus: var(--neutral-100); + --button-main-neutral-border-hover: var(--alpha-01); --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active); - --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01); + --button-main-neutral-icon-only-background-default: var(--alpha-01); --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default); --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover); - --button-main-neutral-inverted-background-active: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-default: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-focus: var(--tedi-alpha-01); - --button-main-neutral-inverted-background-hover: var(--tedi-alpha-01); - --button-main-neutral-inverted-border-active: var(--tedi-alpha-01); - --button-main-neutral-inverted-border-default: var(--tedi-alpha-01); - --button-main-neutral-inverted-border-focus: var(--tedi-neutral-100); - --button-main-neutral-inverted-border-hover: var(--tedi-alpha-01); + --button-main-neutral-inverted-background-active: var(--alpha-01); + --button-main-neutral-inverted-background-default: var(--alpha-01); + --button-main-neutral-inverted-background-focus: var(--alpha-01); + --button-main-neutral-inverted-background-hover: var(--alpha-01); + --button-main-neutral-inverted-border-active: var(--alpha-01); + --button-main-neutral-inverted-border-default: var(--alpha-01); + --button-main-neutral-inverted-border-focus: var(--neutral-100); + --button-main-neutral-inverted-border-hover: var(--alpha-01); --button-main-neutral-inverted-icon-only-background-active: var(--button-main-secondary-inverted-background-active); --button-main-neutral-inverted-icon-only-background-default: var(--button-main-secondary-inverted-background-default); --button-main-neutral-inverted-icon-only-background-focus: var(--button-main-secondary-inverted-background-focus); --button-main-neutral-inverted-icon-only-background-hover: var(--button-main-secondary-inverted-background-hover); - --button-main-neutral-inverted-text-active: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-default: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100); - --button-main-neutral-inverted-text-hover: var(--tedi-primary-200); - --button-main-neutral-text-active: var(--tedi-primary-800); - --button-main-neutral-text-default: var(--tedi-primary-600); - --button-main-neutral-text-focus: var(--tedi-primary-600); - --button-main-neutral-text-hover: var(--tedi-primary-700); - --button-main-primary-background-active: var(--tedi-primary-800); - --button-main-primary-background-default: var(--tedi-primary-600); - --button-main-primary-background-focus: var(--tedi-primary-600); - --button-main-primary-background-hover: var(--tedi-primary-700); + --button-main-neutral-inverted-text-active: var(--neutral-100); + --button-main-neutral-inverted-text-default: var(--neutral-100); + --button-main-neutral-inverted-text-focus: var(--neutral-100); + --button-main-neutral-inverted-text-hover: var(--primary-200); + --button-main-neutral-text-active: var(--primary-800); + --button-main-neutral-text-default: var(--primary-600); + --button-main-neutral-text-focus: var(--primary-600); + --button-main-neutral-text-hover: var(--primary-700); + --button-main-primary-background-active: var(--primary-800); + --button-main-primary-background-default: var(--primary-600); + --button-main-primary-background-focus: var(--primary-600); + --button-main-primary-background-hover: var(--primary-700); --button-main-primary-border-active: var(--button-main-primary-background-active); --button-main-primary-border-default: var(--button-main-primary-background-default); --button-main-primary-border-focus: var(--button-main-primary-background-focus); --button-main-primary-border-hover: var(--button-main-primary-background-hover); - --button-main-primary-inverted-background-active: var(--tedi-primary-300); - --button-main-primary-inverted-background-default: var(--tedi-primary-200); + --button-main-primary-inverted-background-active: var(--primary-300); + --button-main-primary-inverted-background-default: var(--primary-200); --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default); - --button-main-primary-inverted-background-hover: var(--tedi-primary-300); + --button-main-primary-inverted-background-hover: var(--primary-300); --button-main-primary-inverted-border-active: var(--button-main-primary-inverted-background-active); --button-main-primary-inverted-border-default: var(--button-main-primary-inverted-background-default); --button-main-primary-inverted-border-focus: var(--button-main-primary-inverted-background-focus); --button-main-primary-inverted-border-hover: var(--button-main-primary-inverted-background-hover); - --button-main-primary-inverted-text-active: var(--tedi-primary-800); - --button-main-primary-inverted-text-default: var(--tedi-primary-600); - --button-main-primary-inverted-text-hover: var(--tedi-primary-700); + --button-main-primary-inverted-text-active: var(--primary-800); + --button-main-primary-inverted-text-default: var(--primary-600); + --button-main-primary-inverted-text-hover: var(--primary-700); --button-main-primary-text-active: var(--general-text-white); --button-main-primary-text-default: var(--general-text-white); --button-main-primary-text-hover: var(--general-text-white); --button-main-secondary-background-active: var(--general-surface-brand-tertiary); - --button-main-secondary-background-default: var(--tedi-neutral-100); - --button-main-secondary-background-focus: var(--tedi-neutral-100); + --button-main-secondary-background-default: var(--neutral-100); + --button-main-secondary-background-focus: var(--neutral-100); --button-main-secondary-background-hover: var(--general-surface-hover); - --button-main-secondary-border-active: var(--tedi-primary-700); + --button-main-secondary-border-active: var(--primary-700); --button-main-secondary-border-default: var(--general-border-secondary); - --button-main-secondary-border-focus: var(--tedi-primary-600); - --button-main-secondary-border-hover: var(--tedi-primary-600); - --button-main-secondary-inverted-background-active: var(--tedi-alpha-white-10); - --button-main-secondary-inverted-background-default: var(--tedi-alpha-01); - --button-main-secondary-inverted-background-focus: var(--tedi-alpha-01); - --button-main-secondary-inverted-background-hover: var(--tedi-alpha-white-10); - --button-main-secondary-inverted-border-active: var(--tedi-neutral-100); - --button-main-secondary-inverted-border-default: var(--tedi-alpha-white-50); - --button-main-secondary-inverted-border-focus: var(--tedi-neutral-100); - --button-main-secondary-inverted-border-hover: var(--tedi-neutral-100); + --button-main-secondary-border-focus: var(--primary-600); + --button-main-secondary-border-hover: var(--primary-600); + --button-main-secondary-inverted-background-active: var(--alpha-white-10); + --button-main-secondary-inverted-background-default: var(--alpha-01); + --button-main-secondary-inverted-background-focus: var(--alpha-01); + --button-main-secondary-inverted-background-hover: var(--alpha-white-10); + --button-main-secondary-inverted-border-active: var(--neutral-100); + --button-main-secondary-inverted-border-default: var(--alpha-white-50); + --button-main-secondary-inverted-border-focus: var(--neutral-100); + --button-main-secondary-inverted-border-hover: var(--neutral-100); --button-main-secondary-inverted-text-default: var(--general-text-white); - --button-main-secondary-text-default: var(--tedi-primary-600); - --button-main-success-background-active: var(--tedi-green-800); - --button-main-success-background-default: var(--tedi-green-600); - --button-main-success-background-focus: var(--tedi-green-600); - --button-main-success-background-hover: var(--tedi-green-700); + --button-main-secondary-text-active: var(--primary-600); + --button-main-secondary-text-default: var(--primary-600); + --button-main-secondary-text-focus: var(--primary-600); + --button-main-secondary-text-hover: var(--primary-600); + --button-main-success-background-active: var(--green-800); + --button-main-success-background-default: var(--green-600); + --button-main-success-background-focus: var(--green-600); + --button-main-success-background-hover: var(--green-700); --button-main-success-border-active: var(--button-main-success-background-active); --button-main-success-border-default: var(--button-main-success-background-default); --button-main-success-border-focus: var(--button-main-success-background-focus); @@ -228,7 +231,7 @@ --carousel-dot-border-focus: var(--button-main-primary-background-focus); --carousel-dot-border-hover: var(--button-main-primary-background-hover); --carousel-dot-border-selected: var(--button-main-primary-background-default); - --choice-group-active-text: var(--tedi-primary-600); + --choice-group-active-text: var(--primary-600); --dropdown-item-active-background: var(--general-surface-selected); --dropdown-item-active-text: var(--general-text-white); --dropdown-item-default-background: var(--general-surface-primary); @@ -236,7 +239,7 @@ --dropdown-item-disabled-background: var(--general-surface-disabled); --dropdown-item-disabled-text: var(--general-text-disabled); --dropdown-item-hover-background: var(--general-surface-hover); - --dropdown-item-hover-text: var(--tedi-primary-700); + --dropdown-item-hover-text: var(--primary-700); --empty-state-background-primary: var(--general-surface-primary); --empty-state-background-secondary: var(--general-surface-secondary); --empty-state-background-tertiary: var(--general-surface-tertiary); @@ -276,7 +279,7 @@ --filter-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text); --footer-background: var(--general-surface-inverted-secondary); --footer-bottom-background: var(--general-surface-inverted-tertiary); - --footer-icon-background: var(--tedi-alpha-white-20); + --footer-icon-background: var(--alpha-white-20); --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text); --form-checkbox-radio-card-primary-default-background: var(--general-surface-tertiary); --form-checkbox-radio-card-primary-default-border-group: var(--button-main-secondary-border-default); @@ -308,25 +311,25 @@ --form-checkbox-radio-card-secondary-selected-background: var(--button-main-secondary-background-default); --form-checkbox-radio-card-secondary-selected-border: var(--general-border-brand); --form-checkbox-radio-card-secondary-selected-text: var(--general-text-brand); - --form-checkbox-radio-default-background-active: var(--tedi-primary-700); - --form-checkbox-radio-default-background-default: var(--tedi-neutral-100); - --form-checkbox-radio-default-background-error: var(--tedi-neutral-100); - --form-checkbox-radio-default-background-focus: var(--tedi-neutral-100); - --form-checkbox-radio-default-background-hover: var(--tedi-neutral-100); - --form-checkbox-radio-default-background-inverted: var(--tedi-primary-600); - --form-checkbox-radio-default-background-selected: var(--tedi-primary-600); - --form-checkbox-radio-default-background-selected-disabled: var(--tedi-primary-300); - --form-checkbox-radio-default-background-selected-inverted: var(--tedi-neutral-100); - --form-checkbox-radio-default-border-active: var(--tedi-primary-700); + --form-checkbox-radio-default-background-active: var(--primary-700); + --form-checkbox-radio-default-background-default: var(--neutral-100); + --form-checkbox-radio-default-background-error: var(--neutral-100); + --form-checkbox-radio-default-background-focus: var(--neutral-100); + --form-checkbox-radio-default-background-hover: var(--neutral-100); + --form-checkbox-radio-default-background-inverted: var(--primary-600); + --form-checkbox-radio-default-background-selected: var(--primary-600); + --form-checkbox-radio-default-background-selected-disabled: var(--primary-300); + --form-checkbox-radio-default-background-selected-inverted: var(--neutral-100); + --form-checkbox-radio-default-border-active: var(--primary-700); --form-checkbox-radio-default-border-default: var(--form-general-border-default); --form-checkbox-radio-default-border-focus: var(--form-general-border-default); - --form-checkbox-radio-default-border-hover: var(--tedi-primary-600); - --form-checkbox-radio-default-border-inverted: var(--tedi-neutral-100); - --form-checkbox-radio-default-border-selected: var(--tedi-primary-600); - --form-checkbox-radio-default-border-selected-disabled: var(--tedi-primary-300); - --form-checkbox-radio-default-border-selected-inverted: var(--tedi-neutral-100); - --form-checkbox-radio-default-check-indicator-active: var(--tedi-neutral-100); - --form-checkbox-radio-default-check-indicator-default: var(--tedi-neutral-100); + --form-checkbox-radio-default-border-hover: var(--primary-600); + --form-checkbox-radio-default-border-inverted: var(--neutral-100); + --form-checkbox-radio-default-border-selected: var(--primary-600); + --form-checkbox-radio-default-border-selected-disabled: var(--primary-300); + --form-checkbox-radio-default-border-selected-inverted: var(--neutral-100); + --form-checkbox-radio-default-check-indicator-active: var(--neutral-100); + --form-checkbox-radio-default-check-indicator-default: var(--neutral-100); --form-datepicker-date-active: var(--button-main-secondary-background-active); --form-datepicker-date-available: var(--general-status-success-background-primary); --form-datepicker-date-default: var(--button-main-secondary-background-default); @@ -337,17 +340,17 @@ --form-datepicker-date-text-muted: var(--general-text-disabled); --form-datepicker-date-text-selected: var(--general-text-white); --form-datepicker-today-border: var(--general-border-brand); - --form-datepicker-today-border-secondary: var(--tedi-neutral-100); + --form-datepicker-today-border-secondary: var(--neutral-100); --form-general-background-action-background: var(--general-surface-secondary); --form-general-background-default: var(--general-surface-primary); - --form-general-background-disabled: var(--tedi-neutral-300); - --form-general-border-default: var(--tedi-neutral-500); - --form-general-border-disabled: var(--tedi-neutral-350); - --form-general-feedback-error-border: var(--tedi-red-700); + --form-general-background-disabled: var(--neutral-300); + --form-general-border-default: var(--neutral-500); + --form-general-border-disabled: var(--neutral-350); + --form-general-feedback-error-border: var(--red-700); --form-general-feedback-error-text: var(--general-status-danger-text); - --form-general-feedback-success-border: var(--tedi-green-600); + --form-general-feedback-success-border: var(--green-600); --form-general-feedback-success-text: var(--general-status-success-text); - --form-hidden-default: var(--tedi-alpha-01); + --form-hidden-default: var(--alpha-01); --form-hidden-hover: var(--general-surface-tertiary); --form-input-background-default: var(--form-general-background-default); --form-input-background-disabled: var(--form-general-background-disabled); @@ -355,127 +358,127 @@ --form-input-border-default: var(--form-general-border-default); --form-input-border-disabled: var(--form-general-border-disabled); --form-input-border-focus: var(--form-input-border-hover); - --form-input-border-hover: var(--tedi-primary-600); + --form-input-border-hover: var(--primary-600); --form-input-text-disabled: var(--general-text-secondary); --form-input-text-filled: var(--general-text-primary); - --form-input-text-placeholder: var(--tedi-neutral-550); - --form-slider-active-background-active: var(--tedi-blue-800); - --form-slider-active-background-default: var(--tedi-blue-600); - --form-slider-active-background-disabled: var(--tedi-neutral-400); - --form-slider-active-background-focus: var(--tedi-blue-600); - --form-slider-active-background-hover: var(--tedi-blue-700); - --form-slider-border-default: var(--tedi-neutral-500); - --form-slider-passive-background-default: var(--tedi-neutral-200); + --form-input-text-placeholder: var(--neutral-550); + --form-slider-active-background-active: var(--blue-800); + --form-slider-active-background-default: var(--blue-600); + --form-slider-active-background-disabled: var(--neutral-400); + --form-slider-active-background-focus: var(--blue-600); + --form-slider-active-background-hover: var(--blue-700); + --form-slider-border-default: var(--neutral-500); + --form-slider-passive-background-default: var(--neutral-200); --form-slider-range-label-text: var(--general-text-tertiary); --form-slider-thumb-background-active: var(--general-surface-brand-tertiary); - --form-slider-thumb-background-default: var(--tedi-neutral-100); - --form-slider-thumb-background-disabled: var(--tedi-neutral-100); - --form-slider-thumb-background-focus: var(--tedi-neutral-100); + --form-slider-thumb-background-default: var(--neutral-100); + --form-slider-thumb-background-disabled: var(--neutral-100); + --form-slider-thumb-background-focus: var(--neutral-100); --form-slider-thumb-background-hover: var(--general-surface-brand-tertiary); - --form-slider-thumb-border-active: var(--tedi-blue-800); - --form-slider-thumb-border-default: var(--tedi-blue-600); - --form-slider-thumb-border-disabled: var(--tedi-neutral-400); - --form-slider-thumb-border-focus: var(--tedi-blue-600); - --form-slider-thumb-border-hover: var(--tedi-blue-700); + --form-slider-thumb-border-active: var(--blue-800); + --form-slider-thumb-border-default: var(--blue-600); + --form-slider-thumb-border-disabled: var(--neutral-400); + --form-slider-thumb-border-focus: var(--blue-600); + --form-slider-thumb-border-hover: var(--blue-700); --form-slider-track: var(--general-surface-primary); --form-toggl-colored-active-active: var(--button-main-success-background-active); --form-toggl-colored-active-default: var(--button-main-success-background-default); --form-toggl-colored-active-hover: var(--button-main-success-background-hover); --form-toggl-colored-active-icon: var(--general-icon-success); --form-toggl-colored-active-icon-outlined: var(--general-icon-white); - --form-toggl-colored-active-indicator: var(--tedi-neutral-100); + --form-toggl-colored-active-indicator: var(--neutral-100); --form-toggl-colored-inactive-active: var(--button-main-danger-background-active); --form-toggl-colored-inactive-default: var(--button-main-danger-background-default); --form-toggl-colored-inactive-hover: var(--button-main-danger-background-hover); --form-toggl-colored-inactive-icon: var(--general-icon-danger); --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white); - --form-toggl-colored-inactive-indicator: var(--tedi-neutral-100); - --form-toggl-outlined-background: var(--tedi-alpha-01); + --form-toggl-colored-inactive-indicator: var(--neutral-100); + --form-toggl-outlined-background: var(--alpha-01); --form-toggl-primary-active-active: var(--button-main-primary-background-active); --form-toggl-primary-active-default: var(--button-main-primary-background-default); --form-toggl-primary-active-hover: var(--button-main-primary-background-hover); --form-toggl-primary-active-icon: var(--general-icon-brand); --form-toggl-primary-active-icon-outlined: var(--general-icon-white); - --form-toggl-primary-active-indicator: var(--tedi-neutral-100); - --form-toggl-primary-inactive-active: var(--tedi-neutral-550); - --form-toggl-primary-inactive-default: var(--tedi-neutral-450); - --form-toggl-primary-inactive-hover: var(--tedi-neutral-500); + --form-toggl-primary-active-indicator: var(--neutral-100); + --form-toggl-primary-inactive-active: var(--neutral-550); + --form-toggl-primary-inactive-default: var(--neutral-450); + --form-toggl-primary-inactive-hover: var(--neutral-500); --form-toggl-primary-inactive-icon: var(--general-icon-tertiary); --form-toggl-primary-inactive-icon-outlined: var(--general-icon-white); - --form-toggl-primary-inactive-indicator: var(--tedi-neutral-100); - --general-border-accent: var(--tedi-accent-600); - --general-border-brand: var(--tedi-primary-600); - --general-border-primary: var(--tedi-neutral-350); - --general-border-secondary: var(--tedi-neutral-450); - --general-border-transparent-white: var(--tedi-alpha-white-30); - --general-border-white: var(--tedi-neutral-100); - --general-icon-accent: var(--tedi-orange-700); + --form-toggl-primary-inactive-indicator: var(--neutral-100); + --general-border-accent: var(--accent-600); + --general-border-brand: var(--primary-600); + --general-border-primary: var(--neutral-350); + --general-border-secondary: var(--neutral-450); + --general-border-transparent-white: var(--alpha-white-30); + --general-border-white: var(--neutral-100); + --general-icon-accent: var(--orange-700); --general-icon-background-brand-primary: var(--general-surface-brand-primary); --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary); - --general-icon-background-primary: var(--tedi-neutral-100); - --general-icon-background-secondary: var(--tedi-alpha-white-30); - --general-icon-brand: var(--tedi-primary-600); - --general-icon-brand-dark: var(--tedi-primary-700); - --general-icon-danger: var(--tedi-red-700); - --general-icon-primary: var(--tedi-neutral-850); - --general-icon-secondary: var(--tedi-neutral-700); - --general-icon-success: var(--tedi-green-700); - --general-icon-tertiary: var(--tedi-neutral-450); - --general-icon-warning: var(--tedi-yellow-700); - --general-icon-warning-dark: var(--tedi-yellow-800); - --general-icon-white: var(--tedi-neutral-100); + --general-icon-background-primary: var(--neutral-100); + --general-icon-background-secondary: var(--alpha-white-30); + --general-icon-brand: var(--primary-600); + --general-icon-brand-dark: var(--primary-700); + --general-icon-danger: var(--red-700); + --general-icon-primary: var(--neutral-850); + --general-icon-secondary: var(--neutral-700); + --general-icon-success: var(--green-700); + --general-icon-tertiary: var(--neutral-450); + --general-icon-warning: var(--yellow-700); + --general-icon-warning-dark: var(--yellow-800); + --general-icon-white: var(--neutral-100); --general-separator-primary: var(--general-border-primary); - --general-status-danger-background-primary: var(--tedi-red-100); - --general-status-danger-background-secondary: var(--tedi-red-600); - --general-status-danger-background-tertiary: var(--tedi-red-700); - --general-status-danger-border: var(--tedi-red-500); - --general-status-danger-text: var(--tedi-red-700); - --general-status-info-background-dark: var(--tedi-blue-600); - --general-status-info-background-light: var(--tedi-blue-200); - --general-status-info-border: var(--tedi-blue-500); - --general-status-info-text: var(--tedi-blue-700); - --general-status-neutral-background-dark: var(--tedi-neutral-450); - --general-status-neutral-background-light: var(--tedi-neutral-300); - --general-status-neutral-border: var(--tedi-neutral-450); + --general-status-danger-background-primary: var(--red-100); + --general-status-danger-background-secondary: var(--red-600); + --general-status-danger-background-tertiary: var(--red-700); + --general-status-danger-border: var(--red-500); + --general-status-danger-text: var(--red-700); + --general-status-info-background-dark: var(--blue-600); + --general-status-info-background-light: var(--blue-200); + --general-status-info-border: var(--blue-500); + --general-status-info-text: var(--blue-700); + --general-status-neutral-background-dark: var(--neutral-450); + --general-status-neutral-background-light: var(--neutral-300); + --general-status-neutral-border: var(--neutral-450); --general-status-neutral-text: var(--general-text-primary); - --general-status-success-background-primary: var(--tedi-green-100); - --general-status-success-background-primary: var(--tedi-green-200); - --general-status-success-background-secondary: var(--tedi-green-600); - --general-status-success-background-tertiary: var(--tedi-green-700); - --general-status-success-border: var(--tedi-green-500); - --general-status-success-text: var(--tedi-green-700); - --general-status-warning-background-dark: var(--tedi-yellow-600); - --general-status-warning-background-light: var(--tedi-yellow-200); - --general-status-warning-background-primary: var(--tedi-yellow-100); - --general-status-warning-border: var(--tedi-yellow-600); - --general-status-warning-text: var(--tedi-yellow-800); - --general-surface-accent: var(--tedi-accent-200); + --general-status-success-background-primary: var(--green-100); + --general-status-success-background-primary: var(--green-200); + --general-status-success-background-secondary: var(--green-600); + --general-status-success-background-tertiary: var(--green-700); + --general-status-success-border: var(--green-500); + --general-status-success-text: var(--green-700); + --general-status-warning-background-dark: var(--yellow-600); + --general-status-warning-background-light: var(--yellow-200); + --general-status-warning-background-primary: var(--yellow-100); + --general-status-warning-border: var(--yellow-600); + --general-status-warning-text: var(--yellow-800); + --general-surface-accent: var(--accent-200); --general-surface-active: var(--general-surface-brand-secondary); - --general-surface-brand-primary: var(--tedi-primary-600); - --general-surface-brand-quaternary: var(--tedi-primary-100); - --general-surface-brand-secondary: var(--tedi-primary-700); - --general-surface-brand-tertiary: var(--tedi-primary-200); - --general-surface-disabled: var(--tedi-neutral-400); + --general-surface-brand-primary: var(--primary-600); + --general-surface-brand-quaternary: var(--primary-100); + --general-surface-brand-secondary: var(--primary-700); + --general-surface-brand-tertiary: var(--primary-200); + --general-surface-disabled: var(--neutral-400); --general-surface-hover: var(--general-surface-brand-quaternary); - --general-surface-inverted-primary: var(--tedi-neutral-600); - --general-surface-inverted-secondary: var(--tedi-neutral-750); - --general-surface-inverted-tertiary: var(--tedi-neutral-800); - --general-surface-overlay: var(--tedi-alpha-40); - --general-surface-primary: var(--tedi-neutral-100); - --general-surface-secondary: var(--tedi-neutral-200); + --general-surface-inverted-primary: var(--neutral-600); + --general-surface-inverted-secondary: var(--neutral-750); + --general-surface-inverted-tertiary: var(--neutral-800); + --general-surface-overlay: var(--alpha-40); + --general-surface-primary: var(--neutral-100); + --general-surface-secondary: var(--neutral-200); --general-surface-selected: var(--general-surface-brand-primary); --general-surface-success: var(--general-status-success-background-primary); - --general-surface-tertiary: var(--tedi-neutral-300); - --general-text-brand: var(--tedi-primary-600); - --general-text-dark: var(--tedi-neutral-850); - --general-text-disabled: var(--tedi-neutral-450); - --general-text-primary: var(--tedi-neutral-850); - --general-text-secondary: var(--tedi-neutral-700); - --general-text-tertiary: var(--tedi-neutral-600); - --general-text-text-inverted-tehik: var(--tedi-neutral-100); - --general-text-white: var(--tedi-neutral-100); + --general-surface-tertiary: var(--neutral-300); + --general-text-brand: var(--primary-600); + --general-text-dark: var(--neutral-850); + --general-text-disabled: var(--neutral-450); + --general-text-primary: var(--neutral-850); + --general-text-secondary: var(--neutral-700); + --general-text-tertiary: var(--neutral-600); + --general-text-text-inverted-tehik: var(--neutral-100); + --general-text-white: var(--neutral-100); --header-background: var(--general-surface-primary); - --header-bottom-border: var(--tedi-neutral-100); + --header-bottom-border: var(--neutral-100); --header-modal-item-active-background: var(--dropdown-item-active-background); --header-modal-item-active-text: var(--dropdown-item-active-text); --header-modal-item-default-background: var(--dropdown-item-default-background); @@ -484,7 +487,7 @@ --header-modal-item-disabled-text: var(--dropdown-item-disabled-text); --header-modal-item-hover-background: var(--dropdown-item-hover-background); --header-modal-item-hover-text: var(--dropdown-item-hover-text); - --header-popover-border-top: var(--tedi-primary-400); + --header-popover-border-top: var(--primary-400); --header-popover-item-active: var(--general-surface-active); --header-popover-item-hover: var(--general-surface-hover); --header-popover-item-selected: var(--general-surface-selected); @@ -493,13 +496,13 @@ --link-inverted-default: var(--general-text-white); --link-inverted-focus: var(--general-text-white); --link-inverted-hover: var(--general-text-white); - --link-primary-active: var(--tedi-primary-800); - --link-primary-default: var(--tedi-primary-600); - --link-primary-focus: var(--tedi-primary-600); - --link-primary-hover: var(--tedi-primary-700); + --link-primary-active: var(--primary-800); + --link-primary-default: var(--primary-600); + --link-primary-focus: var(--primary-600); + --link-primary-hover: var(--primary-700); --loader-skeleton-color: rgb(146 147 164 / 20%); - --loader-spinner-color-primary: var(--tedi-neutral-450); - --loader-spinner-color-secondary: var(--tedi-alpha-white-80); + --loader-spinner-color-primary: var(--neutral-450); + --loader-spinner-color-secondary: var(--alpha-white-80); --modal-background: var(--general-surface-primary); --modal-border-inner: var(--general-border-primary); --modal-border-outer: var(--general-border-primary); @@ -512,35 +515,38 @@ --navigation-horizontal-item-background-hover: var(--navigation-vertical-item-background-hover); --navigation-horizontal-item-background-selected: var(--navigation-vertical-item-background-active); --navigation-horizontal-item-border: var(--navigation-horizontal-item-background-default); - --navigation-horizontal-item-text: var(--navigation-vertical-item-text); + --navigation-horizontal-item-text-default: var(--navigation-vertical-item-text-default); --navigation-horizontal-submenu-background: var(--navigation-horizontal-item-background-selected); --navigation-horizontal-submenu-item-border: var(--navigation-horizontal-item-background-default); - --navigation-horizontal-submenu-item-border-active: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-border-default: var(--tedi-primary-200); - --navigation-horizontal-submenu-item-border-focus: var(--tedi-alpha-01); - --navigation-horizontal-submenu-item-border-hover: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-border-selected: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-active: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-default: var(--tedi-primary-200); + --navigation-horizontal-submenu-item-border-active: var(--neutral-100); + --navigation-horizontal-submenu-item-border-default: var(--primary-200); + --navigation-horizontal-submenu-item-border-focus: var(--alpha-01); + --navigation-horizontal-submenu-item-border-hover: var(--neutral-100); + --navigation-horizontal-submenu-item-border-selected: var(--neutral-100); + --navigation-horizontal-submenu-item-text-active: var(--neutral-100); + --navigation-horizontal-submenu-item-text-default: var(--primary-200); --navigation-horizontal-submenu-item-text-focus: var(--navigation-horizontal-submenu-item-text-default); - --navigation-horizontal-submenu-item-text-hover: var(--tedi-neutral-100); - --navigation-horizontal-submenu-item-text-selected: var(--tedi-neutral-100); + --navigation-horizontal-submenu-item-text-hover: var(--neutral-100); + --navigation-horizontal-submenu-item-text-selected: var(--neutral-100); --navigation-vertical-background: var(--navigation-vertical-item-background-default); - --navigation-vertical-group-title-text: var(--tedi-primary-200); - --navigation-vertical-item-background-active: var(--tedi-primary-800); + --navigation-vertical-group-title-text: var(--primary-200); + --navigation-vertical-item-background-active: var(--primary-800); --navigation-vertical-item-background-arrow-button-active: var(--button-main-primary-background-active); --navigation-vertical-item-background-arrow-button-hover: var(--button-main-primary-background-active); - --navigation-vertical-item-background-default: var(--tedi-primary-600); - --navigation-vertical-item-background-focus: var(--tedi-primary-600); - --navigation-vertical-item-background-hover: var(--tedi-primary-700); - --navigation-vertical-item-border: var(--tedi-primary-800); - --navigation-vertical-item-text: var(--general-text-white); - --navigation-vertical-tree-brand-active: var(--tedi-primary-500); - --navigation-vertical-tree-brand-default: var(--tedi-primary-400); - --navigation-vertical-tree-brand-hover: var(--tedi-primary-500); - --navigation-vertical-tree-neutral-active: var(--tedi-neutral-450); - --navigation-vertical-tree-neutral-default: var(--tedi-neutral-350); - --navigation-vertical-tree-neutral-hover: var(--tedi-neutral-400); + --navigation-vertical-item-background-default: var(--primary-600); + --navigation-vertical-item-background-focus: var(--primary-600); + --navigation-vertical-item-background-hover: var(--primary-700); + --navigation-vertical-item-border: var(--primary-800); + --navigation-vertical-item-text-default: var(--general-text-white); + --navigation-vertical-item-text-focus: var(--navigation-vertical-item-text-default); + --navigation-vertical-item-text-hover: var(--navigation-vertical-item-text-default); + --navigation-vertical-item-text-selected: var(--navigation-vertical-item-text-default); + --navigation-vertical-tree-brand-active: var(--primary-500); + --navigation-vertical-tree-brand-default: var(--primary-400); + --navigation-vertical-tree-brand-hover: var(--primary-500); + --navigation-vertical-tree-neutral-active: var(--neutral-450); + --navigation-vertical-tree-neutral-default: var(--neutral-350); + --navigation-vertical-tree-neutral-hover: var(--neutral-400); --popover-background: var(--general-surface-primary); --popover-border: var(--general-border-white); --popover-text: var(--general-text-primary); @@ -548,14 +554,14 @@ --progress-bar-background-passive: var(--form-slider-passive-background-default); --progress-bar-border-default: var(--form-slider-border-default); --progress-bar-range-label-text: var(--form-slider-range-label-text); - --status-badge-background-accent: var(--tedi-orange-200); + --status-badge-background-accent: var(--orange-200); --status-badge-background-brand: var(--general-status-info-background-light); --status-badge-background-danger: var(--general-status-danger-background-primary); --status-badge-background-neutral: var(--general-status-neutral-background-light); --status-badge-background-success: var(--general-status-success-background-primary); - --status-badge-background-transparent: var(--tedi-alpha-01); + --status-badge-background-transparent: var(--alpha-01); --status-badge-background-warning: var(--general-status-warning-background-light); - --status-badge-border-accent: var(--tedi-orange-600); + --status-badge-border-accent: var(--orange-600); --status-badge-border-brand: var(--general-status-info-border); --status-badge-border-danger: var(--general-status-danger-border); --status-badge-border-neutral: var(--general-status-neutral-border); @@ -572,26 +578,26 @@ --status-badge-indicator-inactive: var(--general-status-neutral-background-dark); --status-badge-indicator-success: var(--general-status-success-background-secondary); --status-badge-indicator-warning: var(--general-status-warning-background-dark); - --status-badge-text-accent: var(--tedi-orange-700); + --status-badge-text-accent: var(--orange-700); --status-badge-text-brand: var(--general-status-info-text); --status-badge-text-danger: var(--general-status-danger-text); --status-badge-text-neutral: var(--general-status-neutral-text); --status-badge-text-success: var(--general-status-success-text); --status-badge-text-warning: var(--general-status-warning-text); --stepper-background: var(--general-surface-tertiary); - --stepper-item-horizontal-text-completed-default: var(--tedi-green-700); - --stepper-item-horizontal-text-completed-hover: var(--tedi-green-800); - --stepper-item-horizontal-text-danger-default: var(--tedi-red-700); - --stepper-item-horizontal-text-danger-hover: var(--tedi-red-800); + --stepper-item-horizontal-text-completed-default: var(--green-700); + --stepper-item-horizontal-text-completed-hover: var(--green-800); + --stepper-item-horizontal-text-danger-default: var(--red-700); + --stepper-item-horizontal-text-danger-hover: var(--red-800); --stepper-item-horizontal-text-default: var(--general-text-secondary); - --stepper-item-horizontal-text-hover: var(--tedi-primary-700); + --stepper-item-horizontal-text-hover: var(--primary-700); --stepper-item-horizontal-text-selected: var(--general-text-white); - --stepper-item-horizontal-type-completed-bg-active: var(--tedi-green-300); + --stepper-item-horizontal-type-completed-bg-active: var(--green-300); --stepper-item-horizontal-type-completed-bg-default: var(--general-status-success-background-primary); - --stepper-item-horizontal-type-completed-bg-hover: var(--tedi-green-200); - --stepper-item-horizontal-type-danger-bg-active: var(--tedi-red-300); - --stepper-item-horizontal-type-danger-bg-default: var(--tedi-red-200); - --stepper-item-horizontal-type-danger-bg-hover: var(--tedi-red-300); + --stepper-item-horizontal-type-completed-bg-hover: var(--green-200); + --stepper-item-horizontal-type-danger-bg-active: var(--red-300); + --stepper-item-horizontal-type-danger-bg-default: var(--red-200); + --stepper-item-horizontal-type-danger-bg-hover: var(--red-300); --stepper-item-horizontal-type-default-bg-active: var(--general-surface-brand-tertiary); --stepper-item-horizontal-type-default-bg-default: var(--general-surface-tertiary); --stepper-item-horizontal-type-default-bg-hover: var(--general-surface-tertiary); @@ -604,28 +610,28 @@ --stepper-item-vertical-text-hover: var(--link-primary-hover); --stepper-item-vertical-text-selected: var(--link-primary-hover); --stepper-step-completed-bg: var(--general-status-success-background-tertiary); - --stepper-step-completed-bg-hover: var(--tedi-green-800); + --stepper-step-completed-bg-hover: var(--green-800); --stepper-step-danger-bg: var(--general-status-danger-background-tertiary); - --stepper-step-danger-bg-hover: var(--tedi-red-800); + --stepper-step-danger-bg-hover: var(--red-800); --stepper-step-default-bg: var(--general-surface-primary); - --stepper-step-default-bg-hover: var(--tedi-primary-800); + --stepper-step-default-bg-hover: var(--primary-800); --stepper-step-default-border: var(--timeline-default); --stepper-step-default-border-hover: var(--general-border-brand); --stepper-step-disabled-bg: var(--general-surface-disabled); --stepper-step-disabled-border: var(--timeline-default); --stepper-step-selected-bg: var(--general-surface-primary); --stepper-step-selected-border: var(--general-surface-active); - --stepper-step-selected-border-hover: var(--tedi-primary-800); + --stepper-step-selected-border-hover: var(--primary-800); --tab-background: var(--general-surface-secondary); --tab-item-active-background: var(--general-surface-brand-tertiary); - --tab-item-active-text: var(--tedi-primary-700); - --tab-item-default-background: var(--tedi-alpha-01); + --tab-item-active-text: var(--primary-700); + --tab-item-default-background: var(--alpha-01); --tab-item-default-text: var(--general-text-primary); --tab-item-hover-background: var(--general-surface-hover); - --tab-item-hover-text: var(--tedi-primary-700); + --tab-item-hover-text: var(--primary-700); --tab-item-selected-background: var(--general-surface-primary); --tab-item-selected-border: var(--general-surface-selected); - --tab-item-selected-text: var(--tedi-primary-600); + --tab-item-selected-text: var(--primary-600); --table-active: var(--general-surface-brand-tertiary); --table-border: var(--general-border-primary); --table-border-th: var(--general-border-secondary); @@ -633,11 +639,11 @@ --table-hover: var(--general-surface-hover); --table-striped: var(--general-surface-tertiary); --tag-danger-background: var(--general-status-danger-background-primary); - --tag-danger-border: var(--tedi-red-300); - --tag-primary-background: var(--tedi-primary-100); - --tag-primary-border: var(--tedi-primary-200); - --tag-secondary-background: var(--tedi-neutral-300); - --tag-secondary-border: var(--tedi-neutral-300); + --tag-danger-border: var(--red-300); + --tag-primary-background: var(--primary-100); + --tag-primary-border: var(--primary-200); + --tag-secondary-background: var(--neutral-300); + --tag-secondary-border: var(--neutral-300); --timeline-completed: var(--general-border-accent); --timeline-default: var(--general-border-secondary); --tooltip-background: var(--general-surface-inverted-primary); diff --git a/src/variables/themes/default/font-variables__default.scss b/src/variables/themes/default/font-variables__default.scss index bfc37106..278cde62 100644 --- a/src/variables/themes/default/font-variables__default.scss +++ b/src/variables/themes/default/font-variables__default.scss @@ -1,99 +1,99 @@ .tedi-theme--default, :root { - --family-default: var(--tedi-family-roboto); - --family-heading: var(--tedi-family-roboto); - --body-regular-weight: var(--tedi-weight-02); - --body-regular-size: var(--tedi-size-02); - --body-regular-line-height: var(--tedi-line-height-03); - --heading-subtitle-regular-weight: var(--tedi-weight-03); - --heading-subtitle-regular-size: var(--tedi-size-02); - --heading-subtitle-regular-line-height: var(--tedi-line-height-03); - --heading-h1-weight: var(--tedi-weight-01); - --heading-h2-weight: var(--tedi-weight-02); - --heading-h2-size: var(--tedi-size-07); - --heading-h2-line-height: var(--tedi-line-height-08); - --heading-h3-weight: var(--tedi-weight-02); - --heading-h3-size: var(--tedi-size-06); - --heading-h3-line-height: var(--tedi-line-height-07); - --heading-h4-weight: var(--tedi-weight-02); - --heading-h4-size: var(--tedi-size-04); - --heading-h4-line-height: var(--tedi-line-height-04); - --heading-h5-weight: var(--tedi-weight-02); - --heading-h5-size: var(--tedi-size-03); - --heading-h5-line-height: var(--tedi-line-height-03); - --heading-h6-weight: var(--tedi-weight-03); - --heading-h6-size: var(--tedi-size-02); - --heading-h6-line-height: var(--tedi-line-height-03); - --heading-h1-size: var(--tedi-size-09); - --heading-h1-line-height: var(--tedi-line-height-10); - --body-bold-weight: var(--tedi-weight-03); - --body-bold-size: var(--tedi-size-02); - --body-bold-line-height: var(--tedi-line-height-03); - --body-small-regular-weight: var(--tedi-weight-02); - --body-small-regular-size: var(--tedi-size-01); - --body-small-regular-line-height: var(--tedi-line-height-01); - --body-small-bold-weight: var(--tedi-weight-03); - --body-extra-small-bold-size: var(--tedi-size-00); - --body-extra-small-bold-weight: var(--tedi-weight-03); - --body-extra-small-bold-line-height: var(--tedi-line-height-00); - --body-small-bold-size: var(--tedi-size-01); - --body-small-bold-line-height: var(--tedi-line-height-01); - --heading-subtitle-small-weight: var(--tedi-weight-02); - --heading-subtitle-small-size: var(--tedi-size-01); - --heading-subtitle-small-line-height: var(--tedi-line-height-01); - --body-extra-small-size: var(--tedi-size-00); - --body-extra-small-weight: var(--tedi-weight-02); - --body-extra-small-line-height: var(--tedi-line-height-00); + --family-default: var(--family-roboto); + --family-heading: var(--family-roboto); + --body-regular-weight: var(--weight-02); + --body-regular-size: var(--size-02); + --body-regular-line-height: var(--line-height-03); + --heading-subtitle-regular-weight: var(--weight-03); + --heading-subtitle-regular-size: var(--size-02); + --heading-subtitle-regular-line-height: var(--line-height-03); + --heading-h1-weight: var(--weight-01); + --heading-h2-weight: var(--weight-02); + --heading-h2-size: var(--size-07); + --heading-h2-line-height: var(--line-height-08); + --heading-h3-weight: var(--weight-02); + --heading-h3-size: var(--size-06); + --heading-h3-line-height: var(--line-height-07); + --heading-h4-weight: var(--weight-02); + --heading-h4-size: var(--size-04); + --heading-h4-line-height: var(--line-height-04); + --heading-h5-weight: var(--weight-02); + --heading-h5-size: var(--size-03); + --heading-h5-line-height: var(--line-height-03); + --heading-h6-weight: var(--weight-03); + --heading-h6-size: var(--size-02); + --heading-h6-line-height: var(--line-height-03); + --heading-h1-size: var(--size-09); + --heading-h1-line-height: var(--line-height-10); + --body-bold-weight: var(--weight-03); + --body-bold-size: var(--size-02); + --body-bold-line-height: var(--line-height-03); + --body-small-regular-weight: var(--weight-02); + --body-small-regular-size: var(--size-01); + --body-small-regular-line-height: var(--line-height-01); + --body-small-bold-weight: var(--weight-03); + --body-extra-small-bold-size: var(--size-00); + --body-extra-small-bold-weight: var(--weight-03); + --body-extra-small-bold-line-height: var(--line-height-00); + --body-small-bold-size: var(--size-01); + --body-small-bold-line-height: var(--line-height-01); + --heading-subtitle-small-weight: var(--weight-02); + --heading-subtitle-small-size: var(--size-01); + --heading-subtitle-small-line-height: var(--line-height-01); + --body-extra-small-size: var(--size-00); + --body-extra-small-weight: var(--weight-02); + --body-extra-small-line-height: var(--line-height-00); --body-link-line-height: var(--body-regular-line-height); --body-link-size-small: var(--body-small-regular-size); --body-link-size-regular: var(--body-regular-size); --body-link-size-responsive: var(--body-small-regular-size); @media (width <= 48rem) { - --family-default: var(--tedi-family-roboto); - --family-heading: var(--tedi-family-roboto); - --body-regular-weight: var(--tedi-weight-02); - --body-regular-size: var(--tedi-size-02); - --body-regular-line-height: var(--tedi-line-height-03); - --heading-subtitle-regular-weight: var(--tedi-weight-03); - --heading-subtitle-regular-size: var(--tedi-size-02); - --heading-subtitle-regular-line-height: var(--tedi-line-height-03); - --heading-h1-weight: var(--tedi-weight-01); - --heading-h2-weight: var(--tedi-weight-02); - --heading-h2-size: var(--tedi-size-05); - --heading-h2-line-height: var(--tedi-line-height-05); - --heading-h3-weight: var(--tedi-weight-02); - --heading-h3-size: var(--tedi-size-04); - --heading-h3-line-height: var(--tedi-line-height-04); - --heading-h4-weight: var(--tedi-weight-02); - --heading-h4-size: var(--tedi-size-03); - --heading-h4-line-height: var(--tedi-line-height-03); - --heading-h5-weight: var(--tedi-weight-03); - --heading-h5-size: var(--tedi-size-02); - --heading-h5-line-height: var(--tedi-line-height-03); - --heading-h6-weight: var(--tedi-weight-03); - --heading-h6-size: var(--tedi-size-02); - --heading-h6-line-height: var(--tedi-line-height-03); - --heading-h1-size: var(--tedi-size-06); - --heading-h1-line-height: var(--tedi-line-height-07); - --body-bold-weight: var(--tedi-weight-03); - --body-bold-size: var(--tedi-size-02); - --body-bold-line-height: var(--tedi-line-height-03); - --body-small-regular-weight: var(--tedi-weight-02); - --body-small-regular-size: var(--tedi-size-01); - --body-small-regular-line-height: var(--tedi-line-height-01); - --body-small-bold-weight: var(--tedi-weight-03); - --body-extra-small-bold-size: var(--tedi-size-00); - --body-extra-small-bold-weight: var(--tedi-weight-03); - --body-extra-small-bold-line-height: var(--tedi-line-height-00); - --body-small-bold-size: var(--tedi-size-01); - --body-small-bold-line-height: var(--tedi-line-height-01); - --heading-subtitle-small-weight: var(--tedi-weight-02); - --heading-subtitle-small-size: var(--tedi-size-01); - --heading-subtitle-small-line-height: var(--tedi-line-height-01); - --body-extra-small-size: var(--tedi-size-00); - --body-extra-small-weight: var(--tedi-weight-02); - --body-extra-small-line-height: var(--tedi-line-height-00); + --family-default: var(--family-roboto); + --family-heading: var(--family-roboto); + --body-regular-weight: var(--weight-02); + --body-regular-size: var(--size-02); + --body-regular-line-height: var(--line-height-03); + --heading-subtitle-regular-weight: var(--weight-03); + --heading-subtitle-regular-size: var(--size-02); + --heading-subtitle-regular-line-height: var(--line-height-03); + --heading-h1-weight: var(--weight-01); + --heading-h2-weight: var(--weight-02); + --heading-h2-size: var(--size-05); + --heading-h2-line-height: var(--line-height-05); + --heading-h3-weight: var(--weight-02); + --heading-h3-size: var(--size-04); + --heading-h3-line-height: var(--line-height-04); + --heading-h4-weight: var(--weight-02); + --heading-h4-size: var(--size-03); + --heading-h4-line-height: var(--line-height-03); + --heading-h5-weight: var(--weight-03); + --heading-h5-size: var(--size-02); + --heading-h5-line-height: var(--line-height-03); + --heading-h6-weight: var(--weight-03); + --heading-h6-size: var(--size-02); + --heading-h6-line-height: var(--line-height-03); + --heading-h1-size: var(--size-06); + --heading-h1-line-height: var(--line-height-07); + --body-bold-weight: var(--weight-03); + --body-bold-size: var(--size-02); + --body-bold-line-height: var(--line-height-03); + --body-small-regular-weight: var(--weight-02); + --body-small-regular-size: var(--size-01); + --body-small-regular-line-height: var(--line-height-01); + --body-small-bold-weight: var(--weight-03); + --body-extra-small-bold-size: var(--size-00); + --body-extra-small-bold-weight: var(--weight-03); + --body-extra-small-bold-line-height: var(--line-height-00); + --body-small-bold-size: var(--size-01); + --body-small-bold-line-height: var(--line-height-01); + --heading-subtitle-small-weight: var(--weight-02); + --heading-subtitle-small-size: var(--size-01); + --heading-subtitle-small-line-height: var(--line-height-01); + --body-extra-small-size: var(--size-00); + --body-extra-small-weight: var(--weight-02); + --body-extra-small-line-height: var(--line-height-00); --body-link-line-height: var(--body-regular-line-height); --body-link-size-small: var(--body-small-regular-size); --body-link-size-regular: var(--body-regular-size);