@nova-design-system/nova-base 3.0.0-beta.28 → 3.0.0-beta.29
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/dist/css/nova-utils.css +464 -0
- package/dist/css/ocean.css +87217 -0
- package/dist/css/spark.css +87217 -0
- package/dist/lib/cjs/nova-plugin.js +36 -48
- package/dist/lib/cjs/nova-safelist.js +6 -1
- package/dist/lib/cjs/nova-tailwind-tokens.js +307 -0
- package/dist/lib/cjs/nova-theme.js +12 -0
- package/dist/lib/nova-plugin.js +2 -0
- package/dist/lib/nova-safelist.d.ts +2 -2
- package/dist/lib/nova-safelist.js +7 -0
- package/dist/lib/nova-tailwind-tokens.d.ts +303 -0
- package/dist/lib/nova-tailwind-tokens.js +304 -0
- package/dist/lib/nova-theme.js +12 -0
- package/dist/tokens/ocean_dark.json +1526 -1516
- package/dist/tokens/ocean_light.json +1526 -1516
- package/dist/tokens/primitives.json +916 -756
- package/dist/tokens/spacings.json +849 -849
- package/dist/tokens/spark_dark.json +1530 -1519
- package/dist/tokens/spark_light.json +1529 -1519
- package/package.json +5 -6
package/dist/css/nova-utils.css
CHANGED
|
@@ -6740,6 +6740,402 @@ h6 {
|
|
|
6740
6740
|
color: var(--color-yellow-900);
|
|
6741
6741
|
}
|
|
6742
6742
|
|
|
6743
|
+
.border-base-focus {
|
|
6744
|
+
border-color: var(--color-base-border-focus);
|
|
6745
|
+
}
|
|
6746
|
+
|
|
6747
|
+
.border-base-focus-high {
|
|
6748
|
+
border-color: var(--color-base-border-focus-high);
|
|
6749
|
+
}
|
|
6750
|
+
|
|
6751
|
+
.border-base-high-emphasis {
|
|
6752
|
+
border-color: var(--color-base-border-high-emphasis);
|
|
6753
|
+
}
|
|
6754
|
+
|
|
6755
|
+
.border-base-low-emphasis {
|
|
6756
|
+
border-color: var(--color-base-border-low-emphasis);
|
|
6757
|
+
}
|
|
6758
|
+
|
|
6759
|
+
.border-base-medium-emphasis {
|
|
6760
|
+
border-color: var(--color-base-border-medium-emphasis);
|
|
6761
|
+
}
|
|
6762
|
+
|
|
6763
|
+
.text-base-high-emphasis {
|
|
6764
|
+
color: var(--color-base-content-high-emphasis);
|
|
6765
|
+
}
|
|
6766
|
+
|
|
6767
|
+
.text-base-inverted-high-emphasis {
|
|
6768
|
+
color: var(--color-base-content-inverted-high-emphasis);
|
|
6769
|
+
}
|
|
6770
|
+
|
|
6771
|
+
.text-base-inverted-low-emphasis {
|
|
6772
|
+
color: var(--color-base-content-inverted-low-emphasis);
|
|
6773
|
+
}
|
|
6774
|
+
|
|
6775
|
+
.text-base-inverted-medium-emphasis {
|
|
6776
|
+
color: var(--color-base-content-inverted-medium-emphasis);
|
|
6777
|
+
}
|
|
6778
|
+
|
|
6779
|
+
.text-base-low-emphasis {
|
|
6780
|
+
color: var(--color-base-content-low-emphasis);
|
|
6781
|
+
}
|
|
6782
|
+
|
|
6783
|
+
.text-base-lower-emphasis {
|
|
6784
|
+
color: var(--color-base-content-lower-emphasis);
|
|
6785
|
+
}
|
|
6786
|
+
|
|
6787
|
+
.text-base-medium-emphasis {
|
|
6788
|
+
color: var(--color-base-content-medium-emphasis);
|
|
6789
|
+
}
|
|
6790
|
+
|
|
6791
|
+
.bg-dont-use {
|
|
6792
|
+
background-color: var(--color-dont-use-background);
|
|
6793
|
+
}
|
|
6794
|
+
|
|
6795
|
+
.border-dont-use {
|
|
6796
|
+
border-color: var(--color-dont-use-border);
|
|
6797
|
+
}
|
|
6798
|
+
|
|
6799
|
+
.text-dont-use {
|
|
6800
|
+
color: var(--color-dont-use-content);
|
|
6801
|
+
}
|
|
6802
|
+
|
|
6803
|
+
.bg-feedback-error-high {
|
|
6804
|
+
background-color: var(--color-feedback-error-high-background);
|
|
6805
|
+
}
|
|
6806
|
+
|
|
6807
|
+
.border-feedback-error-high {
|
|
6808
|
+
border-color: var(--color-feedback-error-high-border);
|
|
6809
|
+
}
|
|
6810
|
+
|
|
6811
|
+
.text-feedback-error-high {
|
|
6812
|
+
color: var(--color-feedback-error-high-content);
|
|
6813
|
+
}
|
|
6814
|
+
|
|
6815
|
+
.bg-feedback-error-low {
|
|
6816
|
+
background-color: var(--color-feedback-error-low-background);
|
|
6817
|
+
}
|
|
6818
|
+
|
|
6819
|
+
.border-feedback-error-low {
|
|
6820
|
+
border-color: var(--color-feedback-error-low-border);
|
|
6821
|
+
}
|
|
6822
|
+
|
|
6823
|
+
.text-feedback-error-low {
|
|
6824
|
+
color: var(--color-feedback-error-low-content);
|
|
6825
|
+
}
|
|
6826
|
+
|
|
6827
|
+
.bg-feedback-information-high {
|
|
6828
|
+
background-color: var(--color-feedback-information-high-background);
|
|
6829
|
+
}
|
|
6830
|
+
|
|
6831
|
+
.border-feedback-information-high {
|
|
6832
|
+
border-color: var(--color-feedback-information-high-border);
|
|
6833
|
+
}
|
|
6834
|
+
|
|
6835
|
+
.text-feedback-information-high {
|
|
6836
|
+
color: var(--color-feedback-information-high-content);
|
|
6837
|
+
}
|
|
6838
|
+
|
|
6839
|
+
.bg-feedback-information-low {
|
|
6840
|
+
background-color: var(--color-feedback-information-low-background);
|
|
6841
|
+
}
|
|
6842
|
+
|
|
6843
|
+
.border-feedback-information-low {
|
|
6844
|
+
border-color: var(--color-feedback-information-low-border);
|
|
6845
|
+
}
|
|
6846
|
+
|
|
6847
|
+
.text-feedback-information-low {
|
|
6848
|
+
color: var(--color-feedback-information-low-content);
|
|
6849
|
+
}
|
|
6850
|
+
|
|
6851
|
+
.bg-feedback-neutral-high {
|
|
6852
|
+
background-color: var(--color-feedback-neutral-high-background);
|
|
6853
|
+
}
|
|
6854
|
+
|
|
6855
|
+
.border-feedback-neutral-high {
|
|
6856
|
+
border-color: var(--color-feedback-neutral-high-border);
|
|
6857
|
+
}
|
|
6858
|
+
|
|
6859
|
+
.text-feedback-neutral-high {
|
|
6860
|
+
color: var(--color-feedback-neutral-high-content);
|
|
6861
|
+
}
|
|
6862
|
+
|
|
6863
|
+
.bg-feedback-neutral-low {
|
|
6864
|
+
background-color: var(--color-feedback-neutral-low-background);
|
|
6865
|
+
}
|
|
6866
|
+
|
|
6867
|
+
.border-feedback-neutral-low {
|
|
6868
|
+
border-color: var(--color-feedback-neutral-low-border);
|
|
6869
|
+
}
|
|
6870
|
+
|
|
6871
|
+
.text-feedback-neutral-low {
|
|
6872
|
+
color: var(--color-feedback-neutral-low-content);
|
|
6873
|
+
}
|
|
6874
|
+
|
|
6875
|
+
.bg-feedback-success-high {
|
|
6876
|
+
background-color: var(--color-feedback-success-high-background);
|
|
6877
|
+
}
|
|
6878
|
+
|
|
6879
|
+
.border-feedback-success-high {
|
|
6880
|
+
border-color: var(--color-feedback-success-high-border);
|
|
6881
|
+
}
|
|
6882
|
+
|
|
6883
|
+
.text-feedback-success-high {
|
|
6884
|
+
color: var(--color-feedback-success-high-content);
|
|
6885
|
+
}
|
|
6886
|
+
|
|
6887
|
+
.bg-feedback-success-low {
|
|
6888
|
+
background-color: var(--color-feedback-success-low-background);
|
|
6889
|
+
}
|
|
6890
|
+
|
|
6891
|
+
.border-feedback-success-low {
|
|
6892
|
+
border-color: var(--color-feedback-success-low-border);
|
|
6893
|
+
}
|
|
6894
|
+
|
|
6895
|
+
.text-feedback-success-low {
|
|
6896
|
+
color: var(--color-feedback-success-low-content);
|
|
6897
|
+
}
|
|
6898
|
+
|
|
6899
|
+
.bg-feedback-warning-high {
|
|
6900
|
+
background-color: var(--color-feedback-warning-high-background);
|
|
6901
|
+
}
|
|
6902
|
+
|
|
6903
|
+
.border-feedback-warning-high {
|
|
6904
|
+
border-color: var(--color-feedback-warning-high-border);
|
|
6905
|
+
}
|
|
6906
|
+
|
|
6907
|
+
.text-feedback-warning-high {
|
|
6908
|
+
color: var(--color-feedback-warning-high-content);
|
|
6909
|
+
}
|
|
6910
|
+
|
|
6911
|
+
.bg-feedback-warning-low {
|
|
6912
|
+
background-color: var(--color-feedback-warning-low-background);
|
|
6913
|
+
}
|
|
6914
|
+
|
|
6915
|
+
.border-feedback-warning-low {
|
|
6916
|
+
border-color: var(--color-feedback-warning-low-border);
|
|
6917
|
+
}
|
|
6918
|
+
|
|
6919
|
+
.text-feedback-warning-low {
|
|
6920
|
+
color: var(--color-feedback-warning-low-content);
|
|
6921
|
+
}
|
|
6922
|
+
|
|
6923
|
+
.bg-interaction-brand-high {
|
|
6924
|
+
background-color: var(--color-interaction-brand-high-background);
|
|
6925
|
+
}
|
|
6926
|
+
|
|
6927
|
+
.bg-interaction-brand-high-hover {
|
|
6928
|
+
background-color: var(--color-interaction-brand-high-background-hover);
|
|
6929
|
+
}
|
|
6930
|
+
|
|
6931
|
+
.border-interaction-brand-high {
|
|
6932
|
+
border-color: var(--color-interaction-brand-high-border);
|
|
6933
|
+
}
|
|
6934
|
+
|
|
6935
|
+
.border-interaction-brand-high-hover {
|
|
6936
|
+
border-color: var(--color-interaction-brand-high-border-hover);
|
|
6937
|
+
}
|
|
6938
|
+
|
|
6939
|
+
.text-interaction-brand-high {
|
|
6940
|
+
color: var(--color-interaction-brand-high-text);
|
|
6941
|
+
}
|
|
6942
|
+
|
|
6943
|
+
.text-interaction-brand-high-hover {
|
|
6944
|
+
color: var(--color-interaction-brand-high-text-hover);
|
|
6945
|
+
}
|
|
6946
|
+
|
|
6947
|
+
.bg-interaction-brand-low {
|
|
6948
|
+
background-color: var(--color-interaction-brand-low-background);
|
|
6949
|
+
}
|
|
6950
|
+
|
|
6951
|
+
.bg-interaction-brand-low-hover {
|
|
6952
|
+
background-color: var(--color-interaction-brand-low-background-hover);
|
|
6953
|
+
}
|
|
6954
|
+
|
|
6955
|
+
.border-interaction-brand-low {
|
|
6956
|
+
border-color: var(--color-interaction-brand-low-border);
|
|
6957
|
+
}
|
|
6958
|
+
|
|
6959
|
+
.border-interaction-brand-low-hover {
|
|
6960
|
+
border-color: var(--color-interaction-brand-low-border-hover);
|
|
6961
|
+
}
|
|
6962
|
+
|
|
6963
|
+
.text-interaction-brand-low {
|
|
6964
|
+
color: var(--color-interaction-brand-low-text);
|
|
6965
|
+
}
|
|
6966
|
+
|
|
6967
|
+
.text-interaction-brand-low-hover {
|
|
6968
|
+
color: var(--color-interaction-brand-low-text-hover);
|
|
6969
|
+
}
|
|
6970
|
+
|
|
6971
|
+
.text-interaction-link-inline {
|
|
6972
|
+
color: var(--color-interaction-link-inline-text);
|
|
6973
|
+
}
|
|
6974
|
+
|
|
6975
|
+
.text-interaction-link-inline-hover {
|
|
6976
|
+
color: var(--color-interaction-link-inline-text-hover);
|
|
6977
|
+
}
|
|
6978
|
+
|
|
6979
|
+
.text-interaction-link-standalone {
|
|
6980
|
+
color: var(--color-interaction-link-standalone-text);
|
|
6981
|
+
}
|
|
6982
|
+
|
|
6983
|
+
.text-interaction-link-standalone-hover {
|
|
6984
|
+
color: var(--color-interaction-link-standalone-text-hover);
|
|
6985
|
+
}
|
|
6986
|
+
|
|
6987
|
+
.text-interaction-link-table {
|
|
6988
|
+
color: var(--color-interaction-link-table-text);
|
|
6989
|
+
}
|
|
6990
|
+
|
|
6991
|
+
.text-interaction-link-table-hover {
|
|
6992
|
+
color: var(--color-interaction-link-table-text-hover);
|
|
6993
|
+
}
|
|
6994
|
+
|
|
6995
|
+
.bg-interaction-neutral {
|
|
6996
|
+
background-color: var(--color-interaction-neutral-background);
|
|
6997
|
+
}
|
|
6998
|
+
|
|
6999
|
+
.bg-interaction-neutral-hover {
|
|
7000
|
+
background-color: var(--color-interaction-neutral-background-hover);
|
|
7001
|
+
}
|
|
7002
|
+
|
|
7003
|
+
.border-interaction-neutral {
|
|
7004
|
+
border-color: var(--color-interaction-neutral-border);
|
|
7005
|
+
}
|
|
7006
|
+
|
|
7007
|
+
.border-interaction-neutral-hover {
|
|
7008
|
+
border-color: var(--color-interaction-neutral-border-hover);
|
|
7009
|
+
}
|
|
7010
|
+
|
|
7011
|
+
.text-interaction-neutral {
|
|
7012
|
+
color: var(--color-interaction-neutral-text);
|
|
7013
|
+
}
|
|
7014
|
+
|
|
7015
|
+
.text-interaction-neutral-hover {
|
|
7016
|
+
color: var(--color-interaction-neutral-text-hover);
|
|
7017
|
+
}
|
|
7018
|
+
|
|
7019
|
+
.bg-rainbow-1 {
|
|
7020
|
+
background-color: var(--color-rainbow-1-background);
|
|
7021
|
+
}
|
|
7022
|
+
|
|
7023
|
+
.border-rainbow-1 {
|
|
7024
|
+
border-color: var(--color-rainbow-1-border);
|
|
7025
|
+
}
|
|
7026
|
+
|
|
7027
|
+
.text-rainbow-1 {
|
|
7028
|
+
color: var(--color-rainbow-1-content);
|
|
7029
|
+
}
|
|
7030
|
+
|
|
7031
|
+
.bg-rainbow-10 {
|
|
7032
|
+
background-color: var(--color-rainbow-10-background);
|
|
7033
|
+
}
|
|
7034
|
+
|
|
7035
|
+
.border-rainbow-10 {
|
|
7036
|
+
border-color: var(--color-rainbow-10-border);
|
|
7037
|
+
}
|
|
7038
|
+
|
|
7039
|
+
.text-rainbow-10 {
|
|
7040
|
+
color: var(--color-rainbow-10-content);
|
|
7041
|
+
}
|
|
7042
|
+
|
|
7043
|
+
.bg-rainbow-2 {
|
|
7044
|
+
background-color: var(--color-rainbow-2-background);
|
|
7045
|
+
}
|
|
7046
|
+
|
|
7047
|
+
.border-rainbow-2 {
|
|
7048
|
+
border-color: var(--color-rainbow-2-border);
|
|
7049
|
+
}
|
|
7050
|
+
|
|
7051
|
+
.text-rainbow-2 {
|
|
7052
|
+
color: var(--color-rainbow-2-content);
|
|
7053
|
+
}
|
|
7054
|
+
|
|
7055
|
+
.bg-rainbow-3 {
|
|
7056
|
+
background-color: var(--color-rainbow-3-background);
|
|
7057
|
+
}
|
|
7058
|
+
|
|
7059
|
+
.border-rainbow-3 {
|
|
7060
|
+
border-color: var(--color-rainbow-3-border);
|
|
7061
|
+
}
|
|
7062
|
+
|
|
7063
|
+
.text-rainbow-3 {
|
|
7064
|
+
color: var(--color-rainbow-3-content);
|
|
7065
|
+
}
|
|
7066
|
+
|
|
7067
|
+
.bg-rainbow-4 {
|
|
7068
|
+
background-color: var(--color-rainbow-4-background);
|
|
7069
|
+
}
|
|
7070
|
+
|
|
7071
|
+
.border-rainbow-4 {
|
|
7072
|
+
border-color: var(--color-rainbow-4-border);
|
|
7073
|
+
}
|
|
7074
|
+
|
|
7075
|
+
.text-rainbow-4 {
|
|
7076
|
+
color: var(--color-rainbow-4-content);
|
|
7077
|
+
}
|
|
7078
|
+
|
|
7079
|
+
.bg-rainbow-5 {
|
|
7080
|
+
background-color: var(--color-rainbow-5-background);
|
|
7081
|
+
}
|
|
7082
|
+
|
|
7083
|
+
.border-rainbow-5 {
|
|
7084
|
+
border-color: var(--color-rainbow-5-border);
|
|
7085
|
+
}
|
|
7086
|
+
|
|
7087
|
+
.text-rainbow-5 {
|
|
7088
|
+
color: var(--color-rainbow-5-content);
|
|
7089
|
+
}
|
|
7090
|
+
|
|
7091
|
+
.bg-rainbow-6 {
|
|
7092
|
+
background-color: var(--color-rainbow-6-background);
|
|
7093
|
+
}
|
|
7094
|
+
|
|
7095
|
+
.border-rainbow-6 {
|
|
7096
|
+
border-color: var(--color-rainbow-6-border);
|
|
7097
|
+
}
|
|
7098
|
+
|
|
7099
|
+
.text-rainbow-6 {
|
|
7100
|
+
color: var(--color-rainbow-6-content);
|
|
7101
|
+
}
|
|
7102
|
+
|
|
7103
|
+
.bg-rainbow-7 {
|
|
7104
|
+
background-color: var(--color-rainbow-7-background);
|
|
7105
|
+
}
|
|
7106
|
+
|
|
7107
|
+
.border-rainbow-7 {
|
|
7108
|
+
border-color: var(--color-rainbow-7-border);
|
|
7109
|
+
}
|
|
7110
|
+
|
|
7111
|
+
.text-rainbow-7 {
|
|
7112
|
+
color: var(--color-rainbow-7-content);
|
|
7113
|
+
}
|
|
7114
|
+
|
|
7115
|
+
.bg-rainbow-8 {
|
|
7116
|
+
background-color: var(--color-rainbow-8-background);
|
|
7117
|
+
}
|
|
7118
|
+
|
|
7119
|
+
.border-rainbow-8 {
|
|
7120
|
+
border-color: var(--color-rainbow-8-border);
|
|
7121
|
+
}
|
|
7122
|
+
|
|
7123
|
+
.text-rainbow-8 {
|
|
7124
|
+
color: var(--color-rainbow-8-content);
|
|
7125
|
+
}
|
|
7126
|
+
|
|
7127
|
+
.bg-rainbow-9 {
|
|
7128
|
+
background-color: var(--color-rainbow-9-background);
|
|
7129
|
+
}
|
|
7130
|
+
|
|
7131
|
+
.border-rainbow-9 {
|
|
7132
|
+
border-color: var(--color-rainbow-9-border);
|
|
7133
|
+
}
|
|
7134
|
+
|
|
7135
|
+
.text-rainbow-9 {
|
|
7136
|
+
color: var(--color-rainbow-9-content);
|
|
7137
|
+
}
|
|
7138
|
+
|
|
6743
7139
|
.visually-hidden {
|
|
6744
7140
|
position: absolute;
|
|
6745
7141
|
padding: 0;
|
|
@@ -6870,6 +7266,74 @@ h6 {
|
|
|
6870
7266
|
color: var(--color-interaction-link-standalone-text-hover);
|
|
6871
7267
|
}
|
|
6872
7268
|
|
|
7269
|
+
.hover\:bg-interaction-brand-high-hover:hover {
|
|
7270
|
+
background-color: var(--color-interaction-brand-high-background-hover);
|
|
7271
|
+
}
|
|
7272
|
+
|
|
7273
|
+
.hover\:border-interaction-brand-high-hover:hover {
|
|
7274
|
+
border-color: var(--color-interaction-brand-high-border-hover);
|
|
7275
|
+
}
|
|
7276
|
+
|
|
7277
|
+
.hover\:text-interaction-brand-high-hover:hover {
|
|
7278
|
+
color: var(--color-interaction-brand-high-text-hover);
|
|
7279
|
+
}
|
|
7280
|
+
|
|
7281
|
+
.hover\:bg-interaction-brand-low-hover:hover {
|
|
7282
|
+
background-color: var(--color-interaction-brand-low-background-hover);
|
|
7283
|
+
}
|
|
7284
|
+
|
|
7285
|
+
.hover\:border-interaction-brand-low-hover:hover {
|
|
7286
|
+
border-color: var(--color-interaction-brand-low-border-hover);
|
|
7287
|
+
}
|
|
7288
|
+
|
|
7289
|
+
.hover\:text-interaction-brand-low-hover:hover {
|
|
7290
|
+
color: var(--color-interaction-brand-low-text-hover);
|
|
7291
|
+
}
|
|
7292
|
+
|
|
7293
|
+
.hover\:text-interaction-link-inline-hover:hover {
|
|
7294
|
+
color: var(--color-interaction-link-inline-text-hover);
|
|
7295
|
+
}
|
|
7296
|
+
|
|
7297
|
+
.hover\:text-interaction-link-standalone-hover:hover {
|
|
7298
|
+
color: var(--color-interaction-link-standalone-text-hover);
|
|
7299
|
+
}
|
|
7300
|
+
|
|
7301
|
+
.hover\:text-interaction-link-table-hover:hover {
|
|
7302
|
+
color: var(--color-interaction-link-table-text-hover);
|
|
7303
|
+
}
|
|
7304
|
+
|
|
7305
|
+
.hover\:bg-interaction-neutral-hover:hover {
|
|
7306
|
+
background-color: var(--color-interaction-neutral-background-hover);
|
|
7307
|
+
}
|
|
7308
|
+
|
|
7309
|
+
.hover\:border-interaction-neutral-hover:hover {
|
|
7310
|
+
border-color: var(--color-interaction-neutral-border-hover);
|
|
7311
|
+
}
|
|
7312
|
+
|
|
7313
|
+
.hover\:text-interaction-neutral-hover:hover {
|
|
7314
|
+
color: var(--color-interaction-neutral-text-hover);
|
|
7315
|
+
}
|
|
7316
|
+
|
|
7317
|
+
.hover\:bg-level-00-hover:hover {
|
|
7318
|
+
background-color: var(--color-base-level-00-hover);
|
|
7319
|
+
}
|
|
7320
|
+
|
|
7321
|
+
.hover\:bg-level-10-hover:hover {
|
|
7322
|
+
background-color: var(--color-base-level-10-hover);
|
|
7323
|
+
}
|
|
7324
|
+
|
|
7325
|
+
.hover\:bg-level-20-hover:hover {
|
|
7326
|
+
background-color: var(--color-base-level-20-hover);
|
|
7327
|
+
}
|
|
7328
|
+
|
|
7329
|
+
.hover\:bg-level-30-hover:hover {
|
|
7330
|
+
background-color: var(--color-base-level-30-hover);
|
|
7331
|
+
}
|
|
7332
|
+
|
|
7333
|
+
.hover\:bg-level-40-hover:hover {
|
|
7334
|
+
background-color: var(--color-base-level-40-hover);
|
|
7335
|
+
}
|
|
7336
|
+
|
|
6873
7337
|
@media (min-width: 640px) {
|
|
6874
7338
|
.sm\:static {
|
|
6875
7339
|
position: static;
|