@airframeui/tokens 0.1.4 → 0.2.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.
- package/README.md +1 -1
- package/dist/catalog.json +306 -54
- package/dist/tokens.css +40 -1
- package/dist/tokens.js +335 -55
- package/dist/tokens.json +335 -55
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -69,7 +69,7 @@ Override variables in your own CSS — no rebuild of this package:
|
|
|
69
69
|
}
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
See [Theming](https://airframeui.com/docs/theming), [Tokens](https://airframeui.com/docs/tokens), and [
|
|
72
|
+
See [Theming](https://airframeui.com/docs/theming), [Tokens](https://airframeui.com/docs/tokens), and [Token source of truth](https://airframeui.com/docs/token-source-of-truth) (Figma Variables export is on the [roadmap](https://airframeui.com/docs/roadmap)).
|
|
73
73
|
|
|
74
74
|
## Token model
|
|
75
75
|
|
package/dist/catalog.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
|
-
"generatedAt": "2026-08-
|
|
4
|
-
"count":
|
|
3
|
+
"generatedAt": "2026-08-18T02:23:06.361Z",
|
|
4
|
+
"count": 362
|
|
5
5
|
},
|
|
6
6
|
"groups": [
|
|
7
7
|
{
|
|
@@ -424,15 +424,15 @@
|
|
|
424
424
|
"value": "var(--af-base-primary--light)",
|
|
425
425
|
"css": {
|
|
426
426
|
"light": "#0876dd",
|
|
427
|
-
"dark": "#
|
|
427
|
+
"dark": "#1678D4",
|
|
428
428
|
"hc-light": "#0876dd",
|
|
429
|
-
"hc-dark": "#
|
|
429
|
+
"hc-dark": "#1678D4"
|
|
430
430
|
},
|
|
431
431
|
"hex": {
|
|
432
432
|
"light": "#0876dd",
|
|
433
|
-
"dark": "#
|
|
433
|
+
"dark": "#1678d4",
|
|
434
434
|
"hc-light": "#0876dd",
|
|
435
|
-
"hc-dark": "#
|
|
435
|
+
"hc-dark": "#1678d4"
|
|
436
436
|
}
|
|
437
437
|
},
|
|
438
438
|
{
|
|
@@ -442,9 +442,9 @@
|
|
|
442
442
|
"group": "color-primitive",
|
|
443
443
|
"kind": "stored",
|
|
444
444
|
"description": "Dark stored value for --af-base-primary.",
|
|
445
|
-
"value": "#
|
|
445
|
+
"value": "#1678D4",
|
|
446
446
|
"hex": {
|
|
447
|
-
"dark": "#
|
|
447
|
+
"dark": "#1678d4"
|
|
448
448
|
}
|
|
449
449
|
},
|
|
450
450
|
{
|
|
@@ -693,6 +693,42 @@
|
|
|
693
693
|
"description": "af-btn pressed brightness filter.",
|
|
694
694
|
"value": "0.82"
|
|
695
695
|
},
|
|
696
|
+
{
|
|
697
|
+
"name": "--af-btn-border",
|
|
698
|
+
"key": "btn-border",
|
|
699
|
+
"category": "component",
|
|
700
|
+
"group": "component",
|
|
701
|
+
"kind": "static",
|
|
702
|
+
"description": "Master filled af-btn border color. Transparent by default (borders off). Set to a color, or to var(--af-btn-border-auto), to paint filled buttons. Ghost and link ignore this.",
|
|
703
|
+
"value": "transparent"
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "--af-btn-border-auto",
|
|
707
|
+
"key": "btn-border-auto",
|
|
708
|
+
"category": "component",
|
|
709
|
+
"group": "component",
|
|
710
|
+
"kind": "static",
|
|
711
|
+
"description": "Per-variant automatic filled-button border tint. Unset at :root; each filled .af-btn remaps it. Set --af-btn-border to var(--af-btn-border-auto) (on :root or a wrapper) to enable borders without picking hexes.",
|
|
712
|
+
"value": "initial"
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"name": "--af-btn-border-focus",
|
|
716
|
+
"key": "btn-border-focus",
|
|
717
|
+
"category": "component",
|
|
718
|
+
"group": "component",
|
|
719
|
+
"kind": "static",
|
|
720
|
+
"description": "Master filled af-btn focus border (chrome in addition to the focus ring). Unset by default; falls back to the rest border.",
|
|
721
|
+
"value": "initial"
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "--af-btn-border-hover",
|
|
725
|
+
"key": "btn-border-hover",
|
|
726
|
+
"category": "component",
|
|
727
|
+
"group": "component",
|
|
728
|
+
"kind": "static",
|
|
729
|
+
"description": "Master filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
730
|
+
"value": "initial"
|
|
731
|
+
},
|
|
696
732
|
{
|
|
697
733
|
"name": "--af-btn-border-width",
|
|
698
734
|
"key": "btn-border-width",
|
|
@@ -702,6 +738,33 @@
|
|
|
702
738
|
"description": "af-btn border width.",
|
|
703
739
|
"value": "1px"
|
|
704
740
|
},
|
|
741
|
+
{
|
|
742
|
+
"name": "--af-btn-danger-border",
|
|
743
|
+
"key": "btn-danger-border",
|
|
744
|
+
"category": "component",
|
|
745
|
+
"group": "component",
|
|
746
|
+
"kind": "static",
|
|
747
|
+
"description": "Danger filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
748
|
+
"value": "initial"
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
"name": "--af-btn-danger-border-focus",
|
|
752
|
+
"key": "btn-danger-border-focus",
|
|
753
|
+
"category": "component",
|
|
754
|
+
"group": "component",
|
|
755
|
+
"kind": "static",
|
|
756
|
+
"description": "Danger filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
757
|
+
"value": "initial"
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
"name": "--af-btn-danger-border-hover",
|
|
761
|
+
"key": "btn-danger-border-hover",
|
|
762
|
+
"category": "component",
|
|
763
|
+
"group": "component",
|
|
764
|
+
"kind": "static",
|
|
765
|
+
"description": "Danger filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
766
|
+
"value": "initial"
|
|
767
|
+
},
|
|
705
768
|
{
|
|
706
769
|
"name": "--af-btn-default-active",
|
|
707
770
|
"key": "btn-default-active",
|
|
@@ -718,9 +781,9 @@
|
|
|
718
781
|
},
|
|
719
782
|
"hex": {
|
|
720
783
|
"light": "#0761b5",
|
|
721
|
-
"dark": "#
|
|
784
|
+
"dark": "#1262ae",
|
|
722
785
|
"hc-light": "#0761b5",
|
|
723
|
-
"hc-dark": "#
|
|
786
|
+
"hc-dark": "#1262ae"
|
|
724
787
|
}
|
|
725
788
|
},
|
|
726
789
|
{
|
|
@@ -739,11 +802,38 @@
|
|
|
739
802
|
},
|
|
740
803
|
"hex": {
|
|
741
804
|
"light": "#0876dd",
|
|
742
|
-
"dark": "#
|
|
805
|
+
"dark": "#1678d4",
|
|
743
806
|
"hc-light": "#0876dd",
|
|
744
|
-
"hc-dark": "#
|
|
807
|
+
"hc-dark": "#1678d4"
|
|
745
808
|
}
|
|
746
809
|
},
|
|
810
|
+
{
|
|
811
|
+
"name": "--af-btn-default-border",
|
|
812
|
+
"key": "btn-default-border",
|
|
813
|
+
"category": "component",
|
|
814
|
+
"group": "component",
|
|
815
|
+
"kind": "static",
|
|
816
|
+
"description": "Primary/default filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
817
|
+
"value": "initial"
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"name": "--af-btn-default-border-focus",
|
|
821
|
+
"key": "btn-default-border-focus",
|
|
822
|
+
"category": "component",
|
|
823
|
+
"group": "component",
|
|
824
|
+
"kind": "static",
|
|
825
|
+
"description": "Primary/default filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
826
|
+
"value": "initial"
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
"name": "--af-btn-default-border-hover",
|
|
830
|
+
"key": "btn-default-border-hover",
|
|
831
|
+
"category": "component",
|
|
832
|
+
"group": "component",
|
|
833
|
+
"kind": "static",
|
|
834
|
+
"description": "Primary/default filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
835
|
+
"value": "initial"
|
|
836
|
+
},
|
|
747
837
|
{
|
|
748
838
|
"name": "--af-btn-default-color",
|
|
749
839
|
"key": "btn-default-color",
|
|
@@ -781,9 +871,9 @@
|
|
|
781
871
|
},
|
|
782
872
|
"hex": {
|
|
783
873
|
"light": "#0768c2",
|
|
784
|
-
"dark": "#
|
|
874
|
+
"dark": "#136abb",
|
|
785
875
|
"hc-light": "#0768c2",
|
|
786
|
-
"hc-dark": "#
|
|
876
|
+
"hc-dark": "#136abb"
|
|
787
877
|
}
|
|
788
878
|
},
|
|
789
879
|
{
|
|
@@ -804,6 +894,15 @@
|
|
|
804
894
|
"description": "Gap between af-btn label and icon.",
|
|
805
895
|
"value": "var(--af-space-2)"
|
|
806
896
|
},
|
|
897
|
+
{
|
|
898
|
+
"name": "--af-btn-ghost-border",
|
|
899
|
+
"key": "btn-ghost-border",
|
|
900
|
+
"category": "component",
|
|
901
|
+
"group": "component",
|
|
902
|
+
"kind": "static",
|
|
903
|
+
"description": "Ghost af-btn border. Transparent by default; does not follow --af-btn-border.",
|
|
904
|
+
"value": "transparent"
|
|
905
|
+
},
|
|
807
906
|
{
|
|
808
907
|
"name": "--af-btn-hover-brightness",
|
|
809
908
|
"key": "btn-hover-brightness",
|
|
@@ -831,6 +930,33 @@
|
|
|
831
930
|
"description": "Icon size inside af-btn.",
|
|
832
931
|
"value": "1.25rem"
|
|
833
932
|
},
|
|
933
|
+
{
|
|
934
|
+
"name": "--af-btn-info-border",
|
|
935
|
+
"key": "btn-info-border",
|
|
936
|
+
"category": "component",
|
|
937
|
+
"group": "component",
|
|
938
|
+
"kind": "static",
|
|
939
|
+
"description": "Info filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
940
|
+
"value": "initial"
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
"name": "--af-btn-info-border-focus",
|
|
944
|
+
"key": "btn-info-border-focus",
|
|
945
|
+
"category": "component",
|
|
946
|
+
"group": "component",
|
|
947
|
+
"kind": "static",
|
|
948
|
+
"description": "Info filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
949
|
+
"value": "initial"
|
|
950
|
+
},
|
|
951
|
+
{
|
|
952
|
+
"name": "--af-btn-info-border-hover",
|
|
953
|
+
"key": "btn-info-border-hover",
|
|
954
|
+
"category": "component",
|
|
955
|
+
"group": "component",
|
|
956
|
+
"kind": "static",
|
|
957
|
+
"description": "Info filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
958
|
+
"value": "initial"
|
|
959
|
+
},
|
|
834
960
|
{
|
|
835
961
|
"name": "--af-btn-min-height",
|
|
836
962
|
"key": "btn-min-height",
|
|
@@ -856,9 +982,9 @@
|
|
|
856
982
|
},
|
|
857
983
|
"hex": {
|
|
858
984
|
"light": "#d7e9fa",
|
|
859
|
-
"dark": "#
|
|
985
|
+
"dark": "#13263d",
|
|
860
986
|
"hc-light": "#d7e9fa",
|
|
861
|
-
"hc-dark": "#
|
|
987
|
+
"hc-dark": "#192938"
|
|
862
988
|
}
|
|
863
989
|
},
|
|
864
990
|
{
|
|
@@ -877,9 +1003,9 @@
|
|
|
877
1003
|
},
|
|
878
1004
|
"hex": {
|
|
879
1005
|
"light": "#0876dd",
|
|
880
|
-
"dark": "#
|
|
1006
|
+
"dark": "#1678d4",
|
|
881
1007
|
"hc-light": "#0876dd",
|
|
882
|
-
"hc-dark": "#
|
|
1008
|
+
"hc-dark": "#1678d4"
|
|
883
1009
|
}
|
|
884
1010
|
},
|
|
885
1011
|
{
|
|
@@ -898,9 +1024,9 @@
|
|
|
898
1024
|
},
|
|
899
1025
|
"hex": {
|
|
900
1026
|
"light": "#0876dd",
|
|
901
|
-
"dark": "#
|
|
1027
|
+
"dark": "#1678d4",
|
|
902
1028
|
"hc-light": "#0876dd",
|
|
903
|
-
"hc-dark": "#
|
|
1029
|
+
"hc-dark": "#1678d4"
|
|
904
1030
|
}
|
|
905
1031
|
},
|
|
906
1032
|
{
|
|
@@ -919,9 +1045,9 @@
|
|
|
919
1045
|
},
|
|
920
1046
|
"hex": {
|
|
921
1047
|
"light": "#0768c2",
|
|
922
|
-
"dark": "#
|
|
1048
|
+
"dark": "#136abb",
|
|
923
1049
|
"hc-light": "#0768c2",
|
|
924
|
-
"hc-dark": "#
|
|
1050
|
+
"hc-dark": "#136abb"
|
|
925
1051
|
}
|
|
926
1052
|
},
|
|
927
1053
|
{
|
|
@@ -940,9 +1066,9 @@
|
|
|
940
1066
|
},
|
|
941
1067
|
"hex": {
|
|
942
1068
|
"light": "#e1effb",
|
|
943
|
-
"dark": "#
|
|
1069
|
+
"dark": "#122236",
|
|
944
1070
|
"hc-light": "#e1effb",
|
|
945
|
-
"hc-dark": "#
|
|
1071
|
+
"hc-dark": "#1a2530"
|
|
946
1072
|
}
|
|
947
1073
|
},
|
|
948
1074
|
{
|
|
@@ -1014,6 +1140,33 @@
|
|
|
1014
1140
|
"hc-dark": "#dbe1f4"
|
|
1015
1141
|
}
|
|
1016
1142
|
},
|
|
1143
|
+
{
|
|
1144
|
+
"name": "--af-btn-secondary-border",
|
|
1145
|
+
"key": "btn-secondary-border",
|
|
1146
|
+
"category": "component",
|
|
1147
|
+
"group": "component",
|
|
1148
|
+
"kind": "static",
|
|
1149
|
+
"description": "Secondary filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
1150
|
+
"value": "initial"
|
|
1151
|
+
},
|
|
1152
|
+
{
|
|
1153
|
+
"name": "--af-btn-secondary-border-focus",
|
|
1154
|
+
"key": "btn-secondary-border-focus",
|
|
1155
|
+
"category": "component",
|
|
1156
|
+
"group": "component",
|
|
1157
|
+
"kind": "static",
|
|
1158
|
+
"description": "Secondary filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
1159
|
+
"value": "initial"
|
|
1160
|
+
},
|
|
1161
|
+
{
|
|
1162
|
+
"name": "--af-btn-secondary-border-hover",
|
|
1163
|
+
"key": "btn-secondary-border-hover",
|
|
1164
|
+
"category": "component",
|
|
1165
|
+
"group": "component",
|
|
1166
|
+
"kind": "static",
|
|
1167
|
+
"description": "Secondary filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
1168
|
+
"value": "initial"
|
|
1169
|
+
},
|
|
1017
1170
|
{
|
|
1018
1171
|
"name": "--af-btn-secondary-color",
|
|
1019
1172
|
"key": "btn-secondary-color",
|
|
@@ -1056,6 +1209,87 @@
|
|
|
1056
1209
|
"hc-dark": "#c1c6d7"
|
|
1057
1210
|
}
|
|
1058
1211
|
},
|
|
1212
|
+
{
|
|
1213
|
+
"name": "--af-btn-success-border",
|
|
1214
|
+
"key": "btn-success-border",
|
|
1215
|
+
"category": "component",
|
|
1216
|
+
"group": "component",
|
|
1217
|
+
"kind": "static",
|
|
1218
|
+
"description": "Success filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
1219
|
+
"value": "initial"
|
|
1220
|
+
},
|
|
1221
|
+
{
|
|
1222
|
+
"name": "--af-btn-success-border-focus",
|
|
1223
|
+
"key": "btn-success-border-focus",
|
|
1224
|
+
"category": "component",
|
|
1225
|
+
"group": "component",
|
|
1226
|
+
"kind": "static",
|
|
1227
|
+
"description": "Success filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
1228
|
+
"value": "initial"
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"name": "--af-btn-success-border-hover",
|
|
1232
|
+
"key": "btn-success-border-hover",
|
|
1233
|
+
"category": "component",
|
|
1234
|
+
"group": "component",
|
|
1235
|
+
"kind": "static",
|
|
1236
|
+
"description": "Success filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
1237
|
+
"value": "initial"
|
|
1238
|
+
},
|
|
1239
|
+
{
|
|
1240
|
+
"name": "--af-btn-tertiary-border",
|
|
1241
|
+
"key": "btn-tertiary-border",
|
|
1242
|
+
"category": "component",
|
|
1243
|
+
"group": "component",
|
|
1244
|
+
"kind": "static",
|
|
1245
|
+
"description": "Tertiary filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
1246
|
+
"value": "initial"
|
|
1247
|
+
},
|
|
1248
|
+
{
|
|
1249
|
+
"name": "--af-btn-tertiary-border-focus",
|
|
1250
|
+
"key": "btn-tertiary-border-focus",
|
|
1251
|
+
"category": "component",
|
|
1252
|
+
"group": "component",
|
|
1253
|
+
"kind": "static",
|
|
1254
|
+
"description": "Tertiary filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
1255
|
+
"value": "initial"
|
|
1256
|
+
},
|
|
1257
|
+
{
|
|
1258
|
+
"name": "--af-btn-tertiary-border-hover",
|
|
1259
|
+
"key": "btn-tertiary-border-hover",
|
|
1260
|
+
"category": "component",
|
|
1261
|
+
"group": "component",
|
|
1262
|
+
"kind": "static",
|
|
1263
|
+
"description": "Tertiary filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
1264
|
+
"value": "initial"
|
|
1265
|
+
},
|
|
1266
|
+
{
|
|
1267
|
+
"name": "--af-btn-warning-border",
|
|
1268
|
+
"key": "btn-warning-border",
|
|
1269
|
+
"category": "component",
|
|
1270
|
+
"group": "component",
|
|
1271
|
+
"kind": "static",
|
|
1272
|
+
"description": "Warning filled af-btn border. Unset by default; falls back to --af-btn-border.",
|
|
1273
|
+
"value": "initial"
|
|
1274
|
+
},
|
|
1275
|
+
{
|
|
1276
|
+
"name": "--af-btn-warning-border-focus",
|
|
1277
|
+
"key": "btn-warning-border-focus",
|
|
1278
|
+
"category": "component",
|
|
1279
|
+
"group": "component",
|
|
1280
|
+
"kind": "static",
|
|
1281
|
+
"description": "Warning filled af-btn focus border. Unset by default; falls back to the rest border.",
|
|
1282
|
+
"value": "initial"
|
|
1283
|
+
},
|
|
1284
|
+
{
|
|
1285
|
+
"name": "--af-btn-warning-border-hover",
|
|
1286
|
+
"key": "btn-warning-border-hover",
|
|
1287
|
+
"category": "component",
|
|
1288
|
+
"group": "component",
|
|
1289
|
+
"kind": "static",
|
|
1290
|
+
"description": "Warning filled af-btn hover border. Unset by default; falls back to the rest border.",
|
|
1291
|
+
"value": "initial"
|
|
1292
|
+
},
|
|
1059
1293
|
{
|
|
1060
1294
|
"name": "--af-card-border-width",
|
|
1061
1295
|
"key": "card-border-width",
|
|
@@ -1135,9 +1369,9 @@
|
|
|
1135
1369
|
},
|
|
1136
1370
|
"hex": {
|
|
1137
1371
|
"light": "#0876dd",
|
|
1138
|
-
"dark": "#
|
|
1372
|
+
"dark": "#1678d4",
|
|
1139
1373
|
"hc-light": "#0876dd",
|
|
1140
|
-
"hc-dark": "#
|
|
1374
|
+
"hc-dark": "#1678d4"
|
|
1141
1375
|
}
|
|
1142
1376
|
},
|
|
1143
1377
|
{
|
|
@@ -1156,9 +1390,9 @@
|
|
|
1156
1390
|
},
|
|
1157
1391
|
"hex": {
|
|
1158
1392
|
"light": "#0761b5",
|
|
1159
|
-
"dark": "#
|
|
1393
|
+
"dark": "#1262ae",
|
|
1160
1394
|
"hc-light": "#0761b5",
|
|
1161
|
-
"hc-dark": "#
|
|
1395
|
+
"hc-dark": "#1262ae"
|
|
1162
1396
|
}
|
|
1163
1397
|
},
|
|
1164
1398
|
{
|
|
@@ -1177,9 +1411,9 @@
|
|
|
1177
1411
|
},
|
|
1178
1412
|
"hex": {
|
|
1179
1413
|
"light": "#04417a",
|
|
1180
|
-
"dark": "#
|
|
1414
|
+
"dark": "#7fb5e7",
|
|
1181
1415
|
"hc-light": "#04417a",
|
|
1182
|
-
"hc-dark": "#
|
|
1416
|
+
"hc-dark": "#7fb5e7"
|
|
1183
1417
|
}
|
|
1184
1418
|
},
|
|
1185
1419
|
{
|
|
@@ -1198,9 +1432,9 @@
|
|
|
1198
1432
|
},
|
|
1199
1433
|
"hex": {
|
|
1200
1434
|
"light": "#0768c2",
|
|
1201
|
-
"dark": "#
|
|
1435
|
+
"dark": "#136abb",
|
|
1202
1436
|
"hc-light": "#0768c2",
|
|
1203
|
-
"hc-dark": "#
|
|
1437
|
+
"hc-dark": "#136abb"
|
|
1204
1438
|
}
|
|
1205
1439
|
},
|
|
1206
1440
|
{
|
|
@@ -1219,9 +1453,9 @@
|
|
|
1219
1453
|
},
|
|
1220
1454
|
"hex": {
|
|
1221
1455
|
"light": "#e1effb",
|
|
1222
|
-
"dark": "#
|
|
1456
|
+
"dark": "#122236",
|
|
1223
1457
|
"hc-light": "#e1effb",
|
|
1224
|
-
"hc-dark": "#
|
|
1458
|
+
"hc-dark": "#1a2530"
|
|
1225
1459
|
}
|
|
1226
1460
|
},
|
|
1227
1461
|
{
|
|
@@ -1552,9 +1786,9 @@
|
|
|
1552
1786
|
},
|
|
1553
1787
|
"hex": {
|
|
1554
1788
|
"light": "#0876dd",
|
|
1555
|
-
"dark": "#
|
|
1789
|
+
"dark": "#1678d4",
|
|
1556
1790
|
"hc-light": "#0876dd",
|
|
1557
|
-
"hc-dark": "#
|
|
1791
|
+
"hc-dark": "#1678d4"
|
|
1558
1792
|
}
|
|
1559
1793
|
},
|
|
1560
1794
|
{
|
|
@@ -2038,9 +2272,9 @@
|
|
|
2038
2272
|
},
|
|
2039
2273
|
"hex": {
|
|
2040
2274
|
"light": "#0876dd",
|
|
2041
|
-
"dark": "#
|
|
2275
|
+
"dark": "#1678d4",
|
|
2042
2276
|
"hc-light": "#0876dd",
|
|
2043
|
-
"hc-dark": "#
|
|
2277
|
+
"hc-dark": "#1678d4"
|
|
2044
2278
|
}
|
|
2045
2279
|
},
|
|
2046
2280
|
{
|
|
@@ -2059,9 +2293,9 @@
|
|
|
2059
2293
|
},
|
|
2060
2294
|
"hex": {
|
|
2061
2295
|
"light": "#0761b5",
|
|
2062
|
-
"dark": "#
|
|
2296
|
+
"dark": "#1262ae",
|
|
2063
2297
|
"hc-light": "#0761b5",
|
|
2064
|
-
"hc-dark": "#
|
|
2298
|
+
"hc-dark": "#1262ae"
|
|
2065
2299
|
}
|
|
2066
2300
|
},
|
|
2067
2301
|
{
|
|
@@ -2080,9 +2314,9 @@
|
|
|
2080
2314
|
},
|
|
2081
2315
|
"hex": {
|
|
2082
2316
|
"light": "#04417a",
|
|
2083
|
-
"dark": "#
|
|
2317
|
+
"dark": "#7fb5e7",
|
|
2084
2318
|
"hc-light": "#04417a",
|
|
2085
|
-
"hc-dark": "#
|
|
2319
|
+
"hc-dark": "#7fb5e7"
|
|
2086
2320
|
}
|
|
2087
2321
|
},
|
|
2088
2322
|
{
|
|
@@ -2101,9 +2335,9 @@
|
|
|
2101
2335
|
},
|
|
2102
2336
|
"hex": {
|
|
2103
2337
|
"light": "#0768c2",
|
|
2104
|
-
"dark": "#
|
|
2338
|
+
"dark": "#136abb",
|
|
2105
2339
|
"hc-light": "#0768c2",
|
|
2106
|
-
"hc-dark": "#
|
|
2340
|
+
"hc-dark": "#136abb"
|
|
2107
2341
|
}
|
|
2108
2342
|
},
|
|
2109
2343
|
{
|
|
@@ -2122,9 +2356,9 @@
|
|
|
2122
2356
|
},
|
|
2123
2357
|
"hex": {
|
|
2124
2358
|
"light": "#e1effb",
|
|
2125
|
-
"dark": "#
|
|
2359
|
+
"dark": "#122236",
|
|
2126
2360
|
"hc-light": "#e1effb",
|
|
2127
|
-
"hc-dark": "#
|
|
2361
|
+
"hc-dark": "#1a2530"
|
|
2128
2362
|
}
|
|
2129
2363
|
},
|
|
2130
2364
|
{
|
|
@@ -3442,9 +3676,9 @@
|
|
|
3442
3676
|
},
|
|
3443
3677
|
"hex": {
|
|
3444
3678
|
"light": "#0876dd",
|
|
3445
|
-
"dark": "#
|
|
3679
|
+
"dark": "#1678d4",
|
|
3446
3680
|
"hc-light": "#0876dd",
|
|
3447
|
-
"hc-dark": "#
|
|
3681
|
+
"hc-dark": "#1678d4"
|
|
3448
3682
|
}
|
|
3449
3683
|
},
|
|
3450
3684
|
{
|
|
@@ -3595,9 +3829,9 @@
|
|
|
3595
3829
|
},
|
|
3596
3830
|
"hex": {
|
|
3597
3831
|
"light": "#0876dd",
|
|
3598
|
-
"dark": "#
|
|
3832
|
+
"dark": "#1678d4",
|
|
3599
3833
|
"hc-light": "#0876dd",
|
|
3600
|
-
"hc-dark": "#
|
|
3834
|
+
"hc-dark": "#1678d4"
|
|
3601
3835
|
}
|
|
3602
3836
|
},
|
|
3603
3837
|
{
|
|
@@ -3741,6 +3975,24 @@
|
|
|
3741
3975
|
"description": "Tight line-height (headings). Prefer --af-type-*-leading on roles.",
|
|
3742
3976
|
"value": "1.15"
|
|
3743
3977
|
},
|
|
3978
|
+
{
|
|
3979
|
+
"name": "--af-link-decoration",
|
|
3980
|
+
"key": "link-decoration",
|
|
3981
|
+
"category": "component",
|
|
3982
|
+
"group": "component",
|
|
3983
|
+
"kind": "static",
|
|
3984
|
+
"description": "Default text-decoration for a / .af-link (underline). Override to restyle links.",
|
|
3985
|
+
"value": "underline"
|
|
3986
|
+
},
|
|
3987
|
+
{
|
|
3988
|
+
"name": "--af-link-hover-decoration",
|
|
3989
|
+
"key": "link-hover-decoration",
|
|
3990
|
+
"category": "component",
|
|
3991
|
+
"group": "component",
|
|
3992
|
+
"kind": "static",
|
|
3993
|
+
"description": "Link text-decoration on hover.",
|
|
3994
|
+
"value": "underline"
|
|
3995
|
+
},
|
|
3744
3996
|
{
|
|
3745
3997
|
"name": "--af-link-hover-primary",
|
|
3746
3998
|
"key": "link-hover-primary",
|
|
@@ -3757,9 +4009,9 @@
|
|
|
3757
4009
|
},
|
|
3758
4010
|
"hex": {
|
|
3759
4011
|
"light": "#0768c2",
|
|
3760
|
-
"dark": "#
|
|
4012
|
+
"dark": "#136abb",
|
|
3761
4013
|
"hc-light": "#0768c2",
|
|
3762
|
-
"hc-dark": "#
|
|
4014
|
+
"hc-dark": "#136abb"
|
|
3763
4015
|
}
|
|
3764
4016
|
},
|
|
3765
4017
|
{
|
|
@@ -3778,9 +4030,9 @@
|
|
|
3778
4030
|
},
|
|
3779
4031
|
"hex": {
|
|
3780
4032
|
"light": "#0876dd",
|
|
3781
|
-
"dark": "#
|
|
4033
|
+
"dark": "#1678d4",
|
|
3782
4034
|
"hc-light": "#0876dd",
|
|
3783
|
-
"hc-dark": "#
|
|
4035
|
+
"hc-dark": "#1678d4"
|
|
3784
4036
|
}
|
|
3785
4037
|
},
|
|
3786
4038
|
{
|
package/dist/tokens.css
CHANGED
|
@@ -224,6 +224,8 @@
|
|
|
224
224
|
/* Link */
|
|
225
225
|
--af-link-primary: var(--af-color-primary);
|
|
226
226
|
--af-link-hover-primary: var(--af-color-primary-hover);
|
|
227
|
+
--af-link-decoration: underline;
|
|
228
|
+
--af-link-hover-decoration: underline;
|
|
227
229
|
|
|
228
230
|
/* Button */
|
|
229
231
|
--af-btn-min-height: var(--af-control-min-height);
|
|
@@ -235,6 +237,15 @@
|
|
|
235
237
|
--af-btn-icon-button-size: var(--af-hit-size);
|
|
236
238
|
--af-btn-font-weight: var(--af-weight-medium);
|
|
237
239
|
--af-btn-border-width: 1px;
|
|
240
|
+
/* Filled borders are off. Set --af-btn-border to a color, or to
|
|
241
|
+
var(--af-btn-border-auto), to paint them. Ghost/link do not follow this master.
|
|
242
|
+
--af-btn-border-auto and variant / hover / focus tokens are initial so a scoped
|
|
243
|
+
alias is not frozen at :root (CSS inherits the computed value). Each .af-btn
|
|
244
|
+
remaps --af-btn-border-auto to its active tint. */
|
|
245
|
+
--af-btn-border: transparent;
|
|
246
|
+
--af-btn-border-hover: initial;
|
|
247
|
+
--af-btn-border-focus: initial;
|
|
248
|
+
--af-btn-border-auto: initial;
|
|
238
249
|
/* Hover darkens in light theme; dark theme flips these toward lighten */
|
|
239
250
|
--af-btn-hover-brightness: 0.9;
|
|
240
251
|
--af-btn-active-brightness: 0.82;
|
|
@@ -243,11 +254,39 @@
|
|
|
243
254
|
--af-btn-default-color: var(--af-color-on-primary);
|
|
244
255
|
--af-btn-default-hover: var(--af-color-primary-hover);
|
|
245
256
|
--af-btn-default-active: var(--af-color-primary-active);
|
|
257
|
+
--af-btn-default-border: initial;
|
|
258
|
+
--af-btn-default-border-hover: initial;
|
|
259
|
+
--af-btn-default-border-focus: initial;
|
|
246
260
|
|
|
247
261
|
--af-btn-secondary-bg: var(--af-color-secondary);
|
|
248
262
|
--af-btn-secondary-color: var(--af-color-on-secondary);
|
|
249
263
|
--af-btn-secondary-hover: var(--af-color-secondary-hover);
|
|
250
264
|
--af-btn-secondary-active: var(--af-color-secondary-active);
|
|
265
|
+
--af-btn-secondary-border: initial;
|
|
266
|
+
--af-btn-secondary-border-hover: initial;
|
|
267
|
+
--af-btn-secondary-border-focus: initial;
|
|
268
|
+
|
|
269
|
+
--af-btn-tertiary-border: initial;
|
|
270
|
+
--af-btn-tertiary-border-hover: initial;
|
|
271
|
+
--af-btn-tertiary-border-focus: initial;
|
|
272
|
+
|
|
273
|
+
--af-btn-success-border: initial;
|
|
274
|
+
--af-btn-success-border-hover: initial;
|
|
275
|
+
--af-btn-success-border-focus: initial;
|
|
276
|
+
|
|
277
|
+
--af-btn-warning-border: initial;
|
|
278
|
+
--af-btn-warning-border-hover: initial;
|
|
279
|
+
--af-btn-warning-border-focus: initial;
|
|
280
|
+
|
|
281
|
+
--af-btn-danger-border: initial;
|
|
282
|
+
--af-btn-danger-border-hover: initial;
|
|
283
|
+
--af-btn-danger-border-focus: initial;
|
|
284
|
+
|
|
285
|
+
--af-btn-info-border: initial;
|
|
286
|
+
--af-btn-info-border-hover: initial;
|
|
287
|
+
--af-btn-info-border-focus: initial;
|
|
288
|
+
|
|
289
|
+
--af-btn-ghost-border: transparent;
|
|
251
290
|
|
|
252
291
|
--af-btn-outline-color: var(--af-color-primary);
|
|
253
292
|
--af-btn-outline-border: var(--af-color-primary);
|
|
@@ -552,7 +591,7 @@
|
|
|
552
591
|
--af-color-border-strong--dark: var(--af-base-neutral-500);
|
|
553
592
|
|
|
554
593
|
--af-color-on-success--dark: var(--af-base-white);
|
|
555
|
-
--af-base-primary--dark: #
|
|
594
|
+
--af-base-primary--dark: #1678D4;
|
|
556
595
|
}
|
|
557
596
|
|
|
558
597
|
/* Automatic dark mode — system preference, unless light is forced */
|