@kickstartds/ds-agency-premium 1.6.72--canary.43.2474.0 → 1.6.72--canary.43.2480.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-6a826e52.d.ts} +1 -1
  2. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-6a826e52.d.ts} +2 -2
  3. package/dist/SectionProps-6a826e52.d.ts +4 -4
  4. package/dist/{SplitEvenProps-789f8508.d.ts → SplitEvenProps-d62a0a9a.d.ts} +2 -2
  5. package/dist/{SplitWeightedProps-789f8508.d.ts → SplitWeightedProps-d62a0a9a.d.ts} +2 -2
  6. package/dist/components/blog-aside/index.d.ts +1 -1
  7. package/dist/components/blog-head/index.d.ts +1 -1
  8. package/dist/components/blog-overview/index.d.ts +1 -1
  9. package/dist/components/blog-post/index.d.ts +1 -1
  10. package/dist/components/blog-teaser/index.d.ts +1 -1
  11. package/dist/components/event-list-teaser/event-list-teaser.css +1 -1
  12. package/dist/components/image-story/index.d.ts +1 -1
  13. package/dist/components/index/index.d.ts +3 -3
  14. package/dist/components/page/index.d.ts +1 -1
  15. package/dist/components/search-result/search-result.css +4 -0
  16. package/dist/components/split-even/index.d.ts +1 -1
  17. package/dist/components/split-weighted/index.d.ts +1 -1
  18. package/dist/global.css +794 -455
  19. package/dist/tokens/themes.css +4 -4
  20. package/dist/tokens/tokens.css +1 -1
  21. package/dist/tokens/tokens.js +1 -1
  22. package/package.json +1 -1
  23. /package/dist/{BlogAsideProps-c760fd2a.d.ts → BlogAsideProps-fb0241df.d.ts} +0 -0
  24. /package/dist/{BlogHeadProps-c04a5ed8.d.ts → BlogHeadProps-f5855e93.d.ts} +0 -0
  25. /package/dist/{BlogTeaserProps-f5855e93.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +0 -0
  26. /package/dist/{ImageStoryProps-e853e1e7.d.ts → ImageStoryProps-4e2b2ecf.d.ts} +0 -0
  27. /package/dist/{PageProps-aa29c554.d.ts → PageProps-6a826e52.d.ts} +0 -0
package/dist/global.css CHANGED
@@ -292,8 +292,8 @@ h3 {
292
292
  }
293
293
  }
294
294
  :root, [ks-inverted], [ks-theme] {
295
- --dsa-text-color-on-primary-base: var(--color-on-primary);
296
- --dsa-text-color-on-primary-inverted-base: var(--color-on-primary-inverted);
295
+ --dsa-text-color-on-primary-base: var(--ks-brand-color-on-primary);
296
+ --dsa-text-color-on-primary-inverted-base: var(--ks-brand-color-on-primary-inverted);
297
297
  --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
298
298
  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-4);
299
299
  --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
@@ -679,51 +679,52 @@ h3 {
679
679
  }
680
680
 
681
681
  :root {
682
- --color-primary: #3065c0;
683
- --color-primary-inverted: #4e83e0;
684
- --color-on-primary: var(--color-fg-inverted);
685
- --color-on-primary-inverted: var(--color-fg);
686
- --color-bg: #fff;
687
- --color-bg-inverted: #0f203e;
688
- --color-fg: #06081f;
689
- --color-fg-inverted: #fff;
690
- --color-link: #3065c0;
691
- --color-link-inverted: #98b2e0;
692
- --color-positive: #23831b;
693
- --color-positive-inverted: #6edb64;
694
- --color-negative: #ff1a57;
695
- --color-negative-inverted: #d21d48;
696
- --color-informative: #64c2db;
697
- --color-informative-inverted: #00718f;
698
- --color-notice: #64c2db;
699
- --color-notice-inverted: #00718f;
700
- --color-scale-9: 5%;
701
- --color-scale-8: 15%;
702
- --color-scale-7: 27%;
703
- --color-scale-6: 39%;
704
- --color-scale-5: 50%;
705
- --color-scale-4: 61%;
706
- --color-scale-3: 73%;
707
- --color-scale-2: 85%;
708
- --color-scale-1: 95%;
682
+ --ks-brand-color-primary: #3065c0;
683
+ --ks-brand-color-primary-inverted: #4e83e0;
684
+ --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
685
+ --ks-brand-color-on-primary-inverted: var(--ks-color-fg);
686
+ --ks-brand-color-bg: #fff;
687
+ --ks-brand-color-bg-inverted: #0f203e;
688
+ --ks-brand-color-fg: #06081f;
689
+ --ks-brand-color-fg-inverted: #fff;
690
+ --ks-brand-color-link: #3065c0;
691
+ --ks-brand-color-link-inverted: #98b2e0;
692
+ --ks-brand-color-positive: #23831b;
693
+ --ks-brand-color-positive-inverted: #6edb64;
694
+ --ks-brand-color-negative: #ff1a57;
695
+ --ks-brand-color-negative-inverted: #d21d48;
696
+ --ks-brand-color-informative: #64c2db;
697
+ --ks-brand-color-informative-inverted: #00718f;
698
+ --ks-brand-color-notice: #64c2db;
699
+ --ks-brand-color-notice-inverted: #00718f;
700
+ --ks-brand-color-scale-9: 5%;
701
+ --ks-brand-color-scale-8: 15%;
702
+ --ks-brand-color-scale-7: 27%;
703
+ --ks-brand-color-scale-6: 39%;
704
+ --ks-brand-color-scale-5: 50%;
705
+ --ks-brand-color-scale-4: 61%;
706
+ --ks-brand-color-scale-3: 73%;
707
+ --ks-brand-color-scale-2: 85%;
708
+ --ks-brand-color-scale-1: 95%;
709
709
  }
710
710
 
711
711
  :root {
712
- --ks-font-family-display: Montserrat, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
713
- --ks-font-family-copy:
712
+ --ks-brand-font-family-display:
713
+ Montserrat, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
714
+ --ks-brand-font-family-copy:
714
715
  system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande",
715
716
  "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
716
717
  "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
717
- --ks-font-family-interface:
718
+ --ks-brand-font-family-interface:
718
719
  system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande",
719
720
  "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
720
721
  "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
721
- --ks-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
722
- --ks-font-weight-light: 300;
723
- --ks-font-weight-regular: 400;
724
- --ks-font-weight-medium: 500;
725
- --ks-font-weight-semi-bold: 600;
726
- --ks-font-weight-bold: 700;
722
+ --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
723
+ --ks-brand-font-weight-light: 300;
724
+ --ks-brand-font-weight-regular: 400;
725
+ --ks-brand-font-weight-medium: 500;
726
+ --ks-brand-font-weight-semi-bold: 600;
727
+ --ks-brand-font-weight-bold: 700;
727
728
  }
728
729
 
729
730
  /*
@@ -759,11 +760,11 @@ Breakpoint Factor: Higher bp factor means large spacings increase
759
760
  }
760
761
 
761
762
  :root {
762
- --ks-border-width-default: 1px;
763
- --ks-border-width-emphasized: 2px;
764
- --ks-border-radius-control: var(--ks-spacing-xs);
765
- --ks-border-radius-card: var(--ks-spacing-s);
766
- --ks-border-radius-surface: var(--ks-spacing-m);
763
+ --ks-brand-border-width-default: 1px;
764
+ --ks-brand-border-width-emphasized: 2px;
765
+ --ks-brand-border-radius-control: var(--ks-spacing-xs);
766
+ --ks-brand-border-radius-card: var(--ks-spacing-s);
767
+ --ks-brand-border-radius-surface: var(--ks-spacing-m);
767
768
  }
768
769
 
769
770
  :root {
@@ -843,22 +844,22 @@ Breakpoint Factor: Higher bp factor means large spacings increase
843
844
 
844
845
  :root,
845
846
  [ks-theme] {
846
- --ks-color-primary-base: var(--color-primary);
847
- --ks-color-primary-inverted-base: var(--color-primary-inverted);
848
- --ks-color-fg-base: var(--color-fg);
849
- --ks-color-fg-inverted-base: var(--color-fg-inverted);
850
- --ks-color-bg-base: var(--color-bg);
851
- --ks-color-bg-inverted-base: var(--color-bg-inverted);
852
- --ks-color-link-base: var(--color-link);
853
- --ks-color-link-inverted-base: var(--color-link-inverted);
854
- --ks-color-positive-base: var(--color-positive);
855
- --ks-color-positive-inverted-base: var(--color-positive-inverted);
856
- --ks-color-negative-base: var(--color-negative);
857
- --ks-color-negative-inverted-base: var(--color-negative-inverted);
858
- --ks-color-informative-base: var(--color-informative);
859
- --ks-color-informative-inverted-base: var(--color-informative-inverted);
860
- --ks-color-notice-base: var(--color-notice);
861
- --ks-color-notice-inverted-base: var(--color-notice-inverted);
847
+ --ks-color-primary-base: var(--ks-brand-color-primary);
848
+ --ks-color-primary-inverted-base: var(--ks-brand-color-primary-inverted);
849
+ --ks-color-fg-base: var(--ks-brand-color-fg);
850
+ --ks-color-fg-inverted-base: var(--ks-brand-color-fg-inverted);
851
+ --ks-color-bg-base: var(--ks-brand-color-bg);
852
+ --ks-color-bg-inverted-base: var(--ks-brand-color-bg-inverted);
853
+ --ks-color-link-base: var(--ks-brand-color-link);
854
+ --ks-color-link-inverted-base: var(--ks-brand-color-link-inverted);
855
+ --ks-color-positive-base: var(--ks-brand-color-positive);
856
+ --ks-color-positive-inverted-base: var(--ks-brand-color-positive-inverted);
857
+ --ks-color-negative-base: var(--ks-brand-color-negative);
858
+ --ks-color-negative-inverted-base: var(--ks-brand-color-negative-inverted);
859
+ --ks-color-informative-base: var(--ks-brand-color-informative);
860
+ --ks-color-informative-inverted-base: var(--ks-brand-color-informative-inverted);
861
+ --ks-color-notice-base: var(--ks-brand-color-notice);
862
+ --ks-color-notice-inverted-base: var(--ks-brand-color-notice-inverted);
862
863
  }
863
864
 
864
865
  :root,
@@ -903,1444 +904,1768 @@ Breakpoint Factor: Higher bp factor means large spacings increase
903
904
  [ks-inverted],
904
905
  [ks-inverted=true],
905
906
  [ks-inverted=false] {
906
- --ks-color-primary-alpha-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), transparent);
907
- --ks-color-primary-alpha-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), transparent);
908
- --ks-color-primary-alpha-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), transparent);
909
- --ks-color-primary-alpha-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), transparent);
910
- --ks-color-primary-alpha-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), transparent);
911
- --ks-color-primary-alpha-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), transparent);
912
- --ks-color-primary-alpha-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), transparent);
913
- --ks-color-primary-alpha-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), transparent);
914
- --ks-color-primary-alpha-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), transparent);
907
+ --ks-color-primary-alpha-1: color-mix(
908
+ in srgb,
909
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
910
+ transparent
911
+ );
912
+ --ks-color-primary-alpha-2: color-mix(
913
+ in srgb,
914
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
915
+ transparent
916
+ );
917
+ --ks-color-primary-alpha-3: color-mix(
918
+ in srgb,
919
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
920
+ transparent
921
+ );
922
+ --ks-color-primary-alpha-4: color-mix(
923
+ in srgb,
924
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
925
+ transparent
926
+ );
927
+ --ks-color-primary-alpha-5: color-mix(
928
+ in srgb,
929
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
930
+ transparent
931
+ );
932
+ --ks-color-primary-alpha-6: color-mix(
933
+ in srgb,
934
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
935
+ transparent
936
+ );
937
+ --ks-color-primary-alpha-7: color-mix(
938
+ in srgb,
939
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
940
+ transparent
941
+ );
942
+ --ks-color-primary-alpha-8: color-mix(
943
+ in srgb,
944
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
945
+ transparent
946
+ );
947
+ --ks-color-primary-alpha-9: color-mix(
948
+ in srgb,
949
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
950
+ transparent
951
+ );
915
952
  --ks-color-primary-inverted-alpha-1: color-mix(
916
953
  in srgb,
917
- var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
954
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
918
955
  transparent
919
956
  );
920
957
  --ks-color-primary-inverted-alpha-2: color-mix(
921
958
  in srgb,
922
- var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
959
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
923
960
  transparent
924
961
  );
925
962
  --ks-color-primary-inverted-alpha-3: color-mix(
926
963
  in srgb,
927
- var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
964
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
928
965
  transparent
929
966
  );
930
967
  --ks-color-primary-inverted-alpha-4: color-mix(
931
968
  in srgb,
932
- var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
969
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
933
970
  transparent
934
971
  );
935
972
  --ks-color-primary-inverted-alpha-5: color-mix(
936
973
  in srgb,
937
- var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
974
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
938
975
  transparent
939
976
  );
940
977
  --ks-color-primary-inverted-alpha-6: color-mix(
941
978
  in srgb,
942
- var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
979
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
943
980
  transparent
944
981
  );
945
982
  --ks-color-primary-inverted-alpha-7: color-mix(
946
983
  in srgb,
947
- var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
984
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
948
985
  transparent
949
986
  );
950
987
  --ks-color-primary-inverted-alpha-8: color-mix(
951
988
  in srgb,
952
- var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
989
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
953
990
  transparent
954
991
  );
955
992
  --ks-color-primary-inverted-alpha-9: color-mix(
956
993
  in srgb,
957
- var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
994
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
958
995
  transparent
959
996
  );
960
- --ks-color-primary-to-bg-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), var(--ks-color-bg));
961
- --ks-color-primary-to-bg-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), var(--ks-color-bg));
962
- --ks-color-primary-to-bg-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), var(--ks-color-bg));
963
- --ks-color-primary-to-bg-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), var(--ks-color-bg));
964
- --ks-color-primary-to-bg-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), var(--ks-color-bg));
965
- --ks-color-primary-to-bg-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), var(--ks-color-bg));
966
- --ks-color-primary-to-bg-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), var(--ks-color-bg));
967
- --ks-color-primary-to-bg-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), var(--ks-color-bg));
968
- --ks-color-primary-to-bg-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), var(--ks-color-bg));
997
+ --ks-color-primary-to-bg-1: color-mix(
998
+ in srgb,
999
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
1000
+ var(--ks-color-bg)
1001
+ );
1002
+ --ks-color-primary-to-bg-2: color-mix(
1003
+ in srgb,
1004
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
1005
+ var(--ks-color-bg)
1006
+ );
1007
+ --ks-color-primary-to-bg-3: color-mix(
1008
+ in srgb,
1009
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
1010
+ var(--ks-color-bg)
1011
+ );
1012
+ --ks-color-primary-to-bg-4: color-mix(
1013
+ in srgb,
1014
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
1015
+ var(--ks-color-bg)
1016
+ );
1017
+ --ks-color-primary-to-bg-5: color-mix(
1018
+ in srgb,
1019
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
1020
+ var(--ks-color-bg)
1021
+ );
1022
+ --ks-color-primary-to-bg-6: color-mix(
1023
+ in srgb,
1024
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
1025
+ var(--ks-color-bg)
1026
+ );
1027
+ --ks-color-primary-to-bg-7: color-mix(
1028
+ in srgb,
1029
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
1030
+ var(--ks-color-bg)
1031
+ );
1032
+ --ks-color-primary-to-bg-8: color-mix(
1033
+ in srgb,
1034
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
1035
+ var(--ks-color-bg)
1036
+ );
1037
+ --ks-color-primary-to-bg-9: color-mix(
1038
+ in srgb,
1039
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
1040
+ var(--ks-color-bg)
1041
+ );
969
1042
  --ks-color-primary-inverted-to-bg-1: color-mix(
970
1043
  in srgb,
971
- var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
1044
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
972
1045
  var(--ks-color-bg-inverted)
973
1046
  );
974
1047
  --ks-color-primary-inverted-to-bg-2: color-mix(
975
1048
  in srgb,
976
- var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
1049
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
977
1050
  var(--ks-color-bg-inverted)
978
1051
  );
979
1052
  --ks-color-primary-inverted-to-bg-3: color-mix(
980
1053
  in srgb,
981
- var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
1054
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
982
1055
  var(--ks-color-bg-inverted)
983
1056
  );
984
1057
  --ks-color-primary-inverted-to-bg-4: color-mix(
985
1058
  in srgb,
986
- var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
1059
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
987
1060
  var(--ks-color-bg-inverted)
988
1061
  );
989
1062
  --ks-color-primary-inverted-to-bg-5: color-mix(
990
1063
  in srgb,
991
- var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
1064
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
992
1065
  var(--ks-color-bg-inverted)
993
1066
  );
994
1067
  --ks-color-primary-inverted-to-bg-6: color-mix(
995
1068
  in srgb,
996
- var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
1069
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
997
1070
  var(--ks-color-bg-inverted)
998
1071
  );
999
1072
  --ks-color-primary-inverted-to-bg-7: color-mix(
1000
1073
  in srgb,
1001
- var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
1074
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
1002
1075
  var(--ks-color-bg-inverted)
1003
1076
  );
1004
1077
  --ks-color-primary-inverted-to-bg-8: color-mix(
1005
1078
  in srgb,
1006
- var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
1079
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
1007
1080
  var(--ks-color-bg-inverted)
1008
1081
  );
1009
1082
  --ks-color-primary-inverted-to-bg-9: color-mix(
1010
1083
  in srgb,
1011
- var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
1084
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
1012
1085
  var(--ks-color-bg-inverted)
1013
1086
  );
1014
- --ks-color-primary-to-fg-1: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-1, 10%), var(--ks-color-fg));
1015
- --ks-color-primary-to-fg-2: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-2, 20%), var(--ks-color-fg));
1016
- --ks-color-primary-to-fg-3: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-3, 30%), var(--ks-color-fg));
1017
- --ks-color-primary-to-fg-4: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-4, 40%), var(--ks-color-fg));
1018
- --ks-color-primary-to-fg-5: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-5, 50%), var(--ks-color-fg));
1019
- --ks-color-primary-to-fg-6: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-6, 60%), var(--ks-color-fg));
1020
- --ks-color-primary-to-fg-7: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-7, 70%), var(--ks-color-fg));
1021
- --ks-color-primary-to-fg-8: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-8, 80%), var(--ks-color-fg));
1022
- --ks-color-primary-to-fg-9: color-mix(in srgb, var(--ks-color-primary) var(--color-scale-9, 90%), var(--ks-color-fg));
1087
+ --ks-color-primary-to-fg-1: color-mix(
1088
+ in srgb,
1089
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
1090
+ var(--ks-color-fg)
1091
+ );
1092
+ --ks-color-primary-to-fg-2: color-mix(
1093
+ in srgb,
1094
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
1095
+ var(--ks-color-fg)
1096
+ );
1097
+ --ks-color-primary-to-fg-3: color-mix(
1098
+ in srgb,
1099
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
1100
+ var(--ks-color-fg)
1101
+ );
1102
+ --ks-color-primary-to-fg-4: color-mix(
1103
+ in srgb,
1104
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
1105
+ var(--ks-color-fg)
1106
+ );
1107
+ --ks-color-primary-to-fg-5: color-mix(
1108
+ in srgb,
1109
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
1110
+ var(--ks-color-fg)
1111
+ );
1112
+ --ks-color-primary-to-fg-6: color-mix(
1113
+ in srgb,
1114
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
1115
+ var(--ks-color-fg)
1116
+ );
1117
+ --ks-color-primary-to-fg-7: color-mix(
1118
+ in srgb,
1119
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
1120
+ var(--ks-color-fg)
1121
+ );
1122
+ --ks-color-primary-to-fg-8: color-mix(
1123
+ in srgb,
1124
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
1125
+ var(--ks-color-fg)
1126
+ );
1127
+ --ks-color-primary-to-fg-9: color-mix(
1128
+ in srgb,
1129
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
1130
+ var(--ks-color-fg)
1131
+ );
1023
1132
  --ks-color-primary-inverted-to-fg-1: color-mix(
1024
1133
  in srgb,
1025
- var(--ks-color-primary-inverted) var(--color-scale-1, 10%),
1134
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
1026
1135
  var(--ks-color-fg-inverted)
1027
1136
  );
1028
1137
  --ks-color-primary-inverted-to-fg-2: color-mix(
1029
1138
  in srgb,
1030
- var(--ks-color-primary-inverted) var(--color-scale-2, 20%),
1139
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
1031
1140
  var(--ks-color-fg-inverted)
1032
1141
  );
1033
1142
  --ks-color-primary-inverted-to-fg-3: color-mix(
1034
1143
  in srgb,
1035
- var(--ks-color-primary-inverted) var(--color-scale-3, 30%),
1144
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
1036
1145
  var(--ks-color-fg-inverted)
1037
1146
  );
1038
1147
  --ks-color-primary-inverted-to-fg-4: color-mix(
1039
1148
  in srgb,
1040
- var(--ks-color-primary-inverted) var(--color-scale-4, 40%),
1149
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
1041
1150
  var(--ks-color-fg-inverted)
1042
1151
  );
1043
1152
  --ks-color-primary-inverted-to-fg-5: color-mix(
1044
1153
  in srgb,
1045
- var(--ks-color-primary-inverted) var(--color-scale-5, 50%),
1154
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
1046
1155
  var(--ks-color-fg-inverted)
1047
1156
  );
1048
1157
  --ks-color-primary-inverted-to-fg-6: color-mix(
1049
1158
  in srgb,
1050
- var(--ks-color-primary-inverted) var(--color-scale-6, 60%),
1159
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
1051
1160
  var(--ks-color-fg-inverted)
1052
1161
  );
1053
1162
  --ks-color-primary-inverted-to-fg-7: color-mix(
1054
1163
  in srgb,
1055
- var(--ks-color-primary-inverted) var(--color-scale-7, 70%),
1164
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
1056
1165
  var(--ks-color-fg-inverted)
1057
1166
  );
1058
1167
  --ks-color-primary-inverted-to-fg-8: color-mix(
1059
1168
  in srgb,
1060
- var(--ks-color-primary-inverted) var(--color-scale-8, 80%),
1169
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
1061
1170
  var(--ks-color-fg-inverted)
1062
1171
  );
1063
1172
  --ks-color-primary-inverted-to-fg-9: color-mix(
1064
1173
  in srgb,
1065
- var(--ks-color-primary-inverted) var(--color-scale-9, 90%),
1174
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
1066
1175
  var(--ks-color-fg-inverted)
1067
1176
  );
1068
- --ks-color-fg-alpha-1: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-1, 10%), transparent);
1069
- --ks-color-fg-alpha-2: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-2, 20%), transparent);
1070
- --ks-color-fg-alpha-3: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-3, 30%), transparent);
1071
- --ks-color-fg-alpha-4: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-4, 40%), transparent);
1072
- --ks-color-fg-alpha-5: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-5, 50%), transparent);
1073
- --ks-color-fg-alpha-6: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-6, 60%), transparent);
1074
- --ks-color-fg-alpha-7: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-7, 70%), transparent);
1075
- --ks-color-fg-alpha-8: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-8, 80%), transparent);
1076
- --ks-color-fg-alpha-9: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-9, 90%), transparent);
1177
+ --ks-color-fg-alpha-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), transparent);
1178
+ --ks-color-fg-alpha-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), transparent);
1179
+ --ks-color-fg-alpha-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), transparent);
1180
+ --ks-color-fg-alpha-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), transparent);
1181
+ --ks-color-fg-alpha-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), transparent);
1182
+ --ks-color-fg-alpha-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), transparent);
1183
+ --ks-color-fg-alpha-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), transparent);
1184
+ --ks-color-fg-alpha-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), transparent);
1185
+ --ks-color-fg-alpha-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-9, 90%), transparent);
1077
1186
  --ks-color-fg-inverted-alpha-1: color-mix(
1078
1187
  in srgb,
1079
- var(--ks-color-fg-inverted) var(--color-scale-1, 10%),
1188
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-1, 10%),
1080
1189
  transparent
1081
1190
  );
1082
1191
  --ks-color-fg-inverted-alpha-2: color-mix(
1083
1192
  in srgb,
1084
- var(--ks-color-fg-inverted) var(--color-scale-2, 20%),
1193
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-2, 20%),
1085
1194
  transparent
1086
1195
  );
1087
1196
  --ks-color-fg-inverted-alpha-3: color-mix(
1088
1197
  in srgb,
1089
- var(--ks-color-fg-inverted) var(--color-scale-3, 30%),
1198
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-3, 30%),
1090
1199
  transparent
1091
1200
  );
1092
1201
  --ks-color-fg-inverted-alpha-4: color-mix(
1093
1202
  in srgb,
1094
- var(--ks-color-fg-inverted) var(--color-scale-4, 40%),
1203
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-4, 40%),
1095
1204
  transparent
1096
1205
  );
1097
1206
  --ks-color-fg-inverted-alpha-5: color-mix(
1098
1207
  in srgb,
1099
- var(--ks-color-fg-inverted) var(--color-scale-5, 50%),
1208
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-5, 50%),
1100
1209
  transparent
1101
1210
  );
1102
1211
  --ks-color-fg-inverted-alpha-6: color-mix(
1103
1212
  in srgb,
1104
- var(--ks-color-fg-inverted) var(--color-scale-6, 60%),
1213
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-6, 60%),
1105
1214
  transparent
1106
1215
  );
1107
1216
  --ks-color-fg-inverted-alpha-7: color-mix(
1108
1217
  in srgb,
1109
- var(--ks-color-fg-inverted) var(--color-scale-7, 70%),
1218
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-7, 70%),
1110
1219
  transparent
1111
1220
  );
1112
1221
  --ks-color-fg-inverted-alpha-8: color-mix(
1113
1222
  in srgb,
1114
- var(--ks-color-fg-inverted) var(--color-scale-8, 80%),
1223
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-8, 80%),
1115
1224
  transparent
1116
1225
  );
1117
1226
  --ks-color-fg-inverted-alpha-9: color-mix(
1118
1227
  in srgb,
1119
- var(--ks-color-fg-inverted) var(--color-scale-9, 90%),
1228
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-9, 90%),
1120
1229
  transparent
1121
1230
  );
1122
- --ks-color-fg-to-bg-1: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-1, 10%), var(--ks-color-bg));
1123
- --ks-color-fg-to-bg-2: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-2, 20%), var(--ks-color-bg));
1124
- --ks-color-fg-to-bg-3: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-3, 30%), var(--ks-color-bg));
1125
- --ks-color-fg-to-bg-4: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-4, 40%), var(--ks-color-bg));
1126
- --ks-color-fg-to-bg-5: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-5, 50%), var(--ks-color-bg));
1127
- --ks-color-fg-to-bg-6: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-6, 60%), var(--ks-color-bg));
1128
- --ks-color-fg-to-bg-7: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-7, 70%), var(--ks-color-bg));
1129
- --ks-color-fg-to-bg-8: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-8, 80%), var(--ks-color-bg));
1130
- --ks-color-fg-to-bg-9: color-mix(in srgb, var(--ks-color-fg) var(--color-scale-9, 90%), var(--ks-color-bg));
1231
+ --ks-color-fg-to-bg-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-bg));
1232
+ --ks-color-fg-to-bg-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-bg));
1233
+ --ks-color-fg-to-bg-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-bg));
1234
+ --ks-color-fg-to-bg-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-bg));
1235
+ --ks-color-fg-to-bg-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-bg));
1236
+ --ks-color-fg-to-bg-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-bg));
1237
+ --ks-color-fg-to-bg-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-bg));
1238
+ --ks-color-fg-to-bg-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-bg));
1239
+ --ks-color-fg-to-bg-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-9, 90%), var(--ks-color-bg));
1131
1240
  --ks-color-fg-inverted-to-bg-1: color-mix(
1132
1241
  in srgb,
1133
- var(--ks-color-fg-inverted) var(--color-scale-1, 10%),
1242
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-1, 10%),
1134
1243
  var(--ks-color-bg-inverted)
1135
1244
  );
1136
1245
  --ks-color-fg-inverted-to-bg-2: color-mix(
1137
1246
  in srgb,
1138
- var(--ks-color-fg-inverted) var(--color-scale-2, 20%),
1247
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-2, 20%),
1139
1248
  var(--ks-color-bg-inverted)
1140
1249
  );
1141
1250
  --ks-color-fg-inverted-to-bg-3: color-mix(
1142
1251
  in srgb,
1143
- var(--ks-color-fg-inverted) var(--color-scale-3, 30%),
1252
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-3, 30%),
1144
1253
  var(--ks-color-bg-inverted)
1145
1254
  );
1146
1255
  --ks-color-fg-inverted-to-bg-4: color-mix(
1147
1256
  in srgb,
1148
- var(--ks-color-fg-inverted) var(--color-scale-4, 40%),
1257
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-4, 40%),
1149
1258
  var(--ks-color-bg-inverted)
1150
1259
  );
1151
1260
  --ks-color-fg-inverted-to-bg-5: color-mix(
1152
1261
  in srgb,
1153
- var(--ks-color-fg-inverted) var(--color-scale-5, 50%),
1262
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-5, 50%),
1154
1263
  var(--ks-color-bg-inverted)
1155
1264
  );
1156
1265
  --ks-color-fg-inverted-to-bg-6: color-mix(
1157
1266
  in srgb,
1158
- var(--ks-color-fg-inverted) var(--color-scale-6, 60%),
1267
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-6, 60%),
1159
1268
  var(--ks-color-bg-inverted)
1160
1269
  );
1161
1270
  --ks-color-fg-inverted-to-bg-7: color-mix(
1162
1271
  in srgb,
1163
- var(--ks-color-fg-inverted) var(--color-scale-7, 70%),
1272
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-7, 70%),
1164
1273
  var(--ks-color-bg-inverted)
1165
1274
  );
1166
1275
  --ks-color-fg-inverted-to-bg-8: color-mix(
1167
1276
  in srgb,
1168
- var(--ks-color-fg-inverted) var(--color-scale-8, 80%),
1277
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-8, 80%),
1169
1278
  var(--ks-color-bg-inverted)
1170
1279
  );
1171
1280
  --ks-color-fg-inverted-to-bg-9: color-mix(
1172
1281
  in srgb,
1173
- var(--ks-color-fg-inverted) var(--color-scale-9, 90%),
1282
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-9, 90%),
1174
1283
  var(--ks-color-bg-inverted)
1175
1284
  );
1176
- --ks-color-bg-alpha-1: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-1, 10%), transparent);
1177
- --ks-color-bg-alpha-2: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-2, 20%), transparent);
1178
- --ks-color-bg-alpha-3: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-3, 30%), transparent);
1179
- --ks-color-bg-alpha-4: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-4, 40%), transparent);
1180
- --ks-color-bg-alpha-5: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-5, 50%), transparent);
1181
- --ks-color-bg-alpha-6: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-6, 60%), transparent);
1182
- --ks-color-bg-alpha-7: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-7, 70%), transparent);
1183
- --ks-color-bg-alpha-8: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-8, 80%), transparent);
1184
- --ks-color-bg-alpha-9: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-9, 90%), transparent);
1285
+ --ks-color-bg-alpha-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), transparent);
1286
+ --ks-color-bg-alpha-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), transparent);
1287
+ --ks-color-bg-alpha-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), transparent);
1288
+ --ks-color-bg-alpha-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), transparent);
1289
+ --ks-color-bg-alpha-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), transparent);
1290
+ --ks-color-bg-alpha-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), transparent);
1291
+ --ks-color-bg-alpha-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), transparent);
1292
+ --ks-color-bg-alpha-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), transparent);
1293
+ --ks-color-bg-alpha-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-9, 90%), transparent);
1185
1294
  --ks-color-bg-inverted-alpha-1: color-mix(
1186
1295
  in srgb,
1187
- var(--ks-color-bg-inverted) var(--color-scale-1, 10%),
1296
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-1, 10%),
1188
1297
  transparent
1189
1298
  );
1190
1299
  --ks-color-bg-inverted-alpha-2: color-mix(
1191
1300
  in srgb,
1192
- var(--ks-color-bg-inverted) var(--color-scale-2, 20%),
1301
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-2, 20%),
1193
1302
  transparent
1194
1303
  );
1195
1304
  --ks-color-bg-inverted-alpha-3: color-mix(
1196
1305
  in srgb,
1197
- var(--ks-color-bg-inverted) var(--color-scale-3, 30%),
1306
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-3, 30%),
1198
1307
  transparent
1199
1308
  );
1200
1309
  --ks-color-bg-inverted-alpha-4: color-mix(
1201
1310
  in srgb,
1202
- var(--ks-color-bg-inverted) var(--color-scale-4, 40%),
1311
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-4, 40%),
1203
1312
  transparent
1204
1313
  );
1205
1314
  --ks-color-bg-inverted-alpha-5: color-mix(
1206
1315
  in srgb,
1207
- var(--ks-color-bg-inverted) var(--color-scale-5, 50%),
1316
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-5, 50%),
1208
1317
  transparent
1209
1318
  );
1210
1319
  --ks-color-bg-inverted-alpha-6: color-mix(
1211
1320
  in srgb,
1212
- var(--ks-color-bg-inverted) var(--color-scale-6, 60%),
1321
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-6, 60%),
1213
1322
  transparent
1214
1323
  );
1215
1324
  --ks-color-bg-inverted-alpha-7: color-mix(
1216
1325
  in srgb,
1217
- var(--ks-color-bg-inverted) var(--color-scale-7, 70%),
1326
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-7, 70%),
1218
1327
  transparent
1219
1328
  );
1220
1329
  --ks-color-bg-inverted-alpha-8: color-mix(
1221
1330
  in srgb,
1222
- var(--ks-color-bg-inverted) var(--color-scale-8, 80%),
1331
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-8, 80%),
1223
1332
  transparent
1224
1333
  );
1225
1334
  --ks-color-bg-inverted-alpha-9: color-mix(
1226
1335
  in srgb,
1227
- var(--ks-color-bg-inverted) var(--color-scale-9, 90%),
1336
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-9, 90%),
1228
1337
  transparent
1229
1338
  );
1230
- --ks-color-bg-to-fg-1: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-1, 10%), var(--ks-color-fg));
1231
- --ks-color-bg-to-fg-2: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-2, 20%), var(--ks-color-fg));
1232
- --ks-color-bg-to-fg-3: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-3, 30%), var(--ks-color-fg));
1233
- --ks-color-bg-to-fg-4: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-4, 40%), var(--ks-color-fg));
1234
- --ks-color-bg-to-fg-5: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-5, 50%), var(--ks-color-fg));
1235
- --ks-color-bg-to-fg-6: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-6, 60%), var(--ks-color-fg));
1236
- --ks-color-bg-to-fg-7: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-7, 70%), var(--ks-color-fg));
1237
- --ks-color-bg-to-fg-8: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-8, 80%), var(--ks-color-fg));
1238
- --ks-color-bg-to-fg-9: color-mix(in srgb, var(--ks-color-bg) var(--color-scale-9, 90%), var(--ks-color-fg));
1339
+ --ks-color-bg-to-fg-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-fg));
1340
+ --ks-color-bg-to-fg-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-fg));
1341
+ --ks-color-bg-to-fg-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-fg));
1342
+ --ks-color-bg-to-fg-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-fg));
1343
+ --ks-color-bg-to-fg-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-fg));
1344
+ --ks-color-bg-to-fg-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-fg));
1345
+ --ks-color-bg-to-fg-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-fg));
1346
+ --ks-color-bg-to-fg-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-fg));
1347
+ --ks-color-bg-to-fg-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-9, 90%), var(--ks-color-fg));
1239
1348
  --ks-color-bg-inverted-to-fg-1: color-mix(
1240
1349
  in srgb,
1241
- var(--ks-color-bg-inverted) var(--color-scale-1, 10%),
1350
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-1, 10%),
1242
1351
  var(--ks-color-fg-inverted)
1243
1352
  );
1244
1353
  --ks-color-bg-inverted-to-fg-2: color-mix(
1245
1354
  in srgb,
1246
- var(--ks-color-bg-inverted) var(--color-scale-2, 20%),
1355
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-2, 20%),
1247
1356
  var(--ks-color-fg-inverted)
1248
1357
  );
1249
1358
  --ks-color-bg-inverted-to-fg-3: color-mix(
1250
1359
  in srgb,
1251
- var(--ks-color-bg-inverted) var(--color-scale-3, 30%),
1360
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-3, 30%),
1252
1361
  var(--ks-color-fg-inverted)
1253
1362
  );
1254
1363
  --ks-color-bg-inverted-to-fg-4: color-mix(
1255
1364
  in srgb,
1256
- var(--ks-color-bg-inverted) var(--color-scale-4, 40%),
1365
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-4, 40%),
1257
1366
  var(--ks-color-fg-inverted)
1258
1367
  );
1259
1368
  --ks-color-bg-inverted-to-fg-5: color-mix(
1260
1369
  in srgb,
1261
- var(--ks-color-bg-inverted) var(--color-scale-5, 50%),
1370
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-5, 50%),
1262
1371
  var(--ks-color-fg-inverted)
1263
1372
  );
1264
1373
  --ks-color-bg-inverted-to-fg-6: color-mix(
1265
1374
  in srgb,
1266
- var(--ks-color-bg-inverted) var(--color-scale-6, 60%),
1375
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-6, 60%),
1267
1376
  var(--ks-color-fg-inverted)
1268
1377
  );
1269
1378
  --ks-color-bg-inverted-to-fg-7: color-mix(
1270
1379
  in srgb,
1271
- var(--ks-color-bg-inverted) var(--color-scale-7, 70%),
1380
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-7, 70%),
1272
1381
  var(--ks-color-fg-inverted)
1273
1382
  );
1274
1383
  --ks-color-bg-inverted-to-fg-8: color-mix(
1275
1384
  in srgb,
1276
- var(--ks-color-bg-inverted) var(--color-scale-8, 80%),
1385
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-8, 80%),
1277
1386
  var(--ks-color-fg-inverted)
1278
1387
  );
1279
1388
  --ks-color-bg-inverted-to-fg-9: color-mix(
1280
1389
  in srgb,
1281
- var(--ks-color-bg-inverted) var(--color-scale-9, 90%),
1390
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-9, 90%),
1282
1391
  var(--ks-color-fg-inverted)
1283
1392
  );
1284
- --ks-color-link-alpha-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), transparent);
1285
- --ks-color-link-alpha-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), transparent);
1286
- --ks-color-link-alpha-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), transparent);
1287
- --ks-color-link-alpha-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), transparent);
1288
- --ks-color-link-alpha-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), transparent);
1289
- --ks-color-link-alpha-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), transparent);
1290
- --ks-color-link-alpha-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), transparent);
1291
- --ks-color-link-alpha-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), transparent);
1292
- --ks-color-link-alpha-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), transparent);
1393
+ --ks-color-link-alpha-1: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-1, 10%), transparent);
1394
+ --ks-color-link-alpha-2: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-2, 20%), transparent);
1395
+ --ks-color-link-alpha-3: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-3, 30%), transparent);
1396
+ --ks-color-link-alpha-4: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-4, 40%), transparent);
1397
+ --ks-color-link-alpha-5: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-5, 50%), transparent);
1398
+ --ks-color-link-alpha-6: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-6, 60%), transparent);
1399
+ --ks-color-link-alpha-7: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-7, 70%), transparent);
1400
+ --ks-color-link-alpha-8: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-8, 80%), transparent);
1401
+ --ks-color-link-alpha-9: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-9, 90%), transparent);
1293
1402
  --ks-color-link-inverted-alpha-1: color-mix(
1294
1403
  in srgb,
1295
- var(--ks-color-link-inverted) var(--color-scale-1, 10%),
1404
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1296
1405
  transparent
1297
1406
  );
1298
1407
  --ks-color-link-inverted-alpha-2: color-mix(
1299
1408
  in srgb,
1300
- var(--ks-color-link-inverted) var(--color-scale-2, 20%),
1409
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1301
1410
  transparent
1302
1411
  );
1303
1412
  --ks-color-link-inverted-alpha-3: color-mix(
1304
1413
  in srgb,
1305
- var(--ks-color-link-inverted) var(--color-scale-3, 30%),
1414
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1306
1415
  transparent
1307
1416
  );
1308
1417
  --ks-color-link-inverted-alpha-4: color-mix(
1309
1418
  in srgb,
1310
- var(--ks-color-link-inverted) var(--color-scale-4, 40%),
1419
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1311
1420
  transparent
1312
1421
  );
1313
1422
  --ks-color-link-inverted-alpha-5: color-mix(
1314
1423
  in srgb,
1315
- var(--ks-color-link-inverted) var(--color-scale-5, 50%),
1424
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1316
1425
  transparent
1317
1426
  );
1318
1427
  --ks-color-link-inverted-alpha-6: color-mix(
1319
1428
  in srgb,
1320
- var(--ks-color-link-inverted) var(--color-scale-6, 60%),
1429
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1321
1430
  transparent
1322
1431
  );
1323
1432
  --ks-color-link-inverted-alpha-7: color-mix(
1324
1433
  in srgb,
1325
- var(--ks-color-link-inverted) var(--color-scale-7, 70%),
1434
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1326
1435
  transparent
1327
1436
  );
1328
1437
  --ks-color-link-inverted-alpha-8: color-mix(
1329
1438
  in srgb,
1330
- var(--ks-color-link-inverted) var(--color-scale-8, 80%),
1439
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1331
1440
  transparent
1332
1441
  );
1333
1442
  --ks-color-link-inverted-alpha-9: color-mix(
1334
1443
  in srgb,
1335
- var(--ks-color-link-inverted) var(--color-scale-9, 90%),
1444
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1336
1445
  transparent
1337
1446
  );
1338
- --ks-color-link-to-bg-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), var(--ks-color-bg));
1339
- --ks-color-link-to-bg-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), var(--ks-color-bg));
1340
- --ks-color-link-to-bg-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), var(--ks-color-bg));
1341
- --ks-color-link-to-bg-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), var(--ks-color-bg));
1342
- --ks-color-link-to-bg-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), var(--ks-color-bg));
1343
- --ks-color-link-to-bg-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), var(--ks-color-bg));
1344
- --ks-color-link-to-bg-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), var(--ks-color-bg));
1345
- --ks-color-link-to-bg-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), var(--ks-color-bg));
1346
- --ks-color-link-to-bg-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), var(--ks-color-bg));
1447
+ --ks-color-link-to-bg-1: color-mix(
1448
+ in srgb,
1449
+ var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
1450
+ var(--ks-color-bg)
1451
+ );
1452
+ --ks-color-link-to-bg-2: color-mix(
1453
+ in srgb,
1454
+ var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
1455
+ var(--ks-color-bg)
1456
+ );
1457
+ --ks-color-link-to-bg-3: color-mix(
1458
+ in srgb,
1459
+ var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
1460
+ var(--ks-color-bg)
1461
+ );
1462
+ --ks-color-link-to-bg-4: color-mix(
1463
+ in srgb,
1464
+ var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
1465
+ var(--ks-color-bg)
1466
+ );
1467
+ --ks-color-link-to-bg-5: color-mix(
1468
+ in srgb,
1469
+ var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
1470
+ var(--ks-color-bg)
1471
+ );
1472
+ --ks-color-link-to-bg-6: color-mix(
1473
+ in srgb,
1474
+ var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
1475
+ var(--ks-color-bg)
1476
+ );
1477
+ --ks-color-link-to-bg-7: color-mix(
1478
+ in srgb,
1479
+ var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
1480
+ var(--ks-color-bg)
1481
+ );
1482
+ --ks-color-link-to-bg-8: color-mix(
1483
+ in srgb,
1484
+ var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
1485
+ var(--ks-color-bg)
1486
+ );
1487
+ --ks-color-link-to-bg-9: color-mix(
1488
+ in srgb,
1489
+ var(--ks-color-link) var(--ks-brand-color-scale-9, 90%),
1490
+ var(--ks-color-bg)
1491
+ );
1347
1492
  --ks-color-link-inverted-to-bg-1: color-mix(
1348
1493
  in srgb,
1349
- var(--ks-color-link-inverted) var(--color-scale-1, 10%),
1494
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1350
1495
  var(--ks-color-bg-inverted)
1351
1496
  );
1352
1497
  --ks-color-link-inverted-to-bg-2: color-mix(
1353
1498
  in srgb,
1354
- var(--ks-color-link-inverted) var(--color-scale-2, 20%),
1499
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1355
1500
  var(--ks-color-bg-inverted)
1356
1501
  );
1357
1502
  --ks-color-link-inverted-to-bg-3: color-mix(
1358
1503
  in srgb,
1359
- var(--ks-color-link-inverted) var(--color-scale-3, 30%),
1504
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1360
1505
  var(--ks-color-bg-inverted)
1361
1506
  );
1362
1507
  --ks-color-link-inverted-to-bg-4: color-mix(
1363
1508
  in srgb,
1364
- var(--ks-color-link-inverted) var(--color-scale-4, 40%),
1509
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1365
1510
  var(--ks-color-bg-inverted)
1366
1511
  );
1367
1512
  --ks-color-link-inverted-to-bg-5: color-mix(
1368
1513
  in srgb,
1369
- var(--ks-color-link-inverted) var(--color-scale-5, 50%),
1514
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1370
1515
  var(--ks-color-bg-inverted)
1371
1516
  );
1372
1517
  --ks-color-link-inverted-to-bg-6: color-mix(
1373
1518
  in srgb,
1374
- var(--ks-color-link-inverted) var(--color-scale-6, 60%),
1519
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1375
1520
  var(--ks-color-bg-inverted)
1376
1521
  );
1377
1522
  --ks-color-link-inverted-to-bg-7: color-mix(
1378
1523
  in srgb,
1379
- var(--ks-color-link-inverted) var(--color-scale-7, 70%),
1524
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1380
1525
  var(--ks-color-bg-inverted)
1381
1526
  );
1382
1527
  --ks-color-link-inverted-to-bg-8: color-mix(
1383
1528
  in srgb,
1384
- var(--ks-color-link-inverted) var(--color-scale-8, 80%),
1529
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1385
1530
  var(--ks-color-bg-inverted)
1386
1531
  );
1387
1532
  --ks-color-link-inverted-to-bg-9: color-mix(
1388
1533
  in srgb,
1389
- var(--ks-color-link-inverted) var(--color-scale-9, 90%),
1534
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1390
1535
  var(--ks-color-bg-inverted)
1391
1536
  );
1392
- --ks-color-link-to-fg-1: color-mix(in srgb, var(--ks-color-link) var(--color-scale-1, 10%), var(--ks-color-fg));
1393
- --ks-color-link-to-fg-2: color-mix(in srgb, var(--ks-color-link) var(--color-scale-2, 20%), var(--ks-color-fg));
1394
- --ks-color-link-to-fg-3: color-mix(in srgb, var(--ks-color-link) var(--color-scale-3, 30%), var(--ks-color-fg));
1395
- --ks-color-link-to-fg-4: color-mix(in srgb, var(--ks-color-link) var(--color-scale-4, 40%), var(--ks-color-fg));
1396
- --ks-color-link-to-fg-5: color-mix(in srgb, var(--ks-color-link) var(--color-scale-5, 50%), var(--ks-color-fg));
1397
- --ks-color-link-to-fg-6: color-mix(in srgb, var(--ks-color-link) var(--color-scale-6, 60%), var(--ks-color-fg));
1398
- --ks-color-link-to-fg-7: color-mix(in srgb, var(--ks-color-link) var(--color-scale-7, 70%), var(--ks-color-fg));
1399
- --ks-color-link-to-fg-8: color-mix(in srgb, var(--ks-color-link) var(--color-scale-8, 80%), var(--ks-color-fg));
1400
- --ks-color-link-to-fg-9: color-mix(in srgb, var(--ks-color-link) var(--color-scale-9, 90%), var(--ks-color-fg));
1537
+ --ks-color-link-to-fg-1: color-mix(
1538
+ in srgb,
1539
+ var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
1540
+ var(--ks-color-fg)
1541
+ );
1542
+ --ks-color-link-to-fg-2: color-mix(
1543
+ in srgb,
1544
+ var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
1545
+ var(--ks-color-fg)
1546
+ );
1547
+ --ks-color-link-to-fg-3: color-mix(
1548
+ in srgb,
1549
+ var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
1550
+ var(--ks-color-fg)
1551
+ );
1552
+ --ks-color-link-to-fg-4: color-mix(
1553
+ in srgb,
1554
+ var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
1555
+ var(--ks-color-fg)
1556
+ );
1557
+ --ks-color-link-to-fg-5: color-mix(
1558
+ in srgb,
1559
+ var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
1560
+ var(--ks-color-fg)
1561
+ );
1562
+ --ks-color-link-to-fg-6: color-mix(
1563
+ in srgb,
1564
+ var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
1565
+ var(--ks-color-fg)
1566
+ );
1567
+ --ks-color-link-to-fg-7: color-mix(
1568
+ in srgb,
1569
+ var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
1570
+ var(--ks-color-fg)
1571
+ );
1572
+ --ks-color-link-to-fg-8: color-mix(
1573
+ in srgb,
1574
+ var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
1575
+ var(--ks-color-fg)
1576
+ );
1577
+ --ks-color-link-to-fg-9: color-mix(
1578
+ in srgb,
1579
+ var(--ks-color-link) var(--ks-brand-color-scale-9, 90%),
1580
+ var(--ks-color-fg)
1581
+ );
1401
1582
  --ks-color-link-inverted-to-fg-1: color-mix(
1402
1583
  in srgb,
1403
- var(--ks-color-link-inverted) var(--color-scale-1, 10%),
1584
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1404
1585
  var(--ks-color-fg-inverted)
1405
1586
  );
1406
1587
  --ks-color-link-inverted-to-fg-2: color-mix(
1407
1588
  in srgb,
1408
- var(--ks-color-link-inverted) var(--color-scale-2, 20%),
1589
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1409
1590
  var(--ks-color-fg-inverted)
1410
1591
  );
1411
1592
  --ks-color-link-inverted-to-fg-3: color-mix(
1412
1593
  in srgb,
1413
- var(--ks-color-link-inverted) var(--color-scale-3, 30%),
1594
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1414
1595
  var(--ks-color-fg-inverted)
1415
1596
  );
1416
1597
  --ks-color-link-inverted-to-fg-4: color-mix(
1417
1598
  in srgb,
1418
- var(--ks-color-link-inverted) var(--color-scale-4, 40%),
1599
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1419
1600
  var(--ks-color-fg-inverted)
1420
1601
  );
1421
1602
  --ks-color-link-inverted-to-fg-5: color-mix(
1422
1603
  in srgb,
1423
- var(--ks-color-link-inverted) var(--color-scale-5, 50%),
1604
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1424
1605
  var(--ks-color-fg-inverted)
1425
1606
  );
1426
1607
  --ks-color-link-inverted-to-fg-6: color-mix(
1427
1608
  in srgb,
1428
- var(--ks-color-link-inverted) var(--color-scale-6, 60%),
1609
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1429
1610
  var(--ks-color-fg-inverted)
1430
1611
  );
1431
1612
  --ks-color-link-inverted-to-fg-7: color-mix(
1432
1613
  in srgb,
1433
- var(--ks-color-link-inverted) var(--color-scale-7, 70%),
1614
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1434
1615
  var(--ks-color-fg-inverted)
1435
1616
  );
1436
1617
  --ks-color-link-inverted-to-fg-8: color-mix(
1437
1618
  in srgb,
1438
- var(--ks-color-link-inverted) var(--color-scale-8, 80%),
1619
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1439
1620
  var(--ks-color-fg-inverted)
1440
1621
  );
1441
1622
  --ks-color-link-inverted-to-fg-9: color-mix(
1442
1623
  in srgb,
1443
- var(--ks-color-link-inverted) var(--color-scale-9, 90%),
1624
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1444
1625
  var(--ks-color-fg-inverted)
1445
1626
  );
1446
- --ks-color-positive-alpha-1: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-1, 10%), transparent);
1447
- --ks-color-positive-alpha-2: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-2, 20%), transparent);
1448
- --ks-color-positive-alpha-3: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-3, 30%), transparent);
1449
- --ks-color-positive-alpha-4: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-4, 40%), transparent);
1450
- --ks-color-positive-alpha-5: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-5, 50%), transparent);
1451
- --ks-color-positive-alpha-6: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-6, 60%), transparent);
1452
- --ks-color-positive-alpha-7: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-7, 70%), transparent);
1453
- --ks-color-positive-alpha-8: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-8, 80%), transparent);
1454
- --ks-color-positive-alpha-9: color-mix(in srgb, var(--ks-color-positive) var(--color-scale-9, 90%), transparent);
1627
+ --ks-color-positive-alpha-1: color-mix(
1628
+ in srgb,
1629
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1630
+ transparent
1631
+ );
1632
+ --ks-color-positive-alpha-2: color-mix(
1633
+ in srgb,
1634
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1635
+ transparent
1636
+ );
1637
+ --ks-color-positive-alpha-3: color-mix(
1638
+ in srgb,
1639
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1640
+ transparent
1641
+ );
1642
+ --ks-color-positive-alpha-4: color-mix(
1643
+ in srgb,
1644
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1645
+ transparent
1646
+ );
1647
+ --ks-color-positive-alpha-5: color-mix(
1648
+ in srgb,
1649
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1650
+ transparent
1651
+ );
1652
+ --ks-color-positive-alpha-6: color-mix(
1653
+ in srgb,
1654
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1655
+ transparent
1656
+ );
1657
+ --ks-color-positive-alpha-7: color-mix(
1658
+ in srgb,
1659
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1660
+ transparent
1661
+ );
1662
+ --ks-color-positive-alpha-8: color-mix(
1663
+ in srgb,
1664
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1665
+ transparent
1666
+ );
1667
+ --ks-color-positive-alpha-9: color-mix(
1668
+ in srgb,
1669
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1670
+ transparent
1671
+ );
1455
1672
  --ks-color-positive-inverted-alpha-1: color-mix(
1456
1673
  in srgb,
1457
- var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
1674
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1458
1675
  transparent
1459
1676
  );
1460
1677
  --ks-color-positive-inverted-alpha-2: color-mix(
1461
1678
  in srgb,
1462
- var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
1679
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1463
1680
  transparent
1464
1681
  );
1465
1682
  --ks-color-positive-inverted-alpha-3: color-mix(
1466
1683
  in srgb,
1467
- var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
1684
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1468
1685
  transparent
1469
1686
  );
1470
1687
  --ks-color-positive-inverted-alpha-4: color-mix(
1471
1688
  in srgb,
1472
- var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
1689
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1473
1690
  transparent
1474
1691
  );
1475
1692
  --ks-color-positive-inverted-alpha-5: color-mix(
1476
1693
  in srgb,
1477
- var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
1694
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1478
1695
  transparent
1479
1696
  );
1480
1697
  --ks-color-positive-inverted-alpha-6: color-mix(
1481
1698
  in srgb,
1482
- var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
1699
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1483
1700
  transparent
1484
1701
  );
1485
1702
  --ks-color-positive-inverted-alpha-7: color-mix(
1486
1703
  in srgb,
1487
- var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
1704
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1488
1705
  transparent
1489
1706
  );
1490
1707
  --ks-color-positive-inverted-alpha-8: color-mix(
1491
1708
  in srgb,
1492
- var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
1709
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1493
1710
  transparent
1494
1711
  );
1495
1712
  --ks-color-positive-inverted-alpha-9: color-mix(
1496
1713
  in srgb,
1497
- var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
1714
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1498
1715
  transparent
1499
1716
  );
1500
1717
  --ks-color-positive-to-bg-1: color-mix(
1501
1718
  in srgb,
1502
- var(--ks-color-positive) var(--color-scale-1, 10%),
1719
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1503
1720
  var(--ks-color-bg)
1504
1721
  );
1505
1722
  --ks-color-positive-to-bg-2: color-mix(
1506
1723
  in srgb,
1507
- var(--ks-color-positive) var(--color-scale-2, 20%),
1724
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1508
1725
  var(--ks-color-bg)
1509
1726
  );
1510
1727
  --ks-color-positive-to-bg-3: color-mix(
1511
1728
  in srgb,
1512
- var(--ks-color-positive) var(--color-scale-3, 30%),
1729
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1513
1730
  var(--ks-color-bg)
1514
1731
  );
1515
1732
  --ks-color-positive-to-bg-4: color-mix(
1516
1733
  in srgb,
1517
- var(--ks-color-positive) var(--color-scale-4, 40%),
1734
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1518
1735
  var(--ks-color-bg)
1519
1736
  );
1520
1737
  --ks-color-positive-to-bg-5: color-mix(
1521
1738
  in srgb,
1522
- var(--ks-color-positive) var(--color-scale-5, 50%),
1739
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1523
1740
  var(--ks-color-bg)
1524
1741
  );
1525
1742
  --ks-color-positive-to-bg-6: color-mix(
1526
1743
  in srgb,
1527
- var(--ks-color-positive) var(--color-scale-6, 60%),
1744
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1528
1745
  var(--ks-color-bg)
1529
1746
  );
1530
1747
  --ks-color-positive-to-bg-7: color-mix(
1531
1748
  in srgb,
1532
- var(--ks-color-positive) var(--color-scale-7, 70%),
1749
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1533
1750
  var(--ks-color-bg)
1534
1751
  );
1535
1752
  --ks-color-positive-to-bg-8: color-mix(
1536
1753
  in srgb,
1537
- var(--ks-color-positive) var(--color-scale-8, 80%),
1754
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1538
1755
  var(--ks-color-bg)
1539
1756
  );
1540
1757
  --ks-color-positive-to-bg-9: color-mix(
1541
1758
  in srgb,
1542
- var(--ks-color-positive) var(--color-scale-9, 90%),
1759
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1543
1760
  var(--ks-color-bg)
1544
1761
  );
1545
1762
  --ks-color-positive-inverted-to-bg-1: color-mix(
1546
1763
  in srgb,
1547
- var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
1764
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1548
1765
  var(--ks-color-bg-inverted)
1549
1766
  );
1550
1767
  --ks-color-positive-inverted-to-bg-2: color-mix(
1551
1768
  in srgb,
1552
- var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
1769
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1553
1770
  var(--ks-color-bg-inverted)
1554
1771
  );
1555
1772
  --ks-color-positive-inverted-to-bg-3: color-mix(
1556
1773
  in srgb,
1557
- var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
1774
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1558
1775
  var(--ks-color-bg-inverted)
1559
1776
  );
1560
1777
  --ks-color-positive-inverted-to-bg-4: color-mix(
1561
1778
  in srgb,
1562
- var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
1779
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1563
1780
  var(--ks-color-bg-inverted)
1564
1781
  );
1565
1782
  --ks-color-positive-inverted-to-bg-5: color-mix(
1566
1783
  in srgb,
1567
- var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
1784
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1568
1785
  var(--ks-color-bg-inverted)
1569
1786
  );
1570
1787
  --ks-color-positive-inverted-to-bg-6: color-mix(
1571
1788
  in srgb,
1572
- var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
1789
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1573
1790
  var(--ks-color-bg-inverted)
1574
1791
  );
1575
1792
  --ks-color-positive-inverted-to-bg-7: color-mix(
1576
1793
  in srgb,
1577
- var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
1794
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1578
1795
  var(--ks-color-bg-inverted)
1579
1796
  );
1580
1797
  --ks-color-positive-inverted-to-bg-8: color-mix(
1581
1798
  in srgb,
1582
- var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
1799
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1583
1800
  var(--ks-color-bg-inverted)
1584
1801
  );
1585
1802
  --ks-color-positive-inverted-to-bg-9: color-mix(
1586
1803
  in srgb,
1587
- var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
1804
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1588
1805
  var(--ks-color-bg-inverted)
1589
1806
  );
1590
1807
  --ks-color-positive-to-fg-1: color-mix(
1591
1808
  in srgb,
1592
- var(--ks-color-positive) var(--color-scale-1, 10%),
1809
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1593
1810
  var(--ks-color-fg)
1594
1811
  );
1595
1812
  --ks-color-positive-to-fg-2: color-mix(
1596
1813
  in srgb,
1597
- var(--ks-color-positive) var(--color-scale-2, 20%),
1814
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1598
1815
  var(--ks-color-fg)
1599
1816
  );
1600
1817
  --ks-color-positive-to-fg-3: color-mix(
1601
1818
  in srgb,
1602
- var(--ks-color-positive) var(--color-scale-3, 30%),
1819
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1603
1820
  var(--ks-color-fg)
1604
1821
  );
1605
1822
  --ks-color-positive-to-fg-4: color-mix(
1606
1823
  in srgb,
1607
- var(--ks-color-positive) var(--color-scale-4, 40%),
1824
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1608
1825
  var(--ks-color-fg)
1609
1826
  );
1610
1827
  --ks-color-positive-to-fg-5: color-mix(
1611
1828
  in srgb,
1612
- var(--ks-color-positive) var(--color-scale-5, 50%),
1829
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1613
1830
  var(--ks-color-fg)
1614
1831
  );
1615
1832
  --ks-color-positive-to-fg-6: color-mix(
1616
1833
  in srgb,
1617
- var(--ks-color-positive) var(--color-scale-6, 60%),
1834
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1618
1835
  var(--ks-color-fg)
1619
1836
  );
1620
1837
  --ks-color-positive-to-fg-7: color-mix(
1621
1838
  in srgb,
1622
- var(--ks-color-positive) var(--color-scale-7, 70%),
1839
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1623
1840
  var(--ks-color-fg)
1624
1841
  );
1625
1842
  --ks-color-positive-to-fg-8: color-mix(
1626
1843
  in srgb,
1627
- var(--ks-color-positive) var(--color-scale-8, 80%),
1844
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1628
1845
  var(--ks-color-fg)
1629
1846
  );
1630
1847
  --ks-color-positive-to-fg-9: color-mix(
1631
1848
  in srgb,
1632
- var(--ks-color-positive) var(--color-scale-9, 90%),
1849
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1633
1850
  var(--ks-color-fg)
1634
1851
  );
1635
1852
  --ks-color-positive-inverted-to-fg-1: color-mix(
1636
1853
  in srgb,
1637
- var(--ks-color-positive-inverted) var(--color-scale-1, 10%),
1854
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1638
1855
  var(--ks-color-fg-inverted)
1639
1856
  );
1640
1857
  --ks-color-positive-inverted-to-fg-2: color-mix(
1641
1858
  in srgb,
1642
- var(--ks-color-positive-inverted) var(--color-scale-2, 20%),
1859
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1643
1860
  var(--ks-color-fg-inverted)
1644
1861
  );
1645
1862
  --ks-color-positive-inverted-to-fg-3: color-mix(
1646
1863
  in srgb,
1647
- var(--ks-color-positive-inverted) var(--color-scale-3, 30%),
1864
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1648
1865
  var(--ks-color-fg-inverted)
1649
1866
  );
1650
1867
  --ks-color-positive-inverted-to-fg-4: color-mix(
1651
1868
  in srgb,
1652
- var(--ks-color-positive-inverted) var(--color-scale-4, 40%),
1869
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1653
1870
  var(--ks-color-fg-inverted)
1654
1871
  );
1655
1872
  --ks-color-positive-inverted-to-fg-5: color-mix(
1656
1873
  in srgb,
1657
- var(--ks-color-positive-inverted) var(--color-scale-5, 50%),
1874
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1658
1875
  var(--ks-color-fg-inverted)
1659
1876
  );
1660
1877
  --ks-color-positive-inverted-to-fg-6: color-mix(
1661
1878
  in srgb,
1662
- var(--ks-color-positive-inverted) var(--color-scale-6, 60%),
1879
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1663
1880
  var(--ks-color-fg-inverted)
1664
1881
  );
1665
1882
  --ks-color-positive-inverted-to-fg-7: color-mix(
1666
1883
  in srgb,
1667
- var(--ks-color-positive-inverted) var(--color-scale-7, 70%),
1884
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1668
1885
  var(--ks-color-fg-inverted)
1669
1886
  );
1670
1887
  --ks-color-positive-inverted-to-fg-8: color-mix(
1671
1888
  in srgb,
1672
- var(--ks-color-positive-inverted) var(--color-scale-8, 80%),
1889
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1673
1890
  var(--ks-color-fg-inverted)
1674
1891
  );
1675
1892
  --ks-color-positive-inverted-to-fg-9: color-mix(
1676
1893
  in srgb,
1677
- var(--ks-color-positive-inverted) var(--color-scale-9, 90%),
1894
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1678
1895
  var(--ks-color-fg-inverted)
1679
1896
  );
1680
- --ks-color-negative-alpha-1: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-1, 10%), transparent);
1681
- --ks-color-negative-alpha-2: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-2, 20%), transparent);
1682
- --ks-color-negative-alpha-3: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-3, 30%), transparent);
1683
- --ks-color-negative-alpha-4: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-4, 40%), transparent);
1684
- --ks-color-negative-alpha-5: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-5, 50%), transparent);
1685
- --ks-color-negative-alpha-6: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-6, 60%), transparent);
1686
- --ks-color-negative-alpha-7: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-7, 70%), transparent);
1687
- --ks-color-negative-alpha-8: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-8, 80%), transparent);
1688
- --ks-color-negative-alpha-9: color-mix(in srgb, var(--ks-color-negative) var(--color-scale-9, 90%), transparent);
1897
+ --ks-color-negative-alpha-1: color-mix(
1898
+ in srgb,
1899
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
1900
+ transparent
1901
+ );
1902
+ --ks-color-negative-alpha-2: color-mix(
1903
+ in srgb,
1904
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
1905
+ transparent
1906
+ );
1907
+ --ks-color-negative-alpha-3: color-mix(
1908
+ in srgb,
1909
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
1910
+ transparent
1911
+ );
1912
+ --ks-color-negative-alpha-4: color-mix(
1913
+ in srgb,
1914
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
1915
+ transparent
1916
+ );
1917
+ --ks-color-negative-alpha-5: color-mix(
1918
+ in srgb,
1919
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
1920
+ transparent
1921
+ );
1922
+ --ks-color-negative-alpha-6: color-mix(
1923
+ in srgb,
1924
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
1925
+ transparent
1926
+ );
1927
+ --ks-color-negative-alpha-7: color-mix(
1928
+ in srgb,
1929
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
1930
+ transparent
1931
+ );
1932
+ --ks-color-negative-alpha-8: color-mix(
1933
+ in srgb,
1934
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
1935
+ transparent
1936
+ );
1937
+ --ks-color-negative-alpha-9: color-mix(
1938
+ in srgb,
1939
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
1940
+ transparent
1941
+ );
1689
1942
  --ks-color-negative-inverted-alpha-1: color-mix(
1690
1943
  in srgb,
1691
- var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
1944
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
1692
1945
  transparent
1693
1946
  );
1694
1947
  --ks-color-negative-inverted-alpha-2: color-mix(
1695
1948
  in srgb,
1696
- var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
1949
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
1697
1950
  transparent
1698
1951
  );
1699
1952
  --ks-color-negative-inverted-alpha-3: color-mix(
1700
1953
  in srgb,
1701
- var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
1954
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
1702
1955
  transparent
1703
1956
  );
1704
1957
  --ks-color-negative-inverted-alpha-4: color-mix(
1705
1958
  in srgb,
1706
- var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
1959
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
1707
1960
  transparent
1708
1961
  );
1709
1962
  --ks-color-negative-inverted-alpha-5: color-mix(
1710
1963
  in srgb,
1711
- var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
1964
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
1712
1965
  transparent
1713
1966
  );
1714
1967
  --ks-color-negative-inverted-alpha-6: color-mix(
1715
1968
  in srgb,
1716
- var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
1969
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
1717
1970
  transparent
1718
1971
  );
1719
1972
  --ks-color-negative-inverted-alpha-7: color-mix(
1720
1973
  in srgb,
1721
- var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
1974
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
1722
1975
  transparent
1723
1976
  );
1724
1977
  --ks-color-negative-inverted-alpha-8: color-mix(
1725
1978
  in srgb,
1726
- var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
1979
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
1727
1980
  transparent
1728
1981
  );
1729
1982
  --ks-color-negative-inverted-alpha-9: color-mix(
1730
1983
  in srgb,
1731
- var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
1984
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
1732
1985
  transparent
1733
1986
  );
1734
1987
  --ks-color-negative-to-bg-1: color-mix(
1735
1988
  in srgb,
1736
- var(--ks-color-negative) var(--color-scale-1, 10%),
1989
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
1737
1990
  var(--ks-color-bg)
1738
1991
  );
1739
1992
  --ks-color-negative-to-bg-2: color-mix(
1740
1993
  in srgb,
1741
- var(--ks-color-negative) var(--color-scale-2, 20%),
1994
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
1742
1995
  var(--ks-color-bg)
1743
1996
  );
1744
1997
  --ks-color-negative-to-bg-3: color-mix(
1745
1998
  in srgb,
1746
- var(--ks-color-negative) var(--color-scale-3, 30%),
1999
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
1747
2000
  var(--ks-color-bg)
1748
2001
  );
1749
2002
  --ks-color-negative-to-bg-4: color-mix(
1750
2003
  in srgb,
1751
- var(--ks-color-negative) var(--color-scale-4, 40%),
2004
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
1752
2005
  var(--ks-color-bg)
1753
2006
  );
1754
2007
  --ks-color-negative-to-bg-5: color-mix(
1755
2008
  in srgb,
1756
- var(--ks-color-negative) var(--color-scale-5, 50%),
2009
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
1757
2010
  var(--ks-color-bg)
1758
2011
  );
1759
2012
  --ks-color-negative-to-bg-6: color-mix(
1760
2013
  in srgb,
1761
- var(--ks-color-negative) var(--color-scale-6, 60%),
2014
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
1762
2015
  var(--ks-color-bg)
1763
2016
  );
1764
2017
  --ks-color-negative-to-bg-7: color-mix(
1765
2018
  in srgb,
1766
- var(--ks-color-negative) var(--color-scale-7, 70%),
2019
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
1767
2020
  var(--ks-color-bg)
1768
2021
  );
1769
2022
  --ks-color-negative-to-bg-8: color-mix(
1770
2023
  in srgb,
1771
- var(--ks-color-negative) var(--color-scale-8, 80%),
2024
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
1772
2025
  var(--ks-color-bg)
1773
2026
  );
1774
2027
  --ks-color-negative-to-bg-9: color-mix(
1775
2028
  in srgb,
1776
- var(--ks-color-negative) var(--color-scale-9, 90%),
2029
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
1777
2030
  var(--ks-color-bg)
1778
2031
  );
1779
2032
  --ks-color-negative-inverted-to-bg-1: color-mix(
1780
2033
  in srgb,
1781
- var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
2034
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
1782
2035
  var(--ks-color-bg-inverted)
1783
2036
  );
1784
2037
  --ks-color-negative-inverted-to-bg-2: color-mix(
1785
2038
  in srgb,
1786
- var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
2039
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
1787
2040
  var(--ks-color-bg-inverted)
1788
2041
  );
1789
2042
  --ks-color-negative-inverted-to-bg-3: color-mix(
1790
2043
  in srgb,
1791
- var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
2044
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
1792
2045
  var(--ks-color-bg-inverted)
1793
2046
  );
1794
2047
  --ks-color-negative-inverted-to-bg-4: color-mix(
1795
2048
  in srgb,
1796
- var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
2049
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
1797
2050
  var(--ks-color-bg-inverted)
1798
2051
  );
1799
2052
  --ks-color-negative-inverted-to-bg-5: color-mix(
1800
2053
  in srgb,
1801
- var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
2054
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
1802
2055
  var(--ks-color-bg-inverted)
1803
2056
  );
1804
2057
  --ks-color-negative-inverted-to-bg-6: color-mix(
1805
2058
  in srgb,
1806
- var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
2059
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
1807
2060
  var(--ks-color-bg-inverted)
1808
2061
  );
1809
2062
  --ks-color-negative-inverted-to-bg-7: color-mix(
1810
2063
  in srgb,
1811
- var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
2064
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
1812
2065
  var(--ks-color-bg-inverted)
1813
2066
  );
1814
2067
  --ks-color-negative-inverted-to-bg-8: color-mix(
1815
2068
  in srgb,
1816
- var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
2069
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
1817
2070
  var(--ks-color-bg-inverted)
1818
2071
  );
1819
2072
  --ks-color-negative-inverted-to-bg-9: color-mix(
1820
2073
  in srgb,
1821
- var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
2074
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
1822
2075
  var(--ks-color-bg-inverted)
1823
2076
  );
1824
2077
  --ks-color-negative-to-fg-1: color-mix(
1825
2078
  in srgb,
1826
- var(--ks-color-negative) var(--color-scale-1, 10%),
2079
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
1827
2080
  var(--ks-color-fg)
1828
2081
  );
1829
2082
  --ks-color-negative-to-fg-2: color-mix(
1830
2083
  in srgb,
1831
- var(--ks-color-negative) var(--color-scale-2, 20%),
2084
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
1832
2085
  var(--ks-color-fg)
1833
2086
  );
1834
2087
  --ks-color-negative-to-fg-3: color-mix(
1835
2088
  in srgb,
1836
- var(--ks-color-negative) var(--color-scale-3, 30%),
2089
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
1837
2090
  var(--ks-color-fg)
1838
2091
  );
1839
2092
  --ks-color-negative-to-fg-4: color-mix(
1840
2093
  in srgb,
1841
- var(--ks-color-negative) var(--color-scale-4, 40%),
2094
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
1842
2095
  var(--ks-color-fg)
1843
2096
  );
1844
2097
  --ks-color-negative-to-fg-5: color-mix(
1845
2098
  in srgb,
1846
- var(--ks-color-negative) var(--color-scale-5, 50%),
2099
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
1847
2100
  var(--ks-color-fg)
1848
2101
  );
1849
2102
  --ks-color-negative-to-fg-6: color-mix(
1850
2103
  in srgb,
1851
- var(--ks-color-negative) var(--color-scale-6, 60%),
2104
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
1852
2105
  var(--ks-color-fg)
1853
2106
  );
1854
2107
  --ks-color-negative-to-fg-7: color-mix(
1855
2108
  in srgb,
1856
- var(--ks-color-negative) var(--color-scale-7, 70%),
2109
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
1857
2110
  var(--ks-color-fg)
1858
2111
  );
1859
2112
  --ks-color-negative-to-fg-8: color-mix(
1860
2113
  in srgb,
1861
- var(--ks-color-negative) var(--color-scale-8, 80%),
2114
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
1862
2115
  var(--ks-color-fg)
1863
2116
  );
1864
2117
  --ks-color-negative-to-fg-9: color-mix(
1865
2118
  in srgb,
1866
- var(--ks-color-negative) var(--color-scale-9, 90%),
2119
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
1867
2120
  var(--ks-color-fg)
1868
2121
  );
1869
2122
  --ks-color-negative-inverted-to-fg-1: color-mix(
1870
2123
  in srgb,
1871
- var(--ks-color-negative-inverted) var(--color-scale-1, 10%),
2124
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
1872
2125
  var(--ks-color-fg-inverted)
1873
2126
  );
1874
2127
  --ks-color-negative-inverted-to-fg-2: color-mix(
1875
2128
  in srgb,
1876
- var(--ks-color-negative-inverted) var(--color-scale-2, 20%),
2129
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
1877
2130
  var(--ks-color-fg-inverted)
1878
2131
  );
1879
2132
  --ks-color-negative-inverted-to-fg-3: color-mix(
1880
2133
  in srgb,
1881
- var(--ks-color-negative-inverted) var(--color-scale-3, 30%),
2134
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
1882
2135
  var(--ks-color-fg-inverted)
1883
2136
  );
1884
2137
  --ks-color-negative-inverted-to-fg-4: color-mix(
1885
2138
  in srgb,
1886
- var(--ks-color-negative-inverted) var(--color-scale-4, 40%),
2139
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
1887
2140
  var(--ks-color-fg-inverted)
1888
2141
  );
1889
2142
  --ks-color-negative-inverted-to-fg-5: color-mix(
1890
2143
  in srgb,
1891
- var(--ks-color-negative-inverted) var(--color-scale-5, 50%),
2144
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
1892
2145
  var(--ks-color-fg-inverted)
1893
2146
  );
1894
2147
  --ks-color-negative-inverted-to-fg-6: color-mix(
1895
2148
  in srgb,
1896
- var(--ks-color-negative-inverted) var(--color-scale-6, 60%),
2149
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
1897
2150
  var(--ks-color-fg-inverted)
1898
2151
  );
1899
2152
  --ks-color-negative-inverted-to-fg-7: color-mix(
1900
2153
  in srgb,
1901
- var(--ks-color-negative-inverted) var(--color-scale-7, 70%),
2154
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
1902
2155
  var(--ks-color-fg-inverted)
1903
2156
  );
1904
2157
  --ks-color-negative-inverted-to-fg-8: color-mix(
1905
2158
  in srgb,
1906
- var(--ks-color-negative-inverted) var(--color-scale-8, 80%),
2159
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
1907
2160
  var(--ks-color-fg-inverted)
1908
2161
  );
1909
2162
  --ks-color-negative-inverted-to-fg-9: color-mix(
1910
2163
  in srgb,
1911
- var(--ks-color-negative-inverted) var(--color-scale-9, 90%),
2164
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
1912
2165
  var(--ks-color-fg-inverted)
1913
2166
  );
1914
2167
  --ks-color-informative-alpha-1: color-mix(
1915
2168
  in srgb,
1916
- var(--ks-color-informative) var(--color-scale-1, 10%),
2169
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
1917
2170
  transparent
1918
2171
  );
1919
2172
  --ks-color-informative-alpha-2: color-mix(
1920
2173
  in srgb,
1921
- var(--ks-color-informative) var(--color-scale-2, 20%),
2174
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
1922
2175
  transparent
1923
2176
  );
1924
2177
  --ks-color-informative-alpha-3: color-mix(
1925
2178
  in srgb,
1926
- var(--ks-color-informative) var(--color-scale-3, 30%),
2179
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
1927
2180
  transparent
1928
2181
  );
1929
2182
  --ks-color-informative-alpha-4: color-mix(
1930
2183
  in srgb,
1931
- var(--ks-color-informative) var(--color-scale-4, 40%),
2184
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
1932
2185
  transparent
1933
2186
  );
1934
2187
  --ks-color-informative-alpha-5: color-mix(
1935
2188
  in srgb,
1936
- var(--ks-color-informative) var(--color-scale-5, 50%),
2189
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
1937
2190
  transparent
1938
2191
  );
1939
2192
  --ks-color-informative-alpha-6: color-mix(
1940
2193
  in srgb,
1941
- var(--ks-color-informative) var(--color-scale-6, 60%),
2194
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
1942
2195
  transparent
1943
2196
  );
1944
2197
  --ks-color-informative-alpha-7: color-mix(
1945
2198
  in srgb,
1946
- var(--ks-color-informative) var(--color-scale-7, 70%),
2199
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
1947
2200
  transparent
1948
2201
  );
1949
2202
  --ks-color-informative-alpha-8: color-mix(
1950
2203
  in srgb,
1951
- var(--ks-color-informative) var(--color-scale-8, 80%),
2204
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
1952
2205
  transparent
1953
2206
  );
1954
2207
  --ks-color-informative-alpha-9: color-mix(
1955
2208
  in srgb,
1956
- var(--ks-color-informative) var(--color-scale-9, 90%),
2209
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
1957
2210
  transparent
1958
2211
  );
1959
2212
  --ks-color-informative-inverted-alpha-1: color-mix(
1960
2213
  in srgb,
1961
- var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
2214
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
1962
2215
  transparent
1963
2216
  );
1964
2217
  --ks-color-informative-inverted-alpha-2: color-mix(
1965
2218
  in srgb,
1966
- var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
2219
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
1967
2220
  transparent
1968
2221
  );
1969
2222
  --ks-color-informative-inverted-alpha-3: color-mix(
1970
2223
  in srgb,
1971
- var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
2224
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
1972
2225
  transparent
1973
2226
  );
1974
2227
  --ks-color-informative-inverted-alpha-4: color-mix(
1975
2228
  in srgb,
1976
- var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
2229
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
1977
2230
  transparent
1978
2231
  );
1979
2232
  --ks-color-informative-inverted-alpha-5: color-mix(
1980
2233
  in srgb,
1981
- var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
2234
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
1982
2235
  transparent
1983
2236
  );
1984
2237
  --ks-color-informative-inverted-alpha-6: color-mix(
1985
2238
  in srgb,
1986
- var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
2239
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
1987
2240
  transparent
1988
2241
  );
1989
2242
  --ks-color-informative-inverted-alpha-7: color-mix(
1990
2243
  in srgb,
1991
- var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
2244
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
1992
2245
  transparent
1993
2246
  );
1994
2247
  --ks-color-informative-inverted-alpha-8: color-mix(
1995
2248
  in srgb,
1996
- var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
2249
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
1997
2250
  transparent
1998
2251
  );
1999
2252
  --ks-color-informative-inverted-alpha-9: color-mix(
2000
2253
  in srgb,
2001
- var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
2254
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2002
2255
  transparent
2003
2256
  );
2004
2257
  --ks-color-informative-to-bg-1: color-mix(
2005
2258
  in srgb,
2006
- var(--ks-color-informative) var(--color-scale-1, 10%),
2259
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
2007
2260
  var(--ks-color-bg)
2008
2261
  );
2009
2262
  --ks-color-informative-to-bg-2: color-mix(
2010
2263
  in srgb,
2011
- var(--ks-color-informative) var(--color-scale-2, 20%),
2264
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
2012
2265
  var(--ks-color-bg)
2013
2266
  );
2014
2267
  --ks-color-informative-to-bg-3: color-mix(
2015
2268
  in srgb,
2016
- var(--ks-color-informative) var(--color-scale-3, 30%),
2269
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
2017
2270
  var(--ks-color-bg)
2018
2271
  );
2019
2272
  --ks-color-informative-to-bg-4: color-mix(
2020
2273
  in srgb,
2021
- var(--ks-color-informative) var(--color-scale-4, 40%),
2274
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
2022
2275
  var(--ks-color-bg)
2023
2276
  );
2024
2277
  --ks-color-informative-to-bg-5: color-mix(
2025
2278
  in srgb,
2026
- var(--ks-color-informative) var(--color-scale-5, 50%),
2279
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
2027
2280
  var(--ks-color-bg)
2028
2281
  );
2029
2282
  --ks-color-informative-to-bg-6: color-mix(
2030
2283
  in srgb,
2031
- var(--ks-color-informative) var(--color-scale-6, 60%),
2284
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
2032
2285
  var(--ks-color-bg)
2033
2286
  );
2034
2287
  --ks-color-informative-to-bg-7: color-mix(
2035
2288
  in srgb,
2036
- var(--ks-color-informative) var(--color-scale-7, 70%),
2289
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
2037
2290
  var(--ks-color-bg)
2038
2291
  );
2039
2292
  --ks-color-informative-to-bg-8: color-mix(
2040
2293
  in srgb,
2041
- var(--ks-color-informative) var(--color-scale-8, 80%),
2294
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
2042
2295
  var(--ks-color-bg)
2043
2296
  );
2044
2297
  --ks-color-informative-to-bg-9: color-mix(
2045
2298
  in srgb,
2046
- var(--ks-color-informative) var(--color-scale-9, 90%),
2299
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
2047
2300
  var(--ks-color-bg)
2048
2301
  );
2049
2302
  --ks-color-informative-inverted-to-bg-1: color-mix(
2050
2303
  in srgb,
2051
- var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
2304
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
2052
2305
  var(--ks-color-bg-inverted)
2053
2306
  );
2054
2307
  --ks-color-informative-inverted-to-bg-2: color-mix(
2055
2308
  in srgb,
2056
- var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
2309
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
2057
2310
  var(--ks-color-bg-inverted)
2058
2311
  );
2059
2312
  --ks-color-informative-inverted-to-bg-3: color-mix(
2060
2313
  in srgb,
2061
- var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
2314
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
2062
2315
  var(--ks-color-bg-inverted)
2063
2316
  );
2064
2317
  --ks-color-informative-inverted-to-bg-4: color-mix(
2065
2318
  in srgb,
2066
- var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
2319
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
2067
2320
  var(--ks-color-bg-inverted)
2068
2321
  );
2069
2322
  --ks-color-informative-inverted-to-bg-5: color-mix(
2070
2323
  in srgb,
2071
- var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
2324
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
2072
2325
  var(--ks-color-bg-inverted)
2073
2326
  );
2074
2327
  --ks-color-informative-inverted-to-bg-6: color-mix(
2075
2328
  in srgb,
2076
- var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
2329
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
2077
2330
  var(--ks-color-bg-inverted)
2078
2331
  );
2079
2332
  --ks-color-informative-inverted-to-bg-7: color-mix(
2080
2333
  in srgb,
2081
- var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
2334
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
2082
2335
  var(--ks-color-bg-inverted)
2083
2336
  );
2084
2337
  --ks-color-informative-inverted-to-bg-8: color-mix(
2085
2338
  in srgb,
2086
- var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
2339
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
2087
2340
  var(--ks-color-bg-inverted)
2088
2341
  );
2089
2342
  --ks-color-informative-inverted-to-bg-9: color-mix(
2090
2343
  in srgb,
2091
- var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
2344
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2092
2345
  var(--ks-color-bg-inverted)
2093
2346
  );
2094
2347
  --ks-color-informative-to-fg-1: color-mix(
2095
2348
  in srgb,
2096
- var(--ks-color-informative) var(--color-scale-1, 10%),
2349
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
2097
2350
  var(--ks-color-fg)
2098
2351
  );
2099
2352
  --ks-color-informative-to-fg-2: color-mix(
2100
2353
  in srgb,
2101
- var(--ks-color-informative) var(--color-scale-2, 20%),
2354
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
2102
2355
  var(--ks-color-fg)
2103
2356
  );
2104
2357
  --ks-color-informative-to-fg-3: color-mix(
2105
2358
  in srgb,
2106
- var(--ks-color-informative) var(--color-scale-3, 30%),
2359
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
2107
2360
  var(--ks-color-fg)
2108
2361
  );
2109
2362
  --ks-color-informative-to-fg-4: color-mix(
2110
2363
  in srgb,
2111
- var(--ks-color-informative) var(--color-scale-4, 40%),
2364
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
2112
2365
  var(--ks-color-fg)
2113
2366
  );
2114
2367
  --ks-color-informative-to-fg-5: color-mix(
2115
2368
  in srgb,
2116
- var(--ks-color-informative) var(--color-scale-5, 50%),
2369
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
2117
2370
  var(--ks-color-fg)
2118
2371
  );
2119
2372
  --ks-color-informative-to-fg-6: color-mix(
2120
2373
  in srgb,
2121
- var(--ks-color-informative) var(--color-scale-6, 60%),
2374
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
2122
2375
  var(--ks-color-fg)
2123
2376
  );
2124
2377
  --ks-color-informative-to-fg-7: color-mix(
2125
2378
  in srgb,
2126
- var(--ks-color-informative) var(--color-scale-7, 70%),
2379
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
2127
2380
  var(--ks-color-fg)
2128
2381
  );
2129
2382
  --ks-color-informative-to-fg-8: color-mix(
2130
2383
  in srgb,
2131
- var(--ks-color-informative) var(--color-scale-8, 80%),
2384
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
2132
2385
  var(--ks-color-fg)
2133
2386
  );
2134
2387
  --ks-color-informative-to-fg-9: color-mix(
2135
2388
  in srgb,
2136
- var(--ks-color-informative) var(--color-scale-9, 90%),
2389
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
2137
2390
  var(--ks-color-fg)
2138
2391
  );
2139
2392
  --ks-color-informative-inverted-to-fg-1: color-mix(
2140
2393
  in srgb,
2141
- var(--ks-color-informative-inverted) var(--color-scale-1, 10%),
2394
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
2142
2395
  var(--ks-color-fg-inverted)
2143
2396
  );
2144
2397
  --ks-color-informative-inverted-to-fg-2: color-mix(
2145
2398
  in srgb,
2146
- var(--ks-color-informative-inverted) var(--color-scale-2, 20%),
2399
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
2147
2400
  var(--ks-color-fg-inverted)
2148
2401
  );
2149
2402
  --ks-color-informative-inverted-to-fg-3: color-mix(
2150
2403
  in srgb,
2151
- var(--ks-color-informative-inverted) var(--color-scale-3, 30%),
2404
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
2152
2405
  var(--ks-color-fg-inverted)
2153
2406
  );
2154
2407
  --ks-color-informative-inverted-to-fg-4: color-mix(
2155
2408
  in srgb,
2156
- var(--ks-color-informative-inverted) var(--color-scale-4, 40%),
2409
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
2157
2410
  var(--ks-color-fg-inverted)
2158
2411
  );
2159
2412
  --ks-color-informative-inverted-to-fg-5: color-mix(
2160
2413
  in srgb,
2161
- var(--ks-color-informative-inverted) var(--color-scale-5, 50%),
2414
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
2162
2415
  var(--ks-color-fg-inverted)
2163
2416
  );
2164
2417
  --ks-color-informative-inverted-to-fg-6: color-mix(
2165
2418
  in srgb,
2166
- var(--ks-color-informative-inverted) var(--color-scale-6, 60%),
2419
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
2167
2420
  var(--ks-color-fg-inverted)
2168
2421
  );
2169
2422
  --ks-color-informative-inverted-to-fg-7: color-mix(
2170
2423
  in srgb,
2171
- var(--ks-color-informative-inverted) var(--color-scale-7, 70%),
2424
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
2172
2425
  var(--ks-color-fg-inverted)
2173
2426
  );
2174
2427
  --ks-color-informative-inverted-to-fg-8: color-mix(
2175
2428
  in srgb,
2176
- var(--ks-color-informative-inverted) var(--color-scale-8, 80%),
2429
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
2177
2430
  var(--ks-color-fg-inverted)
2178
2431
  );
2179
2432
  --ks-color-informative-inverted-to-fg-9: color-mix(
2180
2433
  in srgb,
2181
- var(--ks-color-informative-inverted) var(--color-scale-9, 90%),
2434
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2182
2435
  var(--ks-color-fg-inverted)
2183
2436
  );
2184
- --ks-color-notice-alpha-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), transparent);
2185
- --ks-color-notice-alpha-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), transparent);
2186
- --ks-color-notice-alpha-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), transparent);
2187
- --ks-color-notice-alpha-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), transparent);
2188
- --ks-color-notice-alpha-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), transparent);
2189
- --ks-color-notice-alpha-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), transparent);
2190
- --ks-color-notice-alpha-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), transparent);
2191
- --ks-color-notice-alpha-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), transparent);
2192
- --ks-color-notice-alpha-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), transparent);
2437
+ --ks-color-notice-alpha-1: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%), transparent);
2438
+ --ks-color-notice-alpha-2: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%), transparent);
2439
+ --ks-color-notice-alpha-3: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%), transparent);
2440
+ --ks-color-notice-alpha-4: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%), transparent);
2441
+ --ks-color-notice-alpha-5: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%), transparent);
2442
+ --ks-color-notice-alpha-6: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%), transparent);
2443
+ --ks-color-notice-alpha-7: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%), transparent);
2444
+ --ks-color-notice-alpha-8: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%), transparent);
2445
+ --ks-color-notice-alpha-9: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%), transparent);
2193
2446
  --ks-color-notice-inverted-alpha-1: color-mix(
2194
2447
  in srgb,
2195
- var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
2448
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2196
2449
  transparent
2197
2450
  );
2198
2451
  --ks-color-notice-inverted-alpha-2: color-mix(
2199
2452
  in srgb,
2200
- var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
2453
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2201
2454
  transparent
2202
2455
  );
2203
2456
  --ks-color-notice-inverted-alpha-3: color-mix(
2204
2457
  in srgb,
2205
- var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
2458
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2206
2459
  transparent
2207
2460
  );
2208
2461
  --ks-color-notice-inverted-alpha-4: color-mix(
2209
2462
  in srgb,
2210
- var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
2463
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2211
2464
  transparent
2212
2465
  );
2213
2466
  --ks-color-notice-inverted-alpha-5: color-mix(
2214
2467
  in srgb,
2215
- var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
2468
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2216
2469
  transparent
2217
2470
  );
2218
2471
  --ks-color-notice-inverted-alpha-6: color-mix(
2219
2472
  in srgb,
2220
- var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
2473
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2221
2474
  transparent
2222
2475
  );
2223
2476
  --ks-color-notice-inverted-alpha-7: color-mix(
2224
2477
  in srgb,
2225
- var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
2478
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2226
2479
  transparent
2227
2480
  );
2228
2481
  --ks-color-notice-inverted-alpha-8: color-mix(
2229
2482
  in srgb,
2230
- var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
2483
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2231
2484
  transparent
2232
2485
  );
2233
2486
  --ks-color-notice-inverted-alpha-9: color-mix(
2234
2487
  in srgb,
2235
- var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
2488
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2236
2489
  transparent
2237
2490
  );
2238
- --ks-color-notice-to-bg-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), var(--ks-color-bg));
2239
- --ks-color-notice-to-bg-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), var(--ks-color-bg));
2240
- --ks-color-notice-to-bg-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), var(--ks-color-bg));
2241
- --ks-color-notice-to-bg-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), var(--ks-color-bg));
2242
- --ks-color-notice-to-bg-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), var(--ks-color-bg));
2243
- --ks-color-notice-to-bg-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), var(--ks-color-bg));
2244
- --ks-color-notice-to-bg-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), var(--ks-color-bg));
2245
- --ks-color-notice-to-bg-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), var(--ks-color-bg));
2246
- --ks-color-notice-to-bg-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), var(--ks-color-bg));
2491
+ --ks-color-notice-to-bg-1: color-mix(
2492
+ in srgb,
2493
+ var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
2494
+ var(--ks-color-bg)
2495
+ );
2496
+ --ks-color-notice-to-bg-2: color-mix(
2497
+ in srgb,
2498
+ var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
2499
+ var(--ks-color-bg)
2500
+ );
2501
+ --ks-color-notice-to-bg-3: color-mix(
2502
+ in srgb,
2503
+ var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
2504
+ var(--ks-color-bg)
2505
+ );
2506
+ --ks-color-notice-to-bg-4: color-mix(
2507
+ in srgb,
2508
+ var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
2509
+ var(--ks-color-bg)
2510
+ );
2511
+ --ks-color-notice-to-bg-5: color-mix(
2512
+ in srgb,
2513
+ var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
2514
+ var(--ks-color-bg)
2515
+ );
2516
+ --ks-color-notice-to-bg-6: color-mix(
2517
+ in srgb,
2518
+ var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
2519
+ var(--ks-color-bg)
2520
+ );
2521
+ --ks-color-notice-to-bg-7: color-mix(
2522
+ in srgb,
2523
+ var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
2524
+ var(--ks-color-bg)
2525
+ );
2526
+ --ks-color-notice-to-bg-8: color-mix(
2527
+ in srgb,
2528
+ var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
2529
+ var(--ks-color-bg)
2530
+ );
2531
+ --ks-color-notice-to-bg-9: color-mix(
2532
+ in srgb,
2533
+ var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%),
2534
+ var(--ks-color-bg)
2535
+ );
2247
2536
  --ks-color-notice-inverted-to-bg-1: color-mix(
2248
2537
  in srgb,
2249
- var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
2538
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2250
2539
  var(--ks-color-bg-inverted)
2251
2540
  );
2252
2541
  --ks-color-notice-inverted-to-bg-2: color-mix(
2253
2542
  in srgb,
2254
- var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
2543
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2255
2544
  var(--ks-color-bg-inverted)
2256
2545
  );
2257
2546
  --ks-color-notice-inverted-to-bg-3: color-mix(
2258
2547
  in srgb,
2259
- var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
2548
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2260
2549
  var(--ks-color-bg-inverted)
2261
2550
  );
2262
2551
  --ks-color-notice-inverted-to-bg-4: color-mix(
2263
2552
  in srgb,
2264
- var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
2553
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2265
2554
  var(--ks-color-bg-inverted)
2266
2555
  );
2267
2556
  --ks-color-notice-inverted-to-bg-5: color-mix(
2268
2557
  in srgb,
2269
- var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
2558
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2270
2559
  var(--ks-color-bg-inverted)
2271
2560
  );
2272
2561
  --ks-color-notice-inverted-to-bg-6: color-mix(
2273
2562
  in srgb,
2274
- var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
2563
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2275
2564
  var(--ks-color-bg-inverted)
2276
2565
  );
2277
2566
  --ks-color-notice-inverted-to-bg-7: color-mix(
2278
2567
  in srgb,
2279
- var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
2568
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2280
2569
  var(--ks-color-bg-inverted)
2281
2570
  );
2282
2571
  --ks-color-notice-inverted-to-bg-8: color-mix(
2283
2572
  in srgb,
2284
- var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
2573
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2285
2574
  var(--ks-color-bg-inverted)
2286
2575
  );
2287
2576
  --ks-color-notice-inverted-to-bg-9: color-mix(
2288
2577
  in srgb,
2289
- var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
2578
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2290
2579
  var(--ks-color-bg-inverted)
2291
2580
  );
2292
- --ks-color-notice-to-fg-1: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-1, 10%), var(--ks-color-fg));
2293
- --ks-color-notice-to-fg-2: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-2, 20%), var(--ks-color-fg));
2294
- --ks-color-notice-to-fg-3: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-3, 30%), var(--ks-color-fg));
2295
- --ks-color-notice-to-fg-4: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-4, 40%), var(--ks-color-fg));
2296
- --ks-color-notice-to-fg-5: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-5, 50%), var(--ks-color-fg));
2297
- --ks-color-notice-to-fg-6: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-6, 60%), var(--ks-color-fg));
2298
- --ks-color-notice-to-fg-7: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-7, 70%), var(--ks-color-fg));
2299
- --ks-color-notice-to-fg-8: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-8, 80%), var(--ks-color-fg));
2300
- --ks-color-notice-to-fg-9: color-mix(in srgb, var(--ks-color-notice) var(--color-scale-9, 90%), var(--ks-color-fg));
2581
+ --ks-color-notice-to-fg-1: color-mix(
2582
+ in srgb,
2583
+ var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
2584
+ var(--ks-color-fg)
2585
+ );
2586
+ --ks-color-notice-to-fg-2: color-mix(
2587
+ in srgb,
2588
+ var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
2589
+ var(--ks-color-fg)
2590
+ );
2591
+ --ks-color-notice-to-fg-3: color-mix(
2592
+ in srgb,
2593
+ var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
2594
+ var(--ks-color-fg)
2595
+ );
2596
+ --ks-color-notice-to-fg-4: color-mix(
2597
+ in srgb,
2598
+ var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
2599
+ var(--ks-color-fg)
2600
+ );
2601
+ --ks-color-notice-to-fg-5: color-mix(
2602
+ in srgb,
2603
+ var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
2604
+ var(--ks-color-fg)
2605
+ );
2606
+ --ks-color-notice-to-fg-6: color-mix(
2607
+ in srgb,
2608
+ var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
2609
+ var(--ks-color-fg)
2610
+ );
2611
+ --ks-color-notice-to-fg-7: color-mix(
2612
+ in srgb,
2613
+ var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
2614
+ var(--ks-color-fg)
2615
+ );
2616
+ --ks-color-notice-to-fg-8: color-mix(
2617
+ in srgb,
2618
+ var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
2619
+ var(--ks-color-fg)
2620
+ );
2621
+ --ks-color-notice-to-fg-9: color-mix(
2622
+ in srgb,
2623
+ var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%),
2624
+ var(--ks-color-fg)
2625
+ );
2301
2626
  --ks-color-notice-inverted-to-fg-1: color-mix(
2302
2627
  in srgb,
2303
- var(--ks-color-notice-inverted) var(--color-scale-1, 10%),
2628
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2304
2629
  var(--ks-color-fg-inverted)
2305
2630
  );
2306
2631
  --ks-color-notice-inverted-to-fg-2: color-mix(
2307
2632
  in srgb,
2308
- var(--ks-color-notice-inverted) var(--color-scale-2, 20%),
2633
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2309
2634
  var(--ks-color-fg-inverted)
2310
2635
  );
2311
2636
  --ks-color-notice-inverted-to-fg-3: color-mix(
2312
2637
  in srgb,
2313
- var(--ks-color-notice-inverted) var(--color-scale-3, 30%),
2638
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2314
2639
  var(--ks-color-fg-inverted)
2315
2640
  );
2316
2641
  --ks-color-notice-inverted-to-fg-4: color-mix(
2317
2642
  in srgb,
2318
- var(--ks-color-notice-inverted) var(--color-scale-4, 40%),
2643
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2319
2644
  var(--ks-color-fg-inverted)
2320
2645
  );
2321
2646
  --ks-color-notice-inverted-to-fg-5: color-mix(
2322
2647
  in srgb,
2323
- var(--ks-color-notice-inverted) var(--color-scale-5, 50%),
2648
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2324
2649
  var(--ks-color-fg-inverted)
2325
2650
  );
2326
2651
  --ks-color-notice-inverted-to-fg-6: color-mix(
2327
2652
  in srgb,
2328
- var(--ks-color-notice-inverted) var(--color-scale-6, 60%),
2653
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2329
2654
  var(--ks-color-fg-inverted)
2330
2655
  );
2331
2656
  --ks-color-notice-inverted-to-fg-7: color-mix(
2332
2657
  in srgb,
2333
- var(--ks-color-notice-inverted) var(--color-scale-7, 70%),
2658
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2334
2659
  var(--ks-color-fg-inverted)
2335
2660
  );
2336
2661
  --ks-color-notice-inverted-to-fg-8: color-mix(
2337
2662
  in srgb,
2338
- var(--ks-color-notice-inverted) var(--color-scale-8, 80%),
2663
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2339
2664
  var(--ks-color-fg-inverted)
2340
2665
  );
2341
2666
  --ks-color-notice-inverted-to-fg-9: color-mix(
2342
2667
  in srgb,
2343
- var(--ks-color-notice-inverted) var(--color-scale-9, 90%),
2668
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2344
2669
  var(--ks-color-fg-inverted)
2345
2670
  );
2346
2671
  }
@@ -2349,6 +2674,15 @@ Breakpoint Factor: Higher bp factor means large spacings increase
2349
2674
  [ks-inverted=true],
2350
2675
  [ks-inverted=false],
2351
2676
  [ks-theme] {
2677
+ --ks-font-family-display: var(--ks-brand-font-family-display);
2678
+ --ks-font-family-copy: var(--ks-brand-font-family-copy);
2679
+ --ks-font-family-interface: var(--ks-brand-font-family-interface);
2680
+ --ks-font-family-mono: var(--ks-brand-font-family-mono);
2681
+ --ks-font-weight-light: var(--ks-brand-font-weight-light);
2682
+ --ks-font-weight-regular: var(--ks-brand-font-weight-regular);
2683
+ --ks-font-weight-medium: var(--ks-brand-font-weight-medium);
2684
+ --ks-font-weight-semi-bold: var(--ks-brand-font-weight-semi-bold);
2685
+ --ks-font-weight-bold: var(--ks-brand-font-weight-bold);
2352
2686
  --ks-line-height-display-base-factor: 1.15;
2353
2687
  --ks-line-height-display-shrink-factor: 1;
2354
2688
  --ks-line-height-display-grow-factor: 1;
@@ -3179,6 +3513,11 @@ Breakpoint Factor: Higher bp factor means large spacings increase
3179
3513
  }
3180
3514
  }
3181
3515
  :root {
3516
+ --ks-border-width-default: var(--ks-brand-border-width-default);
3517
+ --ks-border-width-emphasized: var(--ks-brand-border-width-emphasized);
3518
+ --ks-border-radius-control: var(--ks-brand-border-radius-control);
3519
+ --ks-border-radius-card: var(--ks-brand-border-radius-card);
3520
+ --ks-border-radius-surface: var(--ks-brand-border-radius-surface);
3182
3521
  --ks-border-radius-pill: 999px;
3183
3522
  --ks-border-radius-circle: 50%;
3184
3523
  }