From e43f5d366aa9f561b7b8debd18373e3856df6377 Mon Sep 17 00:00:00 2001 From: Pedro Portella Date: Wed, 31 Jul 2024 14:32:28 +1000 Subject: [PATCH] feat: mapping themes to tokens --- .../button-campaign-neon-light.tokens.xml | 4 +- .../button/button-qld-default-dark.tokens.xml | 4 +- ...utton-qld-default-high-contrast.tokens.xml | 4 +- .../button-qld-default-light.tokens.xml | 4 +- .../button/button-qld-maroon-light.tokens.xml | 4 +- .../card/card-qld-default-dark.tokens.xml | 2 +- .../card-qld-default-high-contrast.tokens.xml | 2 +- src/android/styles/core.tokens.xml | 81 ++++- .../qgds-campaign-neon-light.tokens.xml | 28 +- .../styles/qgds-qld-default-dark.tokens.xml | 36 ++- .../qgds-qld-default-high-contrast.tokens.xml | 36 ++- .../styles/qgds-qld-default-light.tokens.xml | 28 +- .../styles/qgds-qld-maroon-light.tokens.xml | 30 +- src/android/styles/qgds.tokens.xml | 3 +- .../button-campaign-neon-light.tokens.css | 4 +- .../button/button-qld-default-dark.tokens.css | 4 +- ...utton-qld-default-high-contrast.tokens.css | 4 +- .../button-qld-default-light.tokens.css | 4 +- .../button/button-qld-maroon-light.tokens.css | 4 +- src/css/card/card-qld-default-dark.tokens.css | 2 +- .../card-qld-default-high-contrast.tokens.css | 2 +- src/css/styles/core.tokens.css | 81 ++++- .../qgds-campaign-neon-light.tokens.css | 28 +- .../styles/qgds-qld-default-dark.tokens.css | 36 ++- .../qgds-qld-default-high-contrast.tokens.css | 36 ++- .../styles/qgds-qld-default-light.tokens.css | 28 +- .../styles/qgds-qld-maroon-light.tokens.css | 30 +- src/css/styles/qgds.tokens.css | 3 +- .../button-campaign-neon-light.tokens.js | 4 +- .../button/button-qld-default-dark.tokens.js | 4 +- ...button-qld-default-high-contrast.tokens.js | 4 +- .../button/button-qld-default-light.tokens.js | 4 +- .../button/button-qld-maroon-light.tokens.js | 4 +- src/js/card/card-qld-default-dark.tokens.js | 2 +- .../card-qld-default-high-contrast.tokens.js | 2 +- src/js/styles/core.tokens.js | 81 ++++- .../styles/qgds-campaign-neon-light.tokens.js | 28 +- src/js/styles/qgds-qld-default-dark.tokens.js | 36 ++- .../qgds-qld-default-high-contrast.tokens.js | 36 ++- .../styles/qgds-qld-default-light.tokens.js | 28 +- src/js/styles/qgds-qld-maroon-light.tokens.js | 30 +- src/js/styles/qgds.tokens.js | 3 +- .../button-campaign-neon-light.tokens.scss | 4 +- .../button-qld-default-dark.tokens.scss | 4 +- ...tton-qld-default-high-contrast.tokens.scss | 4 +- .../button-qld-default-light.tokens.scss | 4 +- .../button-qld-maroon-light.tokens.scss | 4 +- .../card/card-qld-default-dark.tokens.scss | 2 +- ...card-qld-default-high-contrast.tokens.scss | 2 +- src/scss/styles/core.tokens.scss | 81 ++++- .../qgds-campaign-neon-light.tokens.scss | 28 +- .../styles/qgds-qld-default-dark.tokens.scss | 36 ++- ...qgds-qld-default-high-contrast.tokens.scss | 36 ++- .../styles/qgds-qld-default-light.tokens.scss | 28 +- .../styles/qgds-qld-maroon-light.tokens.scss | 30 +- src/scss/styles/qgds.tokens.scss | 3 +- tokens/button.tokens.json | 14 +- tokens/campaign-neon-light.tokens.json | 54 +++- tokens/campaign-neon.tokens.json | 28 +- tokens/core.tokens.json | 286 +++++++++++++++++- tokens/qgds.tokens.json | 10 +- tokens/qld-default-dark.tokens.json | 62 ++-- tokens/qld-default-high-contrast.tokens.json | 62 ++-- tokens/qld-default-light.tokens.json | 54 +++- tokens/qld-default.tokens.json | 28 +- tokens/qld-maroon-light.tokens.json | 58 +++- tokens/qld-maroon.tokens.json | 28 +- 67 files changed, 1314 insertions(+), 434 deletions(-) diff --git a/src/android/button/button-campaign-neon-light.tokens.xml b/src/android/button/button-campaign-neon-light.tokens.xml index 8b7390e..fe6c40b 100644 --- a/src/android/button/button-campaign-neon-light.tokens.xml +++ b/src/android/button/button-campaign-neon-light.tokens.xml @@ -4,6 +4,8 @@ Do not edit directly, this file was auto-generated. --> - #ff0284 + #09549f #ffffff + #77ba02 + #121940 \ No newline at end of file diff --git a/src/android/button/button-qld-default-dark.tokens.xml b/src/android/button/button-qld-default-dark.tokens.xml index 1da5e96..fe6c40b 100644 --- a/src/android/button/button-qld-default-dark.tokens.xml +++ b/src/android/button/button-qld-default-dark.tokens.xml @@ -4,6 +4,8 @@ Do not edit directly, this file was auto-generated. --> - #6bbe27 + #09549f #ffffff + #77ba02 + #121940 \ No newline at end of file diff --git a/src/android/button/button-qld-default-high-contrast.tokens.xml b/src/android/button/button-qld-default-high-contrast.tokens.xml index 4ce575e..fe6c40b 100644 --- a/src/android/button/button-qld-default-high-contrast.tokens.xml +++ b/src/android/button/button-qld-default-high-contrast.tokens.xml @@ -4,6 +4,8 @@ Do not edit directly, this file was auto-generated. --> - #ffe500 + #09549f #ffffff + #77ba02 + #121940 \ No newline at end of file diff --git a/src/android/button/button-qld-default-light.tokens.xml b/src/android/button/button-qld-default-light.tokens.xml index e9bc032..fe6c40b 100644 --- a/src/android/button/button-qld-default-light.tokens.xml +++ b/src/android/button/button-qld-default-light.tokens.xml @@ -4,6 +4,8 @@ Do not edit directly, this file was auto-generated. --> - #0000e6 + #09549f #ffffff + #77ba02 + #121940 \ No newline at end of file diff --git a/src/android/button/button-qld-maroon-light.tokens.xml b/src/android/button/button-qld-maroon-light.tokens.xml index 2b5769b..fe6c40b 100644 --- a/src/android/button/button-qld-maroon-light.tokens.xml +++ b/src/android/button/button-qld-maroon-light.tokens.xml @@ -4,6 +4,8 @@ Do not edit directly, this file was auto-generated. --> - #f2e6d0 + #09549f #ffffff + #77ba02 + #121940 \ No newline at end of file diff --git a/src/android/card/card-qld-default-dark.tokens.xml b/src/android/card/card-qld-default-dark.tokens.xml index 8fd00f1..a06608f 100644 --- a/src/android/card/card-qld-default-dark.tokens.xml +++ b/src/android/card/card-qld-default-dark.tokens.xml @@ -4,5 +4,5 @@ Do not edit directly, this file was auto-generated. --> - #2c2c2c + #ffffff \ No newline at end of file diff --git a/src/android/card/card-qld-default-high-contrast.tokens.xml b/src/android/card/card-qld-default-high-contrast.tokens.xml index 8fd00f1..a06608f 100644 --- a/src/android/card/card-qld-default-high-contrast.tokens.xml +++ b/src/android/card/card-qld-default-high-contrast.tokens.xml @@ -4,5 +4,5 @@ Do not edit directly, this file was auto-generated. --> - #2c2c2c + #ffffff \ No newline at end of file diff --git a/src/android/styles/core.tokens.xml b/src/android/styles/core.tokens.xml index 4d8dd63..9da27eb 100644 --- a/src/android/styles/core.tokens.xml +++ b/src/android/styles/core.tokens.xml @@ -22,6 +22,15 @@ 4 8 #131212 #ffffff + #f5f5f5 + #e8e8e8 + #eae9e8 + #e8e7e5 + #e5e4e2 + #cecdcb + #b7b6b5 + #a0a09e + #898988 #929292 #808080 #6e6e6e @@ -76,15 +85,24 @@ #ccb700 #b3a000 #998900 - #a6d87d - #97d268 - #89cb52 - #7ac53d - #6bbe27 - #60ab23 - #56981f - #4b851b - #407217 + #fff5a0 + #fff490 + #fff280 + #fff170 + #ffef60 + #e6d756 + #ccbf4d + #b3a743 + #998f3a + #ffef68 + #ffed4f + #ffea35 + #ffe81c + #ffe503 + #e6ce03 + #ccb702 + #b3a002 + #998902 #85c487 #70ba73 #5cb15f @@ -94,6 +112,33 @@ #297e2c #246e27 #1f5e21 + #66b686 + #4daa72 + #339e5d + #1a9249 + #008635 + #007930 + #006b2a + #005e25 + #005020 + #a6d87d + #97d268 + #89cb52 + #7ac53d + #6bbe27 + #60ab23 + #56981f + #4b851b + #407217 + #add667 + #a0cf4e + #92c835 + #85c11b + #77ba02 + #6ba702 + #5f9502 + #538201 + #477001 #6666ff #4d4dff #3333ff @@ -103,6 +148,15 @@ #0000cc #0000b3 #000099 + #6b98c5 + #5387bc + #3a76b2 + #2265a9 + #09549f + #084c8f + #07437f + #063b6f + #05325f #66b6d1 #4daaca #339dc2 @@ -121,6 +175,15 @@ #004b6a #00425d #003850 + #d0d1d9 + #b8bac6 + #a0a3b3 + #898ca0 + #71758c + #595e79 + #414766 + #2a3053 + #121940 #e6fffa #b2f5ea #81e6d9 diff --git a/src/android/styles/qgds-campaign-neon-light.tokens.xml b/src/android/styles/qgds-campaign-neon-light.tokens.xml index a81b854..726586b 100644 --- a/src/android/styles/qgds-campaign-neon-light.tokens.xml +++ b/src/android/styles/qgds-campaign-neon-light.tokens.xml @@ -4,17 +4,25 @@ Do not edit directly, this file was auto-generated. --> - #434343 - #ffd141 - #2c2c2c - #3b3b3b - #4a4a4a + #e22339 + #0085b3 + #339d37 + #ffcc2c + #09549f + #07437f + #05325f #ffffff - #5c5c5c - #4a4a4a - #ff0284 - #ffffff - #434343 + #f5f5f5 + #e8e8e8 + #09549f + #ffffff + #008635 + #09549f + #77ba02 + #121940 + #ffe503 + #ffffff + #121940 #2c2c2c #0000ff #553c9a diff --git a/src/android/styles/qgds-qld-default-dark.tokens.xml b/src/android/styles/qgds-qld-default-dark.tokens.xml index a45882d..6f0b21e 100644 --- a/src/android/styles/qgds-qld-default-dark.tokens.xml +++ b/src/android/styles/qgds-qld-default-dark.tokens.xml @@ -4,18 +4,26 @@ Do not edit directly, this file was auto-generated. --> - #6e6e6e - #e6b828 - #ffffff - #6e6e6e - #4a4a4a - #2c2c2c - #3b3b3b - #434343 - #6bbe27 - #ffffff - #407217 - rgba(19, 18, 18, 0.3) - #998900 - #e84f61 + #e22339 + #0085b3 + #339d37 + #ffcc2c + #09549f + #07437f + #05325f + #ffffff + #f5f5f5 + #e8e8e8 + #09549f + #ffffff + #008635 + #09549f + #77ba02 + #121940 + #ffe503 + #ffffff + #121940 + #2c2c2c + #0000ff + #553c9a \ No newline at end of file diff --git a/src/android/styles/qgds-qld-default-high-contrast.tokens.xml b/src/android/styles/qgds-qld-default-high-contrast.tokens.xml index 218c49f..6f0b21e 100644 --- a/src/android/styles/qgds-qld-default-high-contrast.tokens.xml +++ b/src/android/styles/qgds-qld-default-high-contrast.tokens.xml @@ -4,18 +4,26 @@ Do not edit directly, this file was auto-generated. --> - #6e6e6e - #e6b828 - #ffffff - #6e6e6e - #4a4a4a - #2c2c2c - #3b3b3b - #434343 - #ffe500 - #ffffff - #998900 - rgba(19, 18, 18, 0.3) - #407217 - #e84f61 + #e22339 + #0085b3 + #339d37 + #ffcc2c + #09549f + #07437f + #05325f + #ffffff + #f5f5f5 + #e8e8e8 + #09549f + #ffffff + #008635 + #09549f + #77ba02 + #121940 + #ffe503 + #ffffff + #121940 + #2c2c2c + #0000ff + #553c9a \ No newline at end of file diff --git a/src/android/styles/qgds-qld-default-light.tokens.xml b/src/android/styles/qgds-qld-default-light.tokens.xml index 6e87b05..6f0b21e 100644 --- a/src/android/styles/qgds-qld-default-light.tokens.xml +++ b/src/android/styles/qgds-qld-default-light.tokens.xml @@ -4,17 +4,25 @@ Do not edit directly, this file was auto-generated. --> - #6e6e6e - #e6b828 - #2c2c2c - #3b3b3b - #4a4a4a + #e22339 + #0085b3 + #339d37 + #ffcc2c + #09549f + #07437f + #05325f #ffffff - #5c5c5c - #4a4a4a - #0000e6 - #ffffff - #6666ff + #f5f5f5 + #e8e8e8 + #09549f + #ffffff + #008635 + #09549f + #77ba02 + #121940 + #ffe503 + #ffffff + #121940 #2c2c2c #0000ff #553c9a diff --git a/src/android/styles/qgds-qld-maroon-light.tokens.xml b/src/android/styles/qgds-qld-maroon-light.tokens.xml index 455876b..6fa5fa5 100644 --- a/src/android/styles/qgds-qld-maroon-light.tokens.xml +++ b/src/android/styles/qgds-qld-maroon-light.tokens.xml @@ -4,18 +4,26 @@ Do not edit directly, this file was auto-generated. --> - #5c5c5c - #ffdb6b - #b80b4d - #3b3b3b - #4a4a4a + #e22339 + #0085b3 + #339d37 + #ffcc2c + #09549f + #07437f + #05325f #ffffff - #5c5c5c - #4a4a4a - #f2e6d0 - #ffffff - #f7f0e3 + #f5f5f5 + #e8e8e8 + #09549f + #ffffff + #008635 + #09549f + #77ba02 + #121940 + #ffe503 + #ffffff + #121940 #2c2c2c #0000ff - #005e85 + #553c9a \ No newline at end of file diff --git a/src/android/styles/qgds.tokens.xml b/src/android/styles/qgds.tokens.xml index 1b82f28..bff4b83 100644 --- a/src/android/styles/qgds.tokens.xml +++ b/src/android/styles/qgds.tokens.xml @@ -4,8 +4,7 @@ Do not edit directly, this file was auto-generated. --> - #131212 - #131212 + #131212 inter 700 110% diff --git a/src/css/button/button-campaign-neon-light.tokens.css b/src/css/button/button-campaign-neon-light.tokens.css index 5d79709..0202030 100644 --- a/src/css/button/button-campaign-neon-light.tokens.css +++ b/src/css/button/button-campaign-neon-light.tokens.css @@ -3,6 +3,8 @@ */ :host { - --button-primary-background: #ff0284; + --button-primary-background: #09549f; --button-primary-text: #ffffff; + --button-secondary-border-color: #77ba02; + --button-secondary-text: #121940; } diff --git a/src/css/button/button-qld-default-dark.tokens.css b/src/css/button/button-qld-default-dark.tokens.css index e7e5d5e..0202030 100644 --- a/src/css/button/button-qld-default-dark.tokens.css +++ b/src/css/button/button-qld-default-dark.tokens.css @@ -3,6 +3,8 @@ */ :host { - --button-primary-background: #6bbe27; + --button-primary-background: #09549f; --button-primary-text: #ffffff; + --button-secondary-border-color: #77ba02; + --button-secondary-text: #121940; } diff --git a/src/css/button/button-qld-default-high-contrast.tokens.css b/src/css/button/button-qld-default-high-contrast.tokens.css index 50491fe..0202030 100644 --- a/src/css/button/button-qld-default-high-contrast.tokens.css +++ b/src/css/button/button-qld-default-high-contrast.tokens.css @@ -3,6 +3,8 @@ */ :host { - --button-primary-background: #ffe500; + --button-primary-background: #09549f; --button-primary-text: #ffffff; + --button-secondary-border-color: #77ba02; + --button-secondary-text: #121940; } diff --git a/src/css/button/button-qld-default-light.tokens.css b/src/css/button/button-qld-default-light.tokens.css index 1163dd8..0202030 100644 --- a/src/css/button/button-qld-default-light.tokens.css +++ b/src/css/button/button-qld-default-light.tokens.css @@ -3,6 +3,8 @@ */ :host { - --button-primary-background: #0000e6; + --button-primary-background: #09549f; --button-primary-text: #ffffff; + --button-secondary-border-color: #77ba02; + --button-secondary-text: #121940; } diff --git a/src/css/button/button-qld-maroon-light.tokens.css b/src/css/button/button-qld-maroon-light.tokens.css index f0c9d61..0202030 100644 --- a/src/css/button/button-qld-maroon-light.tokens.css +++ b/src/css/button/button-qld-maroon-light.tokens.css @@ -3,6 +3,8 @@ */ :host { - --button-primary-background: #f2e6d0; + --button-primary-background: #09549f; --button-primary-text: #ffffff; + --button-secondary-border-color: #77ba02; + --button-secondary-text: #121940; } diff --git a/src/css/card/card-qld-default-dark.tokens.css b/src/css/card/card-qld-default-dark.tokens.css index 22cb82e..1a11d39 100644 --- a/src/css/card/card-qld-default-dark.tokens.css +++ b/src/css/card/card-qld-default-dark.tokens.css @@ -3,5 +3,5 @@ */ :host { - --card-background: #2c2c2c; + --card-background: #ffffff; } diff --git a/src/css/card/card-qld-default-high-contrast.tokens.css b/src/css/card/card-qld-default-high-contrast.tokens.css index 22cb82e..1a11d39 100644 --- a/src/css/card/card-qld-default-high-contrast.tokens.css +++ b/src/css/card/card-qld-default-high-contrast.tokens.css @@ -3,5 +3,5 @@ */ :host { - --card-background: #2c2c2c; + --card-background: #ffffff; } diff --git a/src/css/styles/core.tokens.css b/src/css/styles/core.tokens.css index 7e31960..97bd603 100644 --- a/src/css/styles/core.tokens.css +++ b/src/css/styles/core.tokens.css @@ -21,6 +21,15 @@ --border-radius-multi-value: 4 8; --colors-black: #131212; --colors-white: #ffffff; + --colors-silver-100: #f5f5f5; + --colors-silver-200: #e8e8e8; + --colors-silver-300: #eae9e8; + --colors-silver-400: #e8e7e5; + --colors-silver-500: #e5e4e2; + --colors-silver-600: #cecdcb; + --colors-silver-700: #b7b6b5; + --colors-silver-800: #a0a09e; + --colors-silver-900: #898988; --colors-gray-100: #929292; --colors-gray-200: #808080; --colors-gray-300: #6e6e6e; @@ -75,15 +84,24 @@ --colors-yellow-700: #ccb700; --colors-yellow-800: #b3a000; --colors-yellow-900: #998900; - --colors-lime-100: #a6d87d; - --colors-lime-200: #97d268; - --colors-lime-300: #89cb52; - --colors-lime-400: #7ac53d; - --colors-lime-500: #6bbe27; - --colors-lime-600: #60ab23; - --colors-lime-700: #56981f; - --colors-lime-800: #4b851b; - --colors-lime-900: #407217; + --colors-paris-daisy-100: #fff5a0; + --colors-paris-daisy-200: #fff490; + --colors-paris-daisy-300: #fff280; + --colors-paris-daisy-400: #fff170; + --colors-paris-daisy-500: #ffef60; + --colors-paris-daisy-600: #e6d756; + --colors-paris-daisy-700: #ccbf4d; + --colors-paris-daisy-800: #b3a743; + --colors-paris-daisy-900: #998f3a; + --colors-turbo-100: #ffef68; + --colors-turbo-200: #ffed4f; + --colors-turbo-300: #ffea35; + --colors-turbo-400: #ffe81c; + --colors-turbo-500: #ffe503; + --colors-turbo-600: #e6ce03; + --colors-turbo-700: #ccb702; + --colors-turbo-800: #b3a002; + --colors-turbo-900: #998902; --colors-green-100: #85c487; --colors-green-200: #70ba73; --colors-green-300: #5cb15f; @@ -93,6 +111,33 @@ --colors-green-700: #297e2c; --colors-green-800: #246e27; --colors-green-900: #1f5e21; + --colors-fun-green-100: #66b686; + --colors-fun-green-200: #4daa72; + --colors-fun-green-300: #339e5d; + --colors-fun-green-400: #1a9249; + --colors-fun-green-500: #008635; + --colors-fun-green-600: #007930; + --colors-fun-green-700: #006b2a; + --colors-fun-green-800: #005e25; + --colors-fun-green-900: #005020; + --colors-lime-100: #a6d87d; + --colors-lime-200: #97d268; + --colors-lime-300: #89cb52; + --colors-lime-400: #7ac53d; + --colors-lime-500: #6bbe27; + --colors-lime-600: #60ab23; + --colors-lime-700: #56981f; + --colors-lime-800: #4b851b; + --colors-lime-900: #407217; + --colors-limeade-100: #add667; + --colors-limeade-200: #a0cf4e; + --colors-limeade-300: #92c835; + --colors-limeade-400: #85c11b; + --colors-limeade-500: #77ba02; + --colors-limeade-600: #6ba702; + --colors-limeade-700: #5f9502; + --colors-limeade-800: #538201; + --colors-limeade-900: #477001; --colors-blue-100: #6666ff; --colors-blue-200: #4d4dff; --colors-blue-300: #3333ff; @@ -102,6 +147,15 @@ --colors-blue-700: #0000cc; --colors-blue-800: #0000b3; --colors-blue-900: #000099; + --colors-venice-blue-100: #6b98c5; + --colors-venice-blue-200: #5387bc; + --colors-venice-blue-300: #3a76b2; + --colors-venice-blue-400: #2265a9; + --colors-venice-blue-500: #09549f; + --colors-venice-blue-600: #084c8f; + --colors-venice-blue-700: #07437f; + --colors-venice-blue-800: #063b6f; + --colors-venice-blue-900: #05325f; --colors-bondi-blue-100: #66b6d1; --colors-bondi-blue-200: #4daaca; --colors-bondi-blue-300: #339dc2; @@ -120,6 +174,15 @@ --colors-orient-700: #004b6a; --colors-orient-800: #00425d; --colors-orient-900: #003850; + --colors-bunting-100: #d0d1d9; + --colors-bunting-200: #b8bac6; + --colors-bunting-300: #a0a3b3; + --colors-bunting-400: #898ca0; + --colors-bunting-500: #71758c; + --colors-bunting-600: #595e79; + --colors-bunting-700: #414766; + --colors-bunting-800: #2a3053; + --colors-bunting-900: #121940; --colors-teal-100: #e6fffa; --colors-teal-200: #b2f5ea; --colors-teal-300: #81e6d9; diff --git a/src/css/styles/qgds-campaign-neon-light.tokens.css b/src/css/styles/qgds-campaign-neon-light.tokens.css index 66ded7b..43d44ff 100644 --- a/src/css/styles/qgds-campaign-neon-light.tokens.css +++ b/src/css/styles/qgds-campaign-neon-light.tokens.css @@ -3,17 +3,25 @@ */ :host { - --text-secondary-color: #434343; - --custom-neon-token-name-default: #ffd141; - --fg-default: #2c2c2c; - --fg-muted: #3b3b3b; - --fg-subtle: #4a4a4a; + --campaing-neon-reserved-color-error: #e22339; + --campaing-neon-reserved-color-information: #0085b3; + --campaing-neon-reserved-color-success: #339d37; + --campaing-neon-reserved-color-alert: #ffcc2c; + --fg-default: #09549f; + --fg-muted: #07437f; + --fg-subtle: #05325f; --bg-default: #ffffff; - --bg-muted: #5c5c5c; - --bg-subtle: #4a4a4a; - --accent-default: #ff0284; - --accent-on-accent: #ffffff; - --accent-bg: #434343; + --bg-muted: #f5f5f5; + --bg-subtle: #e8e8e8; + --accent-bg-default: #09549f; + --accent-bg-on-accent: #ffffff; + --accent-bg-alt: #008635; + --accent-bg-on-alt-accent: #09549f; + --accent-fg-default: #77ba02; + --accent-fg-on-accent: #121940; + --accent-fg-alt: #ffe503; + --accent-fg-on-alt-accent: #ffffff; + --accent-highlight: #121940; --shadows-default: #2c2c2c; --custom-name-default: #0000ff; --my-group-two-default: #553c9a; diff --git a/src/css/styles/qgds-qld-default-dark.tokens.css b/src/css/styles/qgds-qld-default-dark.tokens.css index ae60082..e439c8a 100644 --- a/src/css/styles/qgds-qld-default-dark.tokens.css +++ b/src/css/styles/qgds-qld-default-dark.tokens.css @@ -3,18 +3,26 @@ */ :host { - --text-secondary-color: #6e6e6e; - --custom-qld-default-token-name-default: #e6b828; - --fg-default: #ffffff; - --fg-muted: #6e6e6e; - --fg-subtle: #4a4a4a; - --bg-default: #2c2c2c; - --bg-muted: #3b3b3b; - --bg-subtle: #434343; - --accent-default: #6bbe27; - --accent-on-accent: #ffffff; - --accent-bg: #407217; - --shadows-default: rgba(19, 18, 18, 0.3); - --custom-name-default: #998900; - --my-group-two-default: #e84f61; + --qld-default-reserved-color-error: #e22339; + --qld-default-reserved-color-information: #0085b3; + --qld-default-reserved-color-success: #339d37; + --qld-default-reserved-color-alert: #ffcc2c; + --fg-default: #09549f; + --fg-muted: #07437f; + --fg-subtle: #05325f; + --bg-default: #ffffff; + --bg-muted: #f5f5f5; + --bg-subtle: #e8e8e8; + --accent-bg-default: #09549f; + --accent-bg-on-accent: #ffffff; + --accent-bg-alt: #008635; + --accent-bg-on-alt-accent: #09549f; + --accent-fg-default: #77ba02; + --accent-fg-on-accent: #121940; + --accent-fg-alt: #ffe503; + --accent-fg-on-alt-accent: #ffffff; + --accent-highlight: #121940; + --shadows-default: #2c2c2c; + --custom-name-default: #0000ff; + --my-group-two-default: #553c9a; } diff --git a/src/css/styles/qgds-qld-default-high-contrast.tokens.css b/src/css/styles/qgds-qld-default-high-contrast.tokens.css index 677a0e6..e439c8a 100644 --- a/src/css/styles/qgds-qld-default-high-contrast.tokens.css +++ b/src/css/styles/qgds-qld-default-high-contrast.tokens.css @@ -3,18 +3,26 @@ */ :host { - --text-secondary-color: #6e6e6e; - --custom-qld-default-token-name-default: #e6b828; - --fg-default: #ffffff; - --fg-muted: #6e6e6e; - --fg-subtle: #4a4a4a; - --bg-default: #2c2c2c; - --bg-muted: #3b3b3b; - --bg-subtle: #434343; - --accent-default: #ffe500; - --accent-on-accent: #ffffff; - --accent-bg: #998900; - --shadows-default: rgba(19, 18, 18, 0.3); - --custom-name-default: #407217; - --my-group-two-default: #e84f61; + --qld-default-reserved-color-error: #e22339; + --qld-default-reserved-color-information: #0085b3; + --qld-default-reserved-color-success: #339d37; + --qld-default-reserved-color-alert: #ffcc2c; + --fg-default: #09549f; + --fg-muted: #07437f; + --fg-subtle: #05325f; + --bg-default: #ffffff; + --bg-muted: #f5f5f5; + --bg-subtle: #e8e8e8; + --accent-bg-default: #09549f; + --accent-bg-on-accent: #ffffff; + --accent-bg-alt: #008635; + --accent-bg-on-alt-accent: #09549f; + --accent-fg-default: #77ba02; + --accent-fg-on-accent: #121940; + --accent-fg-alt: #ffe503; + --accent-fg-on-alt-accent: #ffffff; + --accent-highlight: #121940; + --shadows-default: #2c2c2c; + --custom-name-default: #0000ff; + --my-group-two-default: #553c9a; } diff --git a/src/css/styles/qgds-qld-default-light.tokens.css b/src/css/styles/qgds-qld-default-light.tokens.css index df67a6d..e439c8a 100644 --- a/src/css/styles/qgds-qld-default-light.tokens.css +++ b/src/css/styles/qgds-qld-default-light.tokens.css @@ -3,17 +3,25 @@ */ :host { - --text-secondary-color: #6e6e6e; - --custom-qld-default-token-name-default: #e6b828; - --fg-default: #2c2c2c; - --fg-muted: #3b3b3b; - --fg-subtle: #4a4a4a; + --qld-default-reserved-color-error: #e22339; + --qld-default-reserved-color-information: #0085b3; + --qld-default-reserved-color-success: #339d37; + --qld-default-reserved-color-alert: #ffcc2c; + --fg-default: #09549f; + --fg-muted: #07437f; + --fg-subtle: #05325f; --bg-default: #ffffff; - --bg-muted: #5c5c5c; - --bg-subtle: #4a4a4a; - --accent-default: #0000e6; - --accent-on-accent: #ffffff; - --accent-bg: #6666ff; + --bg-muted: #f5f5f5; + --bg-subtle: #e8e8e8; + --accent-bg-default: #09549f; + --accent-bg-on-accent: #ffffff; + --accent-bg-alt: #008635; + --accent-bg-on-alt-accent: #09549f; + --accent-fg-default: #77ba02; + --accent-fg-on-accent: #121940; + --accent-fg-alt: #ffe503; + --accent-fg-on-alt-accent: #ffffff; + --accent-highlight: #121940; --shadows-default: #2c2c2c; --custom-name-default: #0000ff; --my-group-two-default: #553c9a; diff --git a/src/css/styles/qgds-qld-maroon-light.tokens.css b/src/css/styles/qgds-qld-maroon-light.tokens.css index 013ce9a..90e0fdf 100644 --- a/src/css/styles/qgds-qld-maroon-light.tokens.css +++ b/src/css/styles/qgds-qld-maroon-light.tokens.css @@ -3,18 +3,26 @@ */ :host { - --text-secondary-color: #5c5c5c; - --custom-maroon-token-name-default: #ffdb6b; - --fg-default: #b80b4d; - --fg-muted: #3b3b3b; - --fg-subtle: #4a4a4a; + --qld-maroon-reserved-color-error: #e22339; + --qld-maroon-reserved-color-information: #0085b3; + --qld-maroon-reserved-color-success: #339d37; + --qld-maroon-reserved-color-alert: #ffcc2c; + --fg-default: #09549f; + --fg-muted: #07437f; + --fg-subtle: #05325f; --bg-default: #ffffff; - --bg-muted: #5c5c5c; - --bg-subtle: #4a4a4a; - --accent-default: #f2e6d0; - --accent-on-accent: #ffffff; - --accent-bg: #f7f0e3; + --bg-muted: #f5f5f5; + --bg-subtle: #e8e8e8; + --accent-bg-default: #09549f; + --accent-bg-on-accent: #ffffff; + --accent-bg-alt: #008635; + --accent-bg-on-alt-accent: #09549f; + --accent-fg-default: #77ba02; + --accent-fg-on-accent: #121940; + --accent-fg-alt: #ffe503; + --accent-fg-on-alt-accent: #ffffff; + --accent-highlight: #121940; --shadows-default: #2c2c2c; --custom-name-default: #0000ff; - --my-group-two-test-name-default: #005e85; + --my-group-two-default: #553c9a; } diff --git a/src/css/styles/qgds.tokens.css b/src/css/styles/qgds.tokens.css index 64dd60e..bd8a69e 100644 --- a/src/css/styles/qgds.tokens.css +++ b/src/css/styles/qgds.tokens.css @@ -3,8 +3,7 @@ */ :host { - --core-default-color-neutral-black: #131212; - --text-primary-color: #131212; + --qgds-tokens-color-neutral-black: #131212; --typography-h1-bold-font-family: inter; --typography-h1-bold-font-weight: 700; --typography-h1-bold-line-height: 110%; diff --git a/src/js/button/button-campaign-neon-light.tokens.js b/src/js/button/button-campaign-neon-light.tokens.js index e288454..d5b835b 100644 --- a/src/js/button/button-campaign-neon-light.tokens.js +++ b/src/js/button/button-campaign-neon-light.tokens.js @@ -2,5 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const buttonPrimaryBackground = "#ff0284"; +export const buttonPrimaryBackground = "#09549f"; export const buttonPrimaryText = "#ffffff"; +export const buttonSecondaryBorderColor = "#77ba02"; +export const buttonSecondaryText = "#121940"; diff --git a/src/js/button/button-qld-default-dark.tokens.js b/src/js/button/button-qld-default-dark.tokens.js index e28528d..d5b835b 100644 --- a/src/js/button/button-qld-default-dark.tokens.js +++ b/src/js/button/button-qld-default-dark.tokens.js @@ -2,5 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const buttonPrimaryBackground = "#6bbe27"; +export const buttonPrimaryBackground = "#09549f"; export const buttonPrimaryText = "#ffffff"; +export const buttonSecondaryBorderColor = "#77ba02"; +export const buttonSecondaryText = "#121940"; diff --git a/src/js/button/button-qld-default-high-contrast.tokens.js b/src/js/button/button-qld-default-high-contrast.tokens.js index fe77a4c..d5b835b 100644 --- a/src/js/button/button-qld-default-high-contrast.tokens.js +++ b/src/js/button/button-qld-default-high-contrast.tokens.js @@ -2,5 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const buttonPrimaryBackground = "#ffe500"; +export const buttonPrimaryBackground = "#09549f"; export const buttonPrimaryText = "#ffffff"; +export const buttonSecondaryBorderColor = "#77ba02"; +export const buttonSecondaryText = "#121940"; diff --git a/src/js/button/button-qld-default-light.tokens.js b/src/js/button/button-qld-default-light.tokens.js index 309cfb8..d5b835b 100644 --- a/src/js/button/button-qld-default-light.tokens.js +++ b/src/js/button/button-qld-default-light.tokens.js @@ -2,5 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const buttonPrimaryBackground = "#0000e6"; +export const buttonPrimaryBackground = "#09549f"; export const buttonPrimaryText = "#ffffff"; +export const buttonSecondaryBorderColor = "#77ba02"; +export const buttonSecondaryText = "#121940"; diff --git a/src/js/button/button-qld-maroon-light.tokens.js b/src/js/button/button-qld-maroon-light.tokens.js index b51cb83..d5b835b 100644 --- a/src/js/button/button-qld-maroon-light.tokens.js +++ b/src/js/button/button-qld-maroon-light.tokens.js @@ -2,5 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const buttonPrimaryBackground = "#f2e6d0"; +export const buttonPrimaryBackground = "#09549f"; export const buttonPrimaryText = "#ffffff"; +export const buttonSecondaryBorderColor = "#77ba02"; +export const buttonSecondaryText = "#121940"; diff --git a/src/js/card/card-qld-default-dark.tokens.js b/src/js/card/card-qld-default-dark.tokens.js index d92f4e6..0f4a760 100644 --- a/src/js/card/card-qld-default-dark.tokens.js +++ b/src/js/card/card-qld-default-dark.tokens.js @@ -2,4 +2,4 @@ * Do not edit directly, this file was auto-generated. */ -export const cardBackground = "#2c2c2c"; +export const cardBackground = "#ffffff"; diff --git a/src/js/card/card-qld-default-high-contrast.tokens.js b/src/js/card/card-qld-default-high-contrast.tokens.js index d92f4e6..0f4a760 100644 --- a/src/js/card/card-qld-default-high-contrast.tokens.js +++ b/src/js/card/card-qld-default-high-contrast.tokens.js @@ -2,4 +2,4 @@ * Do not edit directly, this file was auto-generated. */ -export const cardBackground = "#2c2c2c"; +export const cardBackground = "#ffffff"; diff --git a/src/js/styles/core.tokens.js b/src/js/styles/core.tokens.js index 15645ac..302b374 100644 --- a/src/js/styles/core.tokens.js +++ b/src/js/styles/core.tokens.js @@ -20,6 +20,15 @@ export const borderRadiusXl = "16"; export const borderRadiusMultiValue = "4 8"; export const colorsBlack = "#131212"; export const colorsWhite = "#ffffff"; +export const colorsSilver100 = "#f5f5f5"; +export const colorsSilver200 = "#e8e8e8"; +export const colorsSilver300 = "#eae9e8"; +export const colorsSilver400 = "#e8e7e5"; +export const colorsSilver500 = "#e5e4e2"; +export const colorsSilver600 = "#cecdcb"; +export const colorsSilver700 = "#b7b6b5"; +export const colorsSilver800 = "#a0a09e"; +export const colorsSilver900 = "#898988"; export const colorsGray100 = "#929292"; export const colorsGray200 = "#808080"; export const colorsGray300 = "#6e6e6e"; @@ -74,15 +83,24 @@ export const colorsYellow600 = "#e6ce00"; export const colorsYellow700 = "#ccb700"; export const colorsYellow800 = "#b3a000"; export const colorsYellow900 = "#998900"; -export const colorsLime100 = "#a6d87d"; -export const colorsLime200 = "#97d268"; -export const colorsLime300 = "#89cb52"; -export const colorsLime400 = "#7ac53d"; -export const colorsLime500 = "#6bbe27"; -export const colorsLime600 = "#60ab23"; -export const colorsLime700 = "#56981f"; -export const colorsLime800 = "#4b851b"; -export const colorsLime900 = "#407217"; +export const colorsParisDaisy100 = "#fff5a0"; +export const colorsParisDaisy200 = "#fff490"; +export const colorsParisDaisy300 = "#fff280"; +export const colorsParisDaisy400 = "#fff170"; +export const colorsParisDaisy500 = "#ffef60"; +export const colorsParisDaisy600 = "#e6d756"; +export const colorsParisDaisy700 = "#ccbf4d"; +export const colorsParisDaisy800 = "#b3a743"; +export const colorsParisDaisy900 = "#998f3a"; +export const colorsTurbo100 = "#ffef68"; +export const colorsTurbo200 = "#ffed4f"; +export const colorsTurbo300 = "#ffea35"; +export const colorsTurbo400 = "#ffe81c"; +export const colorsTurbo500 = "#ffe503"; +export const colorsTurbo600 = "#e6ce03"; +export const colorsTurbo700 = "#ccb702"; +export const colorsTurbo800 = "#b3a002"; +export const colorsTurbo900 = "#998902"; export const colorsGreen100 = "#85c487"; export const colorsGreen200 = "#70ba73"; export const colorsGreen300 = "#5cb15f"; @@ -92,6 +110,33 @@ export const colorsGreen600 = "#2e8d32"; export const colorsGreen700 = "#297e2c"; export const colorsGreen800 = "#246e27"; export const colorsGreen900 = "#1f5e21"; +export const colorsFunGreen100 = "#66b686"; +export const colorsFunGreen200 = "#4daa72"; +export const colorsFunGreen300 = "#339e5d"; +export const colorsFunGreen400 = "#1a9249"; +export const colorsFunGreen500 = "#008635"; +export const colorsFunGreen600 = "#007930"; +export const colorsFunGreen700 = "#006b2a"; +export const colorsFunGreen800 = "#005e25"; +export const colorsFunGreen900 = "#005020"; +export const colorsLime100 = "#a6d87d"; +export const colorsLime200 = "#97d268"; +export const colorsLime300 = "#89cb52"; +export const colorsLime400 = "#7ac53d"; +export const colorsLime500 = "#6bbe27"; +export const colorsLime600 = "#60ab23"; +export const colorsLime700 = "#56981f"; +export const colorsLime800 = "#4b851b"; +export const colorsLime900 = "#407217"; +export const colorsLimeade100 = "#add667"; +export const colorsLimeade200 = "#a0cf4e"; +export const colorsLimeade300 = "#92c835"; +export const colorsLimeade400 = "#85c11b"; +export const colorsLimeade500 = "#77ba02"; +export const colorsLimeade600 = "#6ba702"; +export const colorsLimeade700 = "#5f9502"; +export const colorsLimeade800 = "#538201"; +export const colorsLimeade900 = "#477001"; export const colorsBlue100 = "#6666ff"; export const colorsBlue200 = "#4d4dff"; export const colorsBlue300 = "#3333ff"; @@ -101,6 +146,15 @@ export const colorsBlue600 = "#0000e6"; export const colorsBlue700 = "#0000cc"; export const colorsBlue800 = "#0000b3"; export const colorsBlue900 = "#000099"; +export const colorsVeniceBlue100 = "#6b98c5"; +export const colorsVeniceBlue200 = "#5387bc"; +export const colorsVeniceBlue300 = "#3a76b2"; +export const colorsVeniceBlue400 = "#2265a9"; +export const colorsVeniceBlue500 = "#09549f"; +export const colorsVeniceBlue600 = "#084c8f"; +export const colorsVeniceBlue700 = "#07437f"; +export const colorsVeniceBlue800 = "#063b6f"; +export const colorsVeniceBlue900 = "#05325f"; export const colorsBondiBlue100 = "#66b6d1"; export const colorsBondiBlue200 = "#4daaca"; export const colorsBondiBlue300 = "#339dc2"; @@ -119,6 +173,15 @@ export const colorsOrient600 = "#005578"; export const colorsOrient700 = "#004b6a"; export const colorsOrient800 = "#00425d"; export const colorsOrient900 = "#003850"; +export const colorsBunting100 = "#d0d1d9"; +export const colorsBunting200 = "#b8bac6"; +export const colorsBunting300 = "#a0a3b3"; +export const colorsBunting400 = "#898ca0"; +export const colorsBunting500 = "#71758c"; +export const colorsBunting600 = "#595e79"; +export const colorsBunting700 = "#414766"; +export const colorsBunting800 = "#2a3053"; +export const colorsBunting900 = "#121940"; export const colorsTeal100 = "#e6fffa"; export const colorsTeal200 = "#b2f5ea"; export const colorsTeal300 = "#81e6d9"; diff --git a/src/js/styles/qgds-campaign-neon-light.tokens.js b/src/js/styles/qgds-campaign-neon-light.tokens.js index fb23033..c157f3c 100644 --- a/src/js/styles/qgds-campaign-neon-light.tokens.js +++ b/src/js/styles/qgds-campaign-neon-light.tokens.js @@ -2,17 +2,25 @@ * Do not edit directly, this file was auto-generated. */ -export const textSecondaryColor = "#434343"; -export const customNeonTokenNameDefault = "#ffd141"; -export const fgDefault = "#2c2c2c"; -export const fgMuted = "#3b3b3b"; -export const fgSubtle = "#4a4a4a"; +export const campaingNeonReservedColorError = "#e22339"; +export const campaingNeonReservedColorInformation = "#0085b3"; +export const campaingNeonReservedColorSuccess = "#339d37"; +export const campaingNeonReservedColorAlert = "#ffcc2c"; +export const fgDefault = "#09549f"; +export const fgMuted = "#07437f"; +export const fgSubtle = "#05325f"; export const bgDefault = "#ffffff"; -export const bgMuted = "#5c5c5c"; -export const bgSubtle = "#4a4a4a"; -export const accentDefault = "#ff0284"; -export const accentOnAccent = "#ffffff"; -export const accentBg = "#434343"; +export const bgMuted = "#f5f5f5"; +export const bgSubtle = "#e8e8e8"; +export const accentBgDefault = "#09549f"; +export const accentBgOnAccent = "#ffffff"; +export const accentBgAlt = "#008635"; +export const accentBgOnAltAccent = "#09549f"; +export const accentFgDefault = "#77ba02"; +export const accentFgOnAccent = "#121940"; +export const accentFgAlt = "#ffe503"; +export const accentFgOnAltAccent = "#ffffff"; +export const accentHighlight = "#121940"; export const shadowsDefault = "#2c2c2c"; export const customNameDefault = "#0000ff"; export const myGroupTwoDefault = "#553c9a"; diff --git a/src/js/styles/qgds-qld-default-dark.tokens.js b/src/js/styles/qgds-qld-default-dark.tokens.js index cfce76d..1d00d30 100644 --- a/src/js/styles/qgds-qld-default-dark.tokens.js +++ b/src/js/styles/qgds-qld-default-dark.tokens.js @@ -2,17 +2,25 @@ * Do not edit directly, this file was auto-generated. */ -export const textSecondaryColor = "#6e6e6e"; -export const customQldDefaultTokenNameDefault = "#e6b828"; -export const fgDefault = "#ffffff"; -export const fgMuted = "#6e6e6e"; -export const fgSubtle = "#4a4a4a"; -export const bgDefault = "#2c2c2c"; -export const bgMuted = "#3b3b3b"; -export const bgSubtle = "#434343"; -export const accentDefault = "#6bbe27"; -export const accentOnAccent = "#ffffff"; -export const accentBg = "#407217"; -export const shadowsDefault = "rgba(19, 18, 18, 0.3)"; -export const customNameDefault = "#998900"; -export const myGroupTwoDefault = "#e84f61"; +export const qldDefaultReservedColorError = "#e22339"; +export const qldDefaultReservedColorInformation = "#0085b3"; +export const qldDefaultReservedColorSuccess = "#339d37"; +export const qldDefaultReservedColorAlert = "#ffcc2c"; +export const fgDefault = "#09549f"; +export const fgMuted = "#07437f"; +export const fgSubtle = "#05325f"; +export const bgDefault = "#ffffff"; +export const bgMuted = "#f5f5f5"; +export const bgSubtle = "#e8e8e8"; +export const accentBgDefault = "#09549f"; +export const accentBgOnAccent = "#ffffff"; +export const accentBgAlt = "#008635"; +export const accentBgOnAltAccent = "#09549f"; +export const accentFgDefault = "#77ba02"; +export const accentFgOnAccent = "#121940"; +export const accentFgAlt = "#ffe503"; +export const accentFgOnAltAccent = "#ffffff"; +export const accentHighlight = "#121940"; +export const shadowsDefault = "#2c2c2c"; +export const customNameDefault = "#0000ff"; +export const myGroupTwoDefault = "#553c9a"; diff --git a/src/js/styles/qgds-qld-default-high-contrast.tokens.js b/src/js/styles/qgds-qld-default-high-contrast.tokens.js index 2696e1a..1d00d30 100644 --- a/src/js/styles/qgds-qld-default-high-contrast.tokens.js +++ b/src/js/styles/qgds-qld-default-high-contrast.tokens.js @@ -2,17 +2,25 @@ * Do not edit directly, this file was auto-generated. */ -export const textSecondaryColor = "#6e6e6e"; -export const customQldDefaultTokenNameDefault = "#e6b828"; -export const fgDefault = "#ffffff"; -export const fgMuted = "#6e6e6e"; -export const fgSubtle = "#4a4a4a"; -export const bgDefault = "#2c2c2c"; -export const bgMuted = "#3b3b3b"; -export const bgSubtle = "#434343"; -export const accentDefault = "#ffe500"; -export const accentOnAccent = "#ffffff"; -export const accentBg = "#998900"; -export const shadowsDefault = "rgba(19, 18, 18, 0.3)"; -export const customNameDefault = "#407217"; -export const myGroupTwoDefault = "#e84f61"; +export const qldDefaultReservedColorError = "#e22339"; +export const qldDefaultReservedColorInformation = "#0085b3"; +export const qldDefaultReservedColorSuccess = "#339d37"; +export const qldDefaultReservedColorAlert = "#ffcc2c"; +export const fgDefault = "#09549f"; +export const fgMuted = "#07437f"; +export const fgSubtle = "#05325f"; +export const bgDefault = "#ffffff"; +export const bgMuted = "#f5f5f5"; +export const bgSubtle = "#e8e8e8"; +export const accentBgDefault = "#09549f"; +export const accentBgOnAccent = "#ffffff"; +export const accentBgAlt = "#008635"; +export const accentBgOnAltAccent = "#09549f"; +export const accentFgDefault = "#77ba02"; +export const accentFgOnAccent = "#121940"; +export const accentFgAlt = "#ffe503"; +export const accentFgOnAltAccent = "#ffffff"; +export const accentHighlight = "#121940"; +export const shadowsDefault = "#2c2c2c"; +export const customNameDefault = "#0000ff"; +export const myGroupTwoDefault = "#553c9a"; diff --git a/src/js/styles/qgds-qld-default-light.tokens.js b/src/js/styles/qgds-qld-default-light.tokens.js index 61ae9df..1d00d30 100644 --- a/src/js/styles/qgds-qld-default-light.tokens.js +++ b/src/js/styles/qgds-qld-default-light.tokens.js @@ -2,17 +2,25 @@ * Do not edit directly, this file was auto-generated. */ -export const textSecondaryColor = "#6e6e6e"; -export const customQldDefaultTokenNameDefault = "#e6b828"; -export const fgDefault = "#2c2c2c"; -export const fgMuted = "#3b3b3b"; -export const fgSubtle = "#4a4a4a"; +export const qldDefaultReservedColorError = "#e22339"; +export const qldDefaultReservedColorInformation = "#0085b3"; +export const qldDefaultReservedColorSuccess = "#339d37"; +export const qldDefaultReservedColorAlert = "#ffcc2c"; +export const fgDefault = "#09549f"; +export const fgMuted = "#07437f"; +export const fgSubtle = "#05325f"; export const bgDefault = "#ffffff"; -export const bgMuted = "#5c5c5c"; -export const bgSubtle = "#4a4a4a"; -export const accentDefault = "#0000e6"; -export const accentOnAccent = "#ffffff"; -export const accentBg = "#6666ff"; +export const bgMuted = "#f5f5f5"; +export const bgSubtle = "#e8e8e8"; +export const accentBgDefault = "#09549f"; +export const accentBgOnAccent = "#ffffff"; +export const accentBgAlt = "#008635"; +export const accentBgOnAltAccent = "#09549f"; +export const accentFgDefault = "#77ba02"; +export const accentFgOnAccent = "#121940"; +export const accentFgAlt = "#ffe503"; +export const accentFgOnAltAccent = "#ffffff"; +export const accentHighlight = "#121940"; export const shadowsDefault = "#2c2c2c"; export const customNameDefault = "#0000ff"; export const myGroupTwoDefault = "#553c9a"; diff --git a/src/js/styles/qgds-qld-maroon-light.tokens.js b/src/js/styles/qgds-qld-maroon-light.tokens.js index ac87244..a51465a 100644 --- a/src/js/styles/qgds-qld-maroon-light.tokens.js +++ b/src/js/styles/qgds-qld-maroon-light.tokens.js @@ -2,17 +2,25 @@ * Do not edit directly, this file was auto-generated. */ -export const textSecondaryColor = "#5c5c5c"; -export const customMaroonTokenNameDefault = "#ffdb6b"; -export const fgDefault = "#b80b4d"; -export const fgMuted = "#3b3b3b"; -export const fgSubtle = "#4a4a4a"; +export const qldMaroonReservedColorError = "#e22339"; +export const qldMaroonReservedColorInformation = "#0085b3"; +export const qldMaroonReservedColorSuccess = "#339d37"; +export const qldMaroonReservedColorAlert = "#ffcc2c"; +export const fgDefault = "#09549f"; +export const fgMuted = "#07437f"; +export const fgSubtle = "#05325f"; export const bgDefault = "#ffffff"; -export const bgMuted = "#5c5c5c"; -export const bgSubtle = "#4a4a4a"; -export const accentDefault = "#f2e6d0"; -export const accentOnAccent = "#ffffff"; -export const accentBg = "#f7f0e3"; +export const bgMuted = "#f5f5f5"; +export const bgSubtle = "#e8e8e8"; +export const accentBgDefault = "#09549f"; +export const accentBgOnAccent = "#ffffff"; +export const accentBgAlt = "#008635"; +export const accentBgOnAltAccent = "#09549f"; +export const accentFgDefault = "#77ba02"; +export const accentFgOnAccent = "#121940"; +export const accentFgAlt = "#ffe503"; +export const accentFgOnAltAccent = "#ffffff"; +export const accentHighlight = "#121940"; export const shadowsDefault = "#2c2c2c"; export const customNameDefault = "#0000ff"; -export const myGroupTwoTestNameDefault = "#005e85"; +export const myGroupTwoDefault = "#553c9a"; diff --git a/src/js/styles/qgds.tokens.js b/src/js/styles/qgds.tokens.js index d9186f4..dc21747 100644 --- a/src/js/styles/qgds.tokens.js +++ b/src/js/styles/qgds.tokens.js @@ -2,8 +2,7 @@ * Do not edit directly, this file was auto-generated. */ -export const coreDefaultColorNeutralBlack = "#131212"; -export const textPrimaryColor = "#131212"; +export const qgdsTokensColorNeutralBlack = "#131212"; export const typographyH1BoldFontFamily = "inter"; export const typographyH1BoldFontWeight = 700; export const typographyH1BoldLineHeight = "110%"; diff --git a/src/scss/button/button-campaign-neon-light.tokens.scss b/src/scss/button/button-campaign-neon-light.tokens.scss index d8941de..47e4555 100644 --- a/src/scss/button/button-campaign-neon-light.tokens.scss +++ b/src/scss/button/button-campaign-neon-light.tokens.scss @@ -1,5 +1,7 @@ // Do not edit directly, this file was auto-generated. -$buttonPrimaryBackground: #ff0284; +$buttonPrimaryBackground: #09549f; $buttonPrimaryText: #ffffff; +$buttonSecondaryBorderColor: #77ba02; +$buttonSecondaryText: #121940; diff --git a/src/scss/button/button-qld-default-dark.tokens.scss b/src/scss/button/button-qld-default-dark.tokens.scss index 8bd2061..47e4555 100644 --- a/src/scss/button/button-qld-default-dark.tokens.scss +++ b/src/scss/button/button-qld-default-dark.tokens.scss @@ -1,5 +1,7 @@ // Do not edit directly, this file was auto-generated. -$buttonPrimaryBackground: #6bbe27; +$buttonPrimaryBackground: #09549f; $buttonPrimaryText: #ffffff; +$buttonSecondaryBorderColor: #77ba02; +$buttonSecondaryText: #121940; diff --git a/src/scss/button/button-qld-default-high-contrast.tokens.scss b/src/scss/button/button-qld-default-high-contrast.tokens.scss index 3fb6abb..47e4555 100644 --- a/src/scss/button/button-qld-default-high-contrast.tokens.scss +++ b/src/scss/button/button-qld-default-high-contrast.tokens.scss @@ -1,5 +1,7 @@ // Do not edit directly, this file was auto-generated. -$buttonPrimaryBackground: #ffe500; +$buttonPrimaryBackground: #09549f; $buttonPrimaryText: #ffffff; +$buttonSecondaryBorderColor: #77ba02; +$buttonSecondaryText: #121940; diff --git a/src/scss/button/button-qld-default-light.tokens.scss b/src/scss/button/button-qld-default-light.tokens.scss index 4901aeb..47e4555 100644 --- a/src/scss/button/button-qld-default-light.tokens.scss +++ b/src/scss/button/button-qld-default-light.tokens.scss @@ -1,5 +1,7 @@ // Do not edit directly, this file was auto-generated. -$buttonPrimaryBackground: #0000e6; +$buttonPrimaryBackground: #09549f; $buttonPrimaryText: #ffffff; +$buttonSecondaryBorderColor: #77ba02; +$buttonSecondaryText: #121940; diff --git a/src/scss/button/button-qld-maroon-light.tokens.scss b/src/scss/button/button-qld-maroon-light.tokens.scss index 4744557..47e4555 100644 --- a/src/scss/button/button-qld-maroon-light.tokens.scss +++ b/src/scss/button/button-qld-maroon-light.tokens.scss @@ -1,5 +1,7 @@ // Do not edit directly, this file was auto-generated. -$buttonPrimaryBackground: #f2e6d0; +$buttonPrimaryBackground: #09549f; $buttonPrimaryText: #ffffff; +$buttonSecondaryBorderColor: #77ba02; +$buttonSecondaryText: #121940; diff --git a/src/scss/card/card-qld-default-dark.tokens.scss b/src/scss/card/card-qld-default-dark.tokens.scss index 08ebf86..2dad54e 100644 --- a/src/scss/card/card-qld-default-dark.tokens.scss +++ b/src/scss/card/card-qld-default-dark.tokens.scss @@ -1,4 +1,4 @@ // Do not edit directly, this file was auto-generated. -$cardBackground: #2c2c2c; +$cardBackground: #ffffff; diff --git a/src/scss/card/card-qld-default-high-contrast.tokens.scss b/src/scss/card/card-qld-default-high-contrast.tokens.scss index 08ebf86..2dad54e 100644 --- a/src/scss/card/card-qld-default-high-contrast.tokens.scss +++ b/src/scss/card/card-qld-default-high-contrast.tokens.scss @@ -1,4 +1,4 @@ // Do not edit directly, this file was auto-generated. -$cardBackground: #2c2c2c; +$cardBackground: #ffffff; diff --git a/src/scss/styles/core.tokens.scss b/src/scss/styles/core.tokens.scss index 869ab17..ac614e8 100644 --- a/src/scss/styles/core.tokens.scss +++ b/src/scss/styles/core.tokens.scss @@ -19,6 +19,15 @@ $borderRadiusXl: 16; $borderRadiusMultiValue: 4 8; $colorsBlack: #131212; $colorsWhite: #ffffff; +$colorsSilver100: #f5f5f5; +$colorsSilver200: #e8e8e8; +$colorsSilver300: #eae9e8; +$colorsSilver400: #e8e7e5; +$colorsSilver500: #e5e4e2; +$colorsSilver600: #cecdcb; +$colorsSilver700: #b7b6b5; +$colorsSilver800: #a0a09e; +$colorsSilver900: #898988; $colorsGray100: #929292; $colorsGray200: #808080; $colorsGray300: #6e6e6e; @@ -73,15 +82,24 @@ $colorsYellow600: #e6ce00; $colorsYellow700: #ccb700; $colorsYellow800: #b3a000; $colorsYellow900: #998900; -$colorsLime100: #a6d87d; -$colorsLime200: #97d268; -$colorsLime300: #89cb52; -$colorsLime400: #7ac53d; -$colorsLime500: #6bbe27; -$colorsLime600: #60ab23; -$colorsLime700: #56981f; -$colorsLime800: #4b851b; -$colorsLime900: #407217; +$colorsParisDaisy100: #fff5a0; +$colorsParisDaisy200: #fff490; +$colorsParisDaisy300: #fff280; +$colorsParisDaisy400: #fff170; +$colorsParisDaisy500: #ffef60; +$colorsParisDaisy600: #e6d756; +$colorsParisDaisy700: #ccbf4d; +$colorsParisDaisy800: #b3a743; +$colorsParisDaisy900: #998f3a; +$colorsTurbo100: #ffef68; +$colorsTurbo200: #ffed4f; +$colorsTurbo300: #ffea35; +$colorsTurbo400: #ffe81c; +$colorsTurbo500: #ffe503; +$colorsTurbo600: #e6ce03; +$colorsTurbo700: #ccb702; +$colorsTurbo800: #b3a002; +$colorsTurbo900: #998902; $colorsGreen100: #85c487; $colorsGreen200: #70ba73; $colorsGreen300: #5cb15f; @@ -91,6 +109,33 @@ $colorsGreen600: #2e8d32; $colorsGreen700: #297e2c; $colorsGreen800: #246e27; $colorsGreen900: #1f5e21; +$colorsFunGreen100: #66b686; +$colorsFunGreen200: #4daa72; +$colorsFunGreen300: #339e5d; +$colorsFunGreen400: #1a9249; +$colorsFunGreen500: #008635; +$colorsFunGreen600: #007930; +$colorsFunGreen700: #006b2a; +$colorsFunGreen800: #005e25; +$colorsFunGreen900: #005020; +$colorsLime100: #a6d87d; +$colorsLime200: #97d268; +$colorsLime300: #89cb52; +$colorsLime400: #7ac53d; +$colorsLime500: #6bbe27; +$colorsLime600: #60ab23; +$colorsLime700: #56981f; +$colorsLime800: #4b851b; +$colorsLime900: #407217; +$colorsLimeade100: #add667; +$colorsLimeade200: #a0cf4e; +$colorsLimeade300: #92c835; +$colorsLimeade400: #85c11b; +$colorsLimeade500: #77ba02; +$colorsLimeade600: #6ba702; +$colorsLimeade700: #5f9502; +$colorsLimeade800: #538201; +$colorsLimeade900: #477001; $colorsBlue100: #6666ff; $colorsBlue200: #4d4dff; $colorsBlue300: #3333ff; @@ -100,6 +145,15 @@ $colorsBlue600: #0000e6; $colorsBlue700: #0000cc; $colorsBlue800: #0000b3; $colorsBlue900: #000099; +$colorsVeniceBlue100: #6b98c5; +$colorsVeniceBlue200: #5387bc; +$colorsVeniceBlue300: #3a76b2; +$colorsVeniceBlue400: #2265a9; +$colorsVeniceBlue500: #09549f; +$colorsVeniceBlue600: #084c8f; +$colorsVeniceBlue700: #07437f; +$colorsVeniceBlue800: #063b6f; +$colorsVeniceBlue900: #05325f; $colorsBondiBlue100: #66b6d1; $colorsBondiBlue200: #4daaca; $colorsBondiBlue300: #339dc2; @@ -118,6 +172,15 @@ $colorsOrient600: #005578; $colorsOrient700: #004b6a; $colorsOrient800: #00425d; $colorsOrient900: #003850; +$colorsBunting100: #d0d1d9; +$colorsBunting200: #b8bac6; +$colorsBunting300: #a0a3b3; +$colorsBunting400: #898ca0; +$colorsBunting500: #71758c; +$colorsBunting600: #595e79; +$colorsBunting700: #414766; +$colorsBunting800: #2a3053; +$colorsBunting900: #121940; $colorsTeal100: #e6fffa; $colorsTeal200: #b2f5ea; $colorsTeal300: #81e6d9; diff --git a/src/scss/styles/qgds-campaign-neon-light.tokens.scss b/src/scss/styles/qgds-campaign-neon-light.tokens.scss index 89e4186..a3a7607 100644 --- a/src/scss/styles/qgds-campaign-neon-light.tokens.scss +++ b/src/scss/styles/qgds-campaign-neon-light.tokens.scss @@ -1,17 +1,25 @@ // Do not edit directly, this file was auto-generated. -$textSecondaryColor: #434343; -$customNeonTokenNameDefault: #ffd141; -$fgDefault: #2c2c2c; -$fgMuted: #3b3b3b; -$fgSubtle: #4a4a4a; +$campaingNeonReservedColorError: #e22339; +$campaingNeonReservedColorInformation: #0085b3; +$campaingNeonReservedColorSuccess: #339d37; +$campaingNeonReservedColorAlert: #ffcc2c; +$fgDefault: #09549f; +$fgMuted: #07437f; +$fgSubtle: #05325f; $bgDefault: #ffffff; -$bgMuted: #5c5c5c; -$bgSubtle: #4a4a4a; -$accentDefault: #ff0284; -$accentOnAccent: #ffffff; -$accentBg: #434343; +$bgMuted: #f5f5f5; +$bgSubtle: #e8e8e8; +$accentBgDefault: #09549f; +$accentBgOnAccent: #ffffff; +$accentBgAlt: #008635; +$accentBgOnAltAccent: #09549f; +$accentFgDefault: #77ba02; +$accentFgOnAccent: #121940; +$accentFgAlt: #ffe503; +$accentFgOnAltAccent: #ffffff; +$accentHighlight: #121940; $shadowsDefault: #2c2c2c; $customNameDefault: #0000ff; $myGroupTwoDefault: #553c9a; diff --git a/src/scss/styles/qgds-qld-default-dark.tokens.scss b/src/scss/styles/qgds-qld-default-dark.tokens.scss index 1b981f7..3927749 100644 --- a/src/scss/styles/qgds-qld-default-dark.tokens.scss +++ b/src/scss/styles/qgds-qld-default-dark.tokens.scss @@ -1,17 +1,25 @@ // Do not edit directly, this file was auto-generated. -$textSecondaryColor: #6e6e6e; -$customQldDefaultTokenNameDefault: #e6b828; -$fgDefault: #ffffff; -$fgMuted: #6e6e6e; -$fgSubtle: #4a4a4a; -$bgDefault: #2c2c2c; -$bgMuted: #3b3b3b; -$bgSubtle: #434343; -$accentDefault: #6bbe27; -$accentOnAccent: #ffffff; -$accentBg: #407217; -$shadowsDefault: rgba(19, 18, 18, 0.3); -$customNameDefault: #998900; -$myGroupTwoDefault: #e84f61; +$qldDefaultReservedColorError: #e22339; +$qldDefaultReservedColorInformation: #0085b3; +$qldDefaultReservedColorSuccess: #339d37; +$qldDefaultReservedColorAlert: #ffcc2c; +$fgDefault: #09549f; +$fgMuted: #07437f; +$fgSubtle: #05325f; +$bgDefault: #ffffff; +$bgMuted: #f5f5f5; +$bgSubtle: #e8e8e8; +$accentBgDefault: #09549f; +$accentBgOnAccent: #ffffff; +$accentBgAlt: #008635; +$accentBgOnAltAccent: #09549f; +$accentFgDefault: #77ba02; +$accentFgOnAccent: #121940; +$accentFgAlt: #ffe503; +$accentFgOnAltAccent: #ffffff; +$accentHighlight: #121940; +$shadowsDefault: #2c2c2c; +$customNameDefault: #0000ff; +$myGroupTwoDefault: #553c9a; diff --git a/src/scss/styles/qgds-qld-default-high-contrast.tokens.scss b/src/scss/styles/qgds-qld-default-high-contrast.tokens.scss index 21ff5a0..3927749 100644 --- a/src/scss/styles/qgds-qld-default-high-contrast.tokens.scss +++ b/src/scss/styles/qgds-qld-default-high-contrast.tokens.scss @@ -1,17 +1,25 @@ // Do not edit directly, this file was auto-generated. -$textSecondaryColor: #6e6e6e; -$customQldDefaultTokenNameDefault: #e6b828; -$fgDefault: #ffffff; -$fgMuted: #6e6e6e; -$fgSubtle: #4a4a4a; -$bgDefault: #2c2c2c; -$bgMuted: #3b3b3b; -$bgSubtle: #434343; -$accentDefault: #ffe500; -$accentOnAccent: #ffffff; -$accentBg: #998900; -$shadowsDefault: rgba(19, 18, 18, 0.3); -$customNameDefault: #407217; -$myGroupTwoDefault: #e84f61; +$qldDefaultReservedColorError: #e22339; +$qldDefaultReservedColorInformation: #0085b3; +$qldDefaultReservedColorSuccess: #339d37; +$qldDefaultReservedColorAlert: #ffcc2c; +$fgDefault: #09549f; +$fgMuted: #07437f; +$fgSubtle: #05325f; +$bgDefault: #ffffff; +$bgMuted: #f5f5f5; +$bgSubtle: #e8e8e8; +$accentBgDefault: #09549f; +$accentBgOnAccent: #ffffff; +$accentBgAlt: #008635; +$accentBgOnAltAccent: #09549f; +$accentFgDefault: #77ba02; +$accentFgOnAccent: #121940; +$accentFgAlt: #ffe503; +$accentFgOnAltAccent: #ffffff; +$accentHighlight: #121940; +$shadowsDefault: #2c2c2c; +$customNameDefault: #0000ff; +$myGroupTwoDefault: #553c9a; diff --git a/src/scss/styles/qgds-qld-default-light.tokens.scss b/src/scss/styles/qgds-qld-default-light.tokens.scss index e9e5da4..3927749 100644 --- a/src/scss/styles/qgds-qld-default-light.tokens.scss +++ b/src/scss/styles/qgds-qld-default-light.tokens.scss @@ -1,17 +1,25 @@ // Do not edit directly, this file was auto-generated. -$textSecondaryColor: #6e6e6e; -$customQldDefaultTokenNameDefault: #e6b828; -$fgDefault: #2c2c2c; -$fgMuted: #3b3b3b; -$fgSubtle: #4a4a4a; +$qldDefaultReservedColorError: #e22339; +$qldDefaultReservedColorInformation: #0085b3; +$qldDefaultReservedColorSuccess: #339d37; +$qldDefaultReservedColorAlert: #ffcc2c; +$fgDefault: #09549f; +$fgMuted: #07437f; +$fgSubtle: #05325f; $bgDefault: #ffffff; -$bgMuted: #5c5c5c; -$bgSubtle: #4a4a4a; -$accentDefault: #0000e6; -$accentOnAccent: #ffffff; -$accentBg: #6666ff; +$bgMuted: #f5f5f5; +$bgSubtle: #e8e8e8; +$accentBgDefault: #09549f; +$accentBgOnAccent: #ffffff; +$accentBgAlt: #008635; +$accentBgOnAltAccent: #09549f; +$accentFgDefault: #77ba02; +$accentFgOnAccent: #121940; +$accentFgAlt: #ffe503; +$accentFgOnAltAccent: #ffffff; +$accentHighlight: #121940; $shadowsDefault: #2c2c2c; $customNameDefault: #0000ff; $myGroupTwoDefault: #553c9a; diff --git a/src/scss/styles/qgds-qld-maroon-light.tokens.scss b/src/scss/styles/qgds-qld-maroon-light.tokens.scss index 71e9297..c8967bb 100644 --- a/src/scss/styles/qgds-qld-maroon-light.tokens.scss +++ b/src/scss/styles/qgds-qld-maroon-light.tokens.scss @@ -1,17 +1,25 @@ // Do not edit directly, this file was auto-generated. -$textSecondaryColor: #5c5c5c; -$customMaroonTokenNameDefault: #ffdb6b; -$fgDefault: #b80b4d; -$fgMuted: #3b3b3b; -$fgSubtle: #4a4a4a; +$qldMaroonReservedColorError: #e22339; +$qldMaroonReservedColorInformation: #0085b3; +$qldMaroonReservedColorSuccess: #339d37; +$qldMaroonReservedColorAlert: #ffcc2c; +$fgDefault: #09549f; +$fgMuted: #07437f; +$fgSubtle: #05325f; $bgDefault: #ffffff; -$bgMuted: #5c5c5c; -$bgSubtle: #4a4a4a; -$accentDefault: #f2e6d0; -$accentOnAccent: #ffffff; -$accentBg: #f7f0e3; +$bgMuted: #f5f5f5; +$bgSubtle: #e8e8e8; +$accentBgDefault: #09549f; +$accentBgOnAccent: #ffffff; +$accentBgAlt: #008635; +$accentBgOnAltAccent: #09549f; +$accentFgDefault: #77ba02; +$accentFgOnAccent: #121940; +$accentFgAlt: #ffe503; +$accentFgOnAltAccent: #ffffff; +$accentHighlight: #121940; $shadowsDefault: #2c2c2c; $customNameDefault: #0000ff; -$myGroupTwoTestNameDefault: #005e85; +$myGroupTwoDefault: #553c9a; diff --git a/src/scss/styles/qgds.tokens.scss b/src/scss/styles/qgds.tokens.scss index bb7ac1c..b67964a 100644 --- a/src/scss/styles/qgds.tokens.scss +++ b/src/scss/styles/qgds.tokens.scss @@ -1,8 +1,7 @@ // Do not edit directly, this file was auto-generated. -$coreDefaultColorNeutralBlack: #131212; -$textPrimaryColor: #131212; +$qgdsTokensColorNeutralBlack: #131212; $typographyH1BoldFontFamily: inter; $typographyH1BoldFontWeight: 700; $typographyH1BoldLineHeight: 110%; diff --git a/tokens/button.tokens.json b/tokens/button.tokens.json index d3ced6d..89aff21 100644 --- a/tokens/button.tokens.json +++ b/tokens/button.tokens.json @@ -2,11 +2,21 @@ "button": { "primary": { "background": { - "value": "{accent.default}", + "value": "{accent.bg.default}", "type": "color" }, "text": { - "value": "{accent.onAccent}", + "value": "{accent.bg.onAccent}", + "type": "color" + } + }, + "secondary": { + "borderColor": { + "value": "{accent.fg.default}", + "type": "color" + }, + "text": { + "value": "{accent.fg.onAccent}", "type": "color" } }, diff --git a/tokens/campaign-neon-light.tokens.json b/tokens/campaign-neon-light.tokens.json index d3e7e12..25296f1 100644 --- a/tokens/campaign-neon-light.tokens.json +++ b/tokens/campaign-neon-light.tokens.json @@ -1,15 +1,15 @@ { "fg": { "default": { - "value": "{colors.gray.900}", + "value": "{colors.veniceBlue.500}", "type": "color" }, "muted": { - "value": "{colors.gray.700}", + "value": "{colors.veniceBlue.700}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.veniceBlue.900}", "type": "color" } }, @@ -19,25 +19,53 @@ "type": "color" }, "muted": { - "value": "{colors.gray.400}", + "value": "{colors.silver.100}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.silver.200}", "type": "color" } }, "accent": { - "default": { - "value": "{colors.pink.500}", - "type": "color" + "bg": { + "default": { + "value": "{colors.veniceBlue.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.white}", + "type": "color" + }, + "alt": { + "value": "{colors.funGreen.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.veniceBlue.500}", + "type": "color" + } }, - "onAccent": { - "value": "{colors.white}", - "type": "color" + "fg": { + "default": { + "value": "{colors.limeade.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.bunting.900}", + "type": "color" + }, + "alt": { + "value": "{colors.turbo.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.white}", + "type": "color" + } }, - "bg": { - "value": "{colors.gray.600}", + "highlight": { + "value": "{colors.bunting.900}", "type": "color" } }, diff --git a/tokens/campaign-neon.tokens.json b/tokens/campaign-neon.tokens.json index 7974017..8dd60c1 100644 --- a/tokens/campaign-neon.tokens.json +++ b/tokens/campaign-neon.tokens.json @@ -1,16 +1,24 @@ { - "text": { - "secondary": { + "campaingNeon": { + "reserved": { "color": { - "value": "{colors.gray.600}", - "type": "color" + "error": { + "value": "{colors.red.500}", + "type": "color" + }, + "information": { + "value": "{colors.bondiBlue.500}", + "type": "color" + }, + "success": { + "value": "{colors.green.500}", + "type": "color" + }, + "alert": { + "value": "{colors.orange.500}", + "type": "color" + } } } - }, - "customNeonTokenName": { - "default": { - "value": "{colors.orange.400}", - "type": "color" - } } } diff --git a/tokens/core.tokens.json b/tokens/core.tokens.json index c6e62e6..7bb9cf4 100644 --- a/tokens/core.tokens.json +++ b/tokens/core.tokens.json @@ -78,6 +78,44 @@ "value": "#ffffff", "type": "color" }, + "silver": { + "100": { + "value": "#f5f5f5", + "type": "color" + }, + "200": { + "value": "#e8e8e8", + "type": "color" + }, + "300": { + "value": "#eae9e8", + "type": "color" + }, + "400": { + "value": "#e8e7e5", + "type": "color" + }, + "500": { + "value": "#e5e4e2", + "type": "color" + }, + "600": { + "value": "#cecdcb", + "type": "color" + }, + "700": { + "value": "#b7b6b5", + "type": "color" + }, + "800": { + "value": "#a0a09e", + "type": "color" + }, + "900": { + "value": "#898988", + "type": "color" + } + }, "gray": { "100": { "value": "#929292", @@ -306,41 +344,79 @@ "type": "color" } }, - "lime": { + "parisDaisy": { "100": { - "value": "#a6d87d", + "value": "#fff5a0", "type": "color" }, "200": { - "value": "#97d268", + "value": "#fff490", "type": "color" }, "300": { - "value": "#89cb52", + "value": "#fff280", "type": "color" }, "400": { - "value": "#7ac53d", + "value": "#fff170", "type": "color" }, "500": { - "value": "#6bbe27", + "value": "#ffef60", "type": "color" }, "600": { - "value": "#60ab23", + "value": "#e6d756", "type": "color" }, "700": { - "value": "#56981f", + "value": "#ccbf4d", "type": "color" }, "800": { - "value": "#4b851b", + "value": "#b3a743", "type": "color" }, "900": { - "value": "#407217", + "value": "#998f3a", + "type": "color" + } + }, + "turbo": { + "100": { + "value": "#ffef68", + "type": "color" + }, + "200": { + "value": "#ffed4f", + "type": "color" + }, + "300": { + "value": "#ffea35", + "type": "color" + }, + "400": { + "value": "#ffe81c", + "type": "color" + }, + "500": { + "value": "#ffe503", + "type": "color" + }, + "600": { + "value": "#e6ce03", + "type": "color" + }, + "700": { + "value": "#ccb702", + "type": "color" + }, + "800": { + "value": "#b3a002", + "type": "color" + }, + "900": { + "value": "#998902", "type": "color" } }, @@ -382,6 +458,120 @@ "type": "color" } }, + "funGreen": { + "100": { + "value": "#66b686", + "type": "color" + }, + "200": { + "value": "#4daa72", + "type": "color" + }, + "300": { + "value": "#339e5d", + "type": "color" + }, + "400": { + "value": "#1a9249", + "type": "color" + }, + "500": { + "value": "#008635", + "type": "color" + }, + "600": { + "value": "#007930", + "type": "color" + }, + "700": { + "value": "#006b2a", + "type": "color" + }, + "800": { + "value": "#005e25", + "type": "color" + }, + "900": { + "value": "#005020", + "type": "color" + } + }, + "lime": { + "100": { + "value": "#a6d87d", + "type": "color" + }, + "200": { + "value": "#97d268", + "type": "color" + }, + "300": { + "value": "#89cb52", + "type": "color" + }, + "400": { + "value": "#7ac53d", + "type": "color" + }, + "500": { + "value": "#6bbe27", + "type": "color" + }, + "600": { + "value": "#60ab23", + "type": "color" + }, + "700": { + "value": "#56981f", + "type": "color" + }, + "800": { + "value": "#4b851b", + "type": "color" + }, + "900": { + "value": "#407217", + "type": "color" + } + }, + "limeade": { + "100": { + "value": "#add667", + "type": "color" + }, + "200": { + "value": "#a0cf4e", + "type": "color" + }, + "300": { + "value": "#92c835", + "type": "color" + }, + "400": { + "value": "#85c11b", + "type": "color" + }, + "500": { + "value": "#77ba02", + "type": "color" + }, + "600": { + "value": "#6ba702", + "type": "color" + }, + "700": { + "value": "#5f9502", + "type": "color" + }, + "800": { + "value": "#538201", + "type": "color" + }, + "900": { + "value": "#477001", + "type": "color" + } + }, "blue": { "100": { "value": "#6666ff", @@ -420,6 +610,44 @@ "type": "color" } }, + "veniceBlue": { + "100": { + "value": "#6b98c5", + "type": "color" + }, + "200": { + "value": "#5387bc", + "type": "color" + }, + "300": { + "value": "#3a76b2", + "type": "color" + }, + "400": { + "value": "#2265a9", + "type": "color" + }, + "500": { + "value": "#09549f", + "type": "color" + }, + "600": { + "value": "#084c8f", + "type": "color" + }, + "700": { + "value": "#07437f", + "type": "color" + }, + "800": { + "value": "#063b6f", + "type": "color" + }, + "900": { + "value": "#05325f", + "type": "color" + } + }, "bondiBlue": { "100": { "value": "#66b6d1", @@ -496,6 +724,44 @@ "type": "color" } }, + "bunting": { + "100": { + "value": "#d0d1d9", + "type": "color" + }, + "200": { + "value": "#b8bac6", + "type": "color" + }, + "300": { + "value": "#a0a3b3", + "type": "color" + }, + "400": { + "value": "#898ca0", + "type": "color" + }, + "500": { + "value": "#71758c", + "type": "color" + }, + "600": { + "value": "#595e79", + "type": "color" + }, + "700": { + "value": "#414766", + "type": "color" + }, + "800": { + "value": "#2a3053", + "type": "color" + }, + "900": { + "value": "#121940", + "type": "color" + } + }, "teal": { "100": { "value": "#e6fffa", diff --git a/tokens/qgds.tokens.json b/tokens/qgds.tokens.json index e5f449a..31cc302 100644 --- a/tokens/qgds.tokens.json +++ b/tokens/qgds.tokens.json @@ -1,5 +1,5 @@ { - "Core/Default": { + "qgdsTokens": { "color": { "neutral": { "black": { @@ -8,13 +8,5 @@ } } } - }, - "text": { - "primary": { - "color": { - "value": "{colors.black}", - "type": "color" - } - } } } diff --git a/tokens/qld-default-dark.tokens.json b/tokens/qld-default-dark.tokens.json index b993363..25296f1 100644 --- a/tokens/qld-default-dark.tokens.json +++ b/tokens/qld-default-dark.tokens.json @@ -1,61 +1,89 @@ { "fg": { "default": { - "value": "{colors.white}", + "value": "{colors.veniceBlue.500}", "type": "color" }, "muted": { - "value": "{colors.gray.300}", + "value": "{colors.veniceBlue.700}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.veniceBlue.900}", "type": "color" } }, "bg": { "default": { - "value": "{colors.gray.900}", + "value": "{colors.white}", "type": "color" }, "muted": { - "value": "{colors.gray.700}", + "value": "{colors.silver.100}", "type": "color" }, "subtle": { - "value": "{colors.gray.600}", + "value": "{colors.silver.200}", "type": "color" } }, "accent": { - "default": { - "value": "{colors.lime.500}", - "type": "color" + "bg": { + "default": { + "value": "{colors.veniceBlue.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.white}", + "type": "color" + }, + "alt": { + "value": "{colors.funGreen.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.veniceBlue.500}", + "type": "color" + } }, - "onAccent": { - "value": "{colors.white}", - "type": "color" + "fg": { + "default": { + "value": "{colors.limeade.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.bunting.900}", + "type": "color" + }, + "alt": { + "value": "{colors.turbo.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.white}", + "type": "color" + } }, - "bg": { - "value": "{colors.lime.900}", + "highlight": { + "value": "{colors.bunting.900}", "type": "color" } }, "shadows": { "default": { - "value": "rgba({colors.black}, 0.3)", + "value": "{colors.gray.900}", "type": "color" } }, "customName": { "default": { - "value": "{colors.yellow.900}", + "value": "{colors.blue.500}", "type": "color" } }, "myGroupTwo": { "default": { - "value": "{colors.red.300}", + "value": "{colors.purple.800}", "type": "color" } } diff --git a/tokens/qld-default-high-contrast.tokens.json b/tokens/qld-default-high-contrast.tokens.json index e11fcaa..25296f1 100644 --- a/tokens/qld-default-high-contrast.tokens.json +++ b/tokens/qld-default-high-contrast.tokens.json @@ -1,61 +1,89 @@ { "fg": { "default": { - "value": "{colors.white}", + "value": "{colors.veniceBlue.500}", "type": "color" }, "muted": { - "value": "{colors.gray.300}", + "value": "{colors.veniceBlue.700}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.veniceBlue.900}", "type": "color" } }, "bg": { "default": { - "value": "{colors.gray.900}", + "value": "{colors.white}", "type": "color" }, "muted": { - "value": "{colors.gray.700}", + "value": "{colors.silver.100}", "type": "color" }, "subtle": { - "value": "{colors.gray.600}", + "value": "{colors.silver.200}", "type": "color" } }, "accent": { - "default": { - "value": "{colors.yellow.500}", - "type": "color" + "bg": { + "default": { + "value": "{colors.veniceBlue.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.white}", + "type": "color" + }, + "alt": { + "value": "{colors.funGreen.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.veniceBlue.500}", + "type": "color" + } }, - "onAccent": { - "value": "{colors.white}", - "type": "color" + "fg": { + "default": { + "value": "{colors.limeade.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.bunting.900}", + "type": "color" + }, + "alt": { + "value": "{colors.turbo.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.white}", + "type": "color" + } }, - "bg": { - "value": "{colors.yellow.900}", + "highlight": { + "value": "{colors.bunting.900}", "type": "color" } }, "shadows": { "default": { - "value": "rgba({colors.black}, 0.3)", + "value": "{colors.gray.900}", "type": "color" } }, "customName": { "default": { - "value": "{colors.lime.900}", + "value": "{colors.blue.500}", "type": "color" } }, "myGroupTwo": { "default": { - "value": "{colors.red.300}", + "value": "{colors.purple.800}", "type": "color" } } diff --git a/tokens/qld-default-light.tokens.json b/tokens/qld-default-light.tokens.json index f1d4445..25296f1 100644 --- a/tokens/qld-default-light.tokens.json +++ b/tokens/qld-default-light.tokens.json @@ -1,15 +1,15 @@ { "fg": { "default": { - "value": "{colors.gray.900}", + "value": "{colors.veniceBlue.500}", "type": "color" }, "muted": { - "value": "{colors.gray.700}", + "value": "{colors.veniceBlue.700}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.veniceBlue.900}", "type": "color" } }, @@ -19,25 +19,53 @@ "type": "color" }, "muted": { - "value": "{colors.gray.400}", + "value": "{colors.silver.100}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.silver.200}", "type": "color" } }, "accent": { - "default": { - "value": "{colors.blue.600}", - "type": "color" + "bg": { + "default": { + "value": "{colors.veniceBlue.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.white}", + "type": "color" + }, + "alt": { + "value": "{colors.funGreen.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.veniceBlue.500}", + "type": "color" + } }, - "onAccent": { - "value": "{colors.white}", - "type": "color" + "fg": { + "default": { + "value": "{colors.limeade.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.bunting.900}", + "type": "color" + }, + "alt": { + "value": "{colors.turbo.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.white}", + "type": "color" + } }, - "bg": { - "value": "{colors.blue.100}", + "highlight": { + "value": "{colors.bunting.900}", "type": "color" } }, diff --git a/tokens/qld-default.tokens.json b/tokens/qld-default.tokens.json index cbfb65a..7a1f84b 100644 --- a/tokens/qld-default.tokens.json +++ b/tokens/qld-default.tokens.json @@ -1,16 +1,24 @@ { - "text": { - "secondary": { + "qldDefault": { + "reserved": { "color": { - "value": "{colors.gray.300}", - "type": "color" + "error": { + "value": "{colors.red.500}", + "type": "color" + }, + "information": { + "value": "{colors.bondiBlue.500}", + "type": "color" + }, + "success": { + "value": "{colors.green.500}", + "type": "color" + }, + "alert": { + "value": "{colors.orange.500}", + "type": "color" + } } } - }, - "customQldDefaultTokenName": { - "default": { - "value": "{colors.orange.600}", - "type": "color" - } } } diff --git a/tokens/qld-maroon-light.tokens.json b/tokens/qld-maroon-light.tokens.json index 1a4146a..25296f1 100644 --- a/tokens/qld-maroon-light.tokens.json +++ b/tokens/qld-maroon-light.tokens.json @@ -1,15 +1,15 @@ { "fg": { "default": { - "value": "{colors.maroon.500}", + "value": "{colors.veniceBlue.500}", "type": "color" }, "muted": { - "value": "{colors.gray.700}", + "value": "{colors.veniceBlue.700}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.veniceBlue.900}", "type": "color" } }, @@ -19,25 +19,53 @@ "type": "color" }, "muted": { - "value": "{colors.gray.400}", + "value": "{colors.silver.100}", "type": "color" }, "subtle": { - "value": "{colors.gray.500}", + "value": "{colors.silver.200}", "type": "color" } }, "accent": { - "default": { - "value": "{colors.janna.500}", - "type": "color" + "bg": { + "default": { + "value": "{colors.veniceBlue.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.white}", + "type": "color" + }, + "alt": { + "value": "{colors.funGreen.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.veniceBlue.500}", + "type": "color" + } }, - "onAccent": { - "value": "{colors.white}", - "type": "color" + "fg": { + "default": { + "value": "{colors.limeade.500}", + "type": "color" + }, + "onAccent": { + "value": "{colors.bunting.900}", + "type": "color" + }, + "alt": { + "value": "{colors.turbo.500}", + "type": "color" + }, + "onAltAccent": { + "value": "{colors.white}", + "type": "color" + } }, - "bg": { - "value": "{colors.janna.100}", + "highlight": { + "value": "{colors.bunting.900}", "type": "color" } }, @@ -53,9 +81,9 @@ "type": "color" } }, - "myGroupTwoTestName": { + "myGroupTwo": { "default": { - "value": "{colors.orient.500}", + "value": "{colors.purple.800}", "type": "color" } } diff --git a/tokens/qld-maroon.tokens.json b/tokens/qld-maroon.tokens.json index 3e09d2d..e8009af 100644 --- a/tokens/qld-maroon.tokens.json +++ b/tokens/qld-maroon.tokens.json @@ -1,16 +1,24 @@ { - "text": { - "secondary": { + "qldMaroon": { + "reserved": { "color": { - "value": "{colors.gray.400}", - "type": "color" + "error": { + "value": "{colors.red.500}", + "type": "color" + }, + "information": { + "value": "{colors.bondiBlue.500}", + "type": "color" + }, + "success": { + "value": "{colors.green.500}", + "type": "color" + }, + "alert": { + "value": "{colors.orange.500}", + "type": "color" + } } } - }, - "customMaroonTokenName": { - "default": { - "value": "{colors.orange.200}", - "type": "color" - } } }