@czi-sds/components 22.14.0 → 22.15.1

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 (9) hide show
  1. package/dist/index.cjs.d.ts +76 -6
  2. package/dist/index.cjs.js +2156 -1194
  3. package/dist/index.esm.d.ts +76 -6
  4. package/dist/index.esm.js +2156 -1194
  5. package/dist/tailwind.json +122 -66
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +136 -78
  8. package/dist/variables.scss +136 -78
  9. package/package.json +2 -2
package/dist/tailwind.json CHANGED
@@ -2742,6 +2742,14 @@
2742
2742
  "sds-color-primitive-gray-700": "#ededed",
2743
2743
  "sds-color-primitive-gray-800": "#fafafa",
2744
2744
  "sds-color-primitive-gray-900": "#ffffff",
2745
+ "sds-color-primitive-indigo-100": "#1d004d",
2746
+ "sds-color-primitive-indigo-200": "#330296",
2747
+ "sds-color-primitive-indigo-300": "#521ec9",
2748
+ "sds-color-primitive-indigo-400": "#6e4ff9",
2749
+ "sds-color-primitive-indigo-500": "#9785ff",
2750
+ "sds-color-primitive-indigo-600": "#beb5ff",
2751
+ "sds-color-primitive-indigo-700": "#dcd9ff",
2752
+ "sds-color-primitive-indigo-800": "#f1f0ff",
2745
2753
  "sds-color-primitive-green-100": "#082608",
2746
2754
  "sds-color-primitive-green-200": "#063617",
2747
2755
  "sds-color-primitive-green-300": "#10632e",
@@ -2776,74 +2784,94 @@
2776
2784
  "sds-color-primitive-yellow-800": "#ffe6a8",
2777
2785
  "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
2778
2786
  "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
2779
- "sds-color-semantic-accent-border": "#a2c9ff",
2780
- "sds-color-semantic-accent-border-focus": "#a2c9ff",
2781
- "sds-color-semantic-accent-border-hover": "#cde3ff",
2782
- "sds-color-semantic-accent-border-open": "#a2c9ff",
2783
- "sds-color-semantic-accent-border-pressed": "#e2eeff",
2784
- "sds-color-semantic-accent-border-selected": "#a2c9ff",
2785
- "sds-color-semantic-accent-fill-hover": "#cde3ff",
2786
- "sds-color-semantic-accent-fill-pressed": "#e2eeff",
2787
- "sds-color-semantic-accent-fill-primary": "#2876f9",
2788
- "sds-color-semantic-accent-ornament": "#a2c9ff",
2789
- "sds-color-semantic-accent-ornament-focus": "#a2c9ff",
2790
- "sds-color-semantic-accent-ornament-hover": "#cde3ff",
2791
- "sds-color-semantic-accent-ornament-open": "#a2c9ff",
2792
- "sds-color-semantic-accent-ornament-pressed": "#e2eeff",
2793
- "sds-color-semantic-accent-ornament-selected": "#a2c9ff",
2794
- "sds-color-semantic-accent-surface-primary": "#2876f9",
2795
- "sds-color-semantic-accent-surface-secondary": "#0f1d4a",
2796
- "sds-color-semantic-accent-text-action": "#a2c9ff",
2797
- "sds-color-semantic-accent-text-action-hover": "#cde3ff",
2798
- "sds-color-semantic-accent-text-action-pressed": "#e2eeff",
2787
+ "sds-color-semantic-accent-border": "#beb5ff",
2788
+ "sds-color-semantic-accent-border-focus": "#beb5ff",
2789
+ "sds-color-semantic-accent-border-hover": "#dcd9ff",
2790
+ "sds-color-semantic-accent-border-open": "#beb5ff",
2791
+ "sds-color-semantic-accent-border-pressed": "#f1f0ff",
2792
+ "sds-color-semantic-accent-border-selected": "#beb5ff",
2793
+ "sds-color-semantic-accent-fill-hover": "#dcd9ff",
2794
+ "sds-color-semantic-accent-fill-pressed": "#f1f0ff",
2795
+ "sds-color-semantic-accent-fill-primary": "#6e4ff9",
2796
+ "sds-color-semantic-accent-ornament": "#beb5ff",
2797
+ "sds-color-semantic-accent-ornament-focus": "#beb5ff",
2798
+ "sds-color-semantic-accent-ornament-hover": "#dcd9ff",
2799
+ "sds-color-semantic-accent-ornament-open": "#beb5ff",
2800
+ "sds-color-semantic-accent-ornament-pressed": "#f1f0ff",
2801
+ "sds-color-semantic-accent-ornament-selected": "#beb5ff",
2802
+ "sds-color-semantic-accent-surface-primary": "#6e4ff9",
2803
+ "sds-color-semantic-accent-surface-secondary": "#1d004d",
2804
+ "sds-color-semantic-accent-text-action": "#beb5ff",
2805
+ "sds-color-semantic-accent-text-action-hover": "#dcd9ff",
2806
+ "sds-color-semantic-accent-text-action-pressed": "#f1f0ff",
2799
2807
  "sds-color-semantic-base-background-primary": "#101010",
2800
- "sds-color-semantic-base-background-primary-inverse": "#ffffff",
2801
- "sds-color-semantic-base-background-secondary": "#333333",
2802
- "sds-color-semantic-base-background-secondary-inverse": "#ededed",
2803
- "sds-color-semantic-base-background-tertiary": "#494949",
2804
- "sds-color-semantic-base-border-on-fill": "#000000",
2808
+ "sds-color-semantic-base-background-primary-dark": "#101010",
2809
+ "sds-color-semantic-base-background-primary-inverse": "#101010",
2810
+ "sds-color-semantic-base-background-secondary": "#33333399",
2811
+ "sds-color-semantic-base-background-secondary-on-dark": "#33333399",
2812
+ "sds-color-semantic-base-background-secondary-inverse": "#33333399",
2813
+ "sds-color-semantic-base-background-tertiary": "#333333",
2814
+ "sds-color-semantic-base-border-on-fill": "#ffffff",
2805
2815
  "sds-color-semantic-base-border-primary": "#cdcdcd",
2806
2816
  "sds-color-semantic-base-border-primary-disabled": "#696969",
2807
- "sds-color-semantic-base-border-primary-disabled-inverse": "#cdcdcd",
2817
+ "sds-color-semantic-base-border-primary-disabled-on-dark": "#696969",
2818
+ "sds-color-semantic-base-border-primary-disabled-inverse": "#696969",
2808
2819
  "sds-color-semantic-base-border-primary-hover": "#ffffff",
2809
- "sds-color-semantic-base-border-primary-hover-inverse": "#000000",
2810
- "sds-color-semantic-base-border-primary-inverse": "#696969",
2820
+ "sds-color-semantic-base-border-primary-hover-on-dark": "#ffffff",
2821
+ "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
2822
+ "sds-color-semantic-base-border-primary-on-dark": "#cdcdcd",
2823
+ "sds-color-semantic-base-border-primary-inverse": "#cdcdcd",
2811
2824
  "sds-color-semantic-base-border-primary-pressed": "#ffffff",
2812
- "sds-color-semantic-base-border-primary-pressed-inverse": "#000000",
2825
+ "sds-color-semantic-base-border-primary-pressed-on-dark": "#ffffff",
2826
+ "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
2813
2827
  "sds-color-semantic-base-border-secondary": "#696969",
2814
2828
  "sds-color-semantic-base-divider": "#494949",
2815
- "sds-color-semantic-base-divider-inverse": "#cdcdcd",
2829
+ "sds-color-semantic-base-divider-on-dark": "#494949",
2830
+ "sds-color-semantic-base-divider-inverse": "#494949",
2816
2831
  "sds-color-semantic-base-fill-disabled": "#494949",
2817
- "sds-color-semantic-base-fill-hover": "#69696994",
2818
- "sds-color-semantic-base-fill-hover-inverse": "#69696914",
2819
- "sds-color-semantic-base-fill-open": "#69696994",
2820
- "sds-color-semantic-base-fill-open-inverse": "#69696914",
2821
- "sds-color-semantic-base-fill-pressed": "#69696994",
2822
- "sds-color-semantic-base-fill-pressed-inverse": "#69696914",
2832
+ "sds-color-semantic-base-fill-hover": "#69696952",
2833
+ "sds-color-semantic-base-fill-hover-on-dark": "#69696952",
2834
+ "sds-color-semantic-base-fill-hover-inverse": "#69696952",
2835
+ "sds-color-semantic-base-fill-open": "#69696952",
2836
+ "sds-color-semantic-base-fill-open-on-dark": "#69696952",
2837
+ "sds-color-semantic-base-fill-open-inverse": "#69696952",
2838
+ "sds-color-semantic-base-fill-pressed": "#69696952",
2839
+ "sds-color-semantic-base-fill-pressed-on-dark": "#69696952",
2840
+ "sds-color-semantic-base-fill-pressed-inverse": "#69696952",
2823
2841
  "sds-color-semantic-base-fill-primary": "#333333",
2824
2842
  "sds-color-semantic-base-fill-selected": "#ffffff",
2825
2843
  "sds-color-semantic-base-ornament-disabled": "#696969",
2826
- "sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd",
2844
+ "sds-color-semantic-base-ornament-disabled-on-dark": "#696969",
2845
+ "sds-color-semantic-base-ornament-disabled-inverse": "#696969",
2827
2846
  "sds-color-semantic-base-ornament-on-fill": "#ffffff",
2828
2847
  "sds-color-semantic-base-ornament-primary": "#ffffff",
2848
+ "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
2829
2849
  "sds-color-semantic-base-ornament-primary-inverse": "#000000",
2830
2850
  "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
2831
2851
  "sds-color-semantic-base-ornament-secondary-hover": "#ffffff",
2832
- "sds-color-semantic-base-ornament-secondary-hover-inverse": "#000000",
2833
- "sds-color-semantic-base-ornament-secondary-inverse": "#696969",
2852
+ "sds-color-semantic-base-ornament-secondary-hover-on-dark": "#ffffff",
2853
+ "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
2854
+ "sds-color-semantic-base-ornament-secondary-on-dark": "#cdcdcd",
2855
+ "sds-color-semantic-base-ornament-secondary-inverse": "#cdcdcd",
2834
2856
  "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
2835
- "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#000000",
2857
+ "sds-color-semantic-base-ornament-secondary-pressed-on-dark": "#ffffff",
2858
+ "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
2836
2859
  "sds-color-semantic-base-surface": "#333333",
2837
- "sds-color-semantic-base-surface-inverse": "#ededed",
2860
+ "sds-color-semantic-base-surface-on-dark": "#333333",
2861
+ "sds-color-semantic-base-surface-inverse": "#333333",
2838
2862
  "sds-color-semantic-base-text-disabled": "#696969",
2839
- "sds-color-semantic-base-text-disabled-inverse": "#cdcdcd",
2863
+ "sds-color-semantic-base-text-disabled-on-dark": "#696969",
2864
+ "sds-color-semantic-base-text-disabled-inverse": "#696969",
2840
2865
  "sds-color-semantic-base-text-on-fill": "#ffffff",
2841
2866
  "sds-color-semantic-base-text-primary": "#ffffff",
2867
+ "sds-color-semantic-base-text-primary-on-dark": "#ffffff",
2842
2868
  "sds-color-semantic-base-text-primary-inverse": "#000000",
2843
2869
  "sds-color-semantic-base-text-secondary": "#cdcdcd",
2844
- "sds-color-semantic-base-text-secondary-inverse": "#696969",
2870
+ "sds-color-semantic-base-text-secondary-on-dark": "#cdcdcd",
2871
+ "sds-color-semantic-base-text-secondary-inverse": "#cdcdcd",
2845
2872
  "sds-color-semantic-base-text-tertiary": "#949494",
2846
- "sds-color-semantic-base-text-tertiary-inverse": "#aaaaaa",
2873
+ "sds-color-semantic-base-text-tertiary-on-dark": "#949494",
2874
+ "sds-color-semantic-base-text-tertiary-inverse": "#949494",
2847
2875
  "sds-color-semantic-beta-border": "#cebef8",
2848
2876
  "sds-color-semantic-beta-fill-hover": "#e4dcfc",
2849
2877
  "sds-color-semantic-beta-fill-pressed": "#f0ebfe",
@@ -2919,6 +2947,14 @@
2919
2947
  "sds-color-primitive-gray-700": "#3b3b3b",
2920
2948
  "sds-color-primitive-gray-800": "#1b1b1b",
2921
2949
  "sds-color-primitive-gray-900": "#000000",
2950
+ "sds-color-primitive-indigo-100": "#f1f0ff",
2951
+ "sds-color-primitive-indigo-200": "#dcd9ff",
2952
+ "sds-color-primitive-indigo-300": "#beb5ff",
2953
+ "sds-color-primitive-indigo-400": "#9d8bff",
2954
+ "sds-color-primitive-indigo-500": "#6e4ff9",
2955
+ "sds-color-primitive-indigo-600": "#4e18cc",
2956
+ "sds-color-primitive-indigo-700": "#330296",
2957
+ "sds-color-primitive-indigo-800": "#1d004d",
2922
2958
  "sds-color-primitive-green-100": "#ebf9ed",
2923
2959
  "sds-color-primitive-green-200": "#b9ecc3",
2924
2960
  "sds-color-primitive-green-300": "#7fd693",
@@ -2953,73 +2989,93 @@
2953
2989
  "sds-color-primitive-yellow-800": "#541700",
2954
2990
  "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
2955
2991
  "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
2956
- "sds-color-semantic-accent-border": "#1a6cef",
2957
- "sds-color-semantic-accent-border-focus": "#1a6cef",
2958
- "sds-color-semantic-accent-border-hover": "#0041b9",
2959
- "sds-color-semantic-accent-border-open": "#1a6cef",
2960
- "sds-color-semantic-accent-border-pressed": "#002d90",
2961
- "sds-color-semantic-accent-border-selected": "#1a6cef",
2962
- "sds-color-semantic-accent-fill-hover": "#0041b9",
2963
- "sds-color-semantic-accent-fill-pressed": "#002d90",
2964
- "sds-color-semantic-accent-fill-primary": "#1a6cef",
2965
- "sds-color-semantic-accent-ornament": "#1a6cef",
2966
- "sds-color-semantic-accent-ornament-focus": "#1a6cef",
2967
- "sds-color-semantic-accent-ornament-hover": "#0041b9",
2968
- "sds-color-semantic-accent-ornament-open": "#1a6cef",
2969
- "sds-color-semantic-accent-ornament-pressed": "#002d90",
2970
- "sds-color-semantic-accent-ornament-selected": "#1a6cef",
2971
- "sds-color-semantic-accent-surface-primary": "#1a6cef",
2972
- "sds-color-semantic-accent-surface-secondary": "#edf3fd",
2973
- "sds-color-semantic-accent-text-action": "#1a6cef",
2974
- "sds-color-semantic-accent-text-action-hover": "#0041b9",
2975
- "sds-color-semantic-accent-text-action-pressed": "#002d90",
2992
+ "sds-color-semantic-accent-border": "#6e4ff9",
2993
+ "sds-color-semantic-accent-border-focus": "#6e4ff9",
2994
+ "sds-color-semantic-accent-border-hover": "#4e18cc",
2995
+ "sds-color-semantic-accent-border-open": "#6e4ff9",
2996
+ "sds-color-semantic-accent-border-pressed": "#330296",
2997
+ "sds-color-semantic-accent-border-selected": "#6e4ff9",
2998
+ "sds-color-semantic-accent-fill-hover": "#4e18cc",
2999
+ "sds-color-semantic-accent-fill-pressed": "#330296",
3000
+ "sds-color-semantic-accent-fill-primary": "#6e4ff9",
3001
+ "sds-color-semantic-accent-ornament": "#6e4ff9",
3002
+ "sds-color-semantic-accent-ornament-focus": "#6e4ff9",
3003
+ "sds-color-semantic-accent-ornament-hover": "#4e18cc",
3004
+ "sds-color-semantic-accent-ornament-open": "#6e4ff9",
3005
+ "sds-color-semantic-accent-ornament-pressed": "#330296",
3006
+ "sds-color-semantic-accent-ornament-selected": "#6e4ff9",
3007
+ "sds-color-semantic-accent-surface-primary": "#6e4ff9",
3008
+ "sds-color-semantic-accent-surface-secondary": "#f1f0ff",
3009
+ "sds-color-semantic-accent-text-action": "#6e4ff9",
3010
+ "sds-color-semantic-accent-text-action-hover": "#4e18cc",
3011
+ "sds-color-semantic-accent-text-action-pressed": "#330296",
2976
3012
  "sds-color-semantic-base-background-primary": "#ffffff",
3013
+ "sds-color-semantic-base-background-primary-dark": "#000000",
2977
3014
  "sds-color-semantic-base-background-primary-inverse": "#000000",
2978
- "sds-color-semantic-base-background-secondary": "#f8f8f8",
3015
+ "sds-color-semantic-base-background-secondary": "#ededed66",
3016
+ "sds-color-semantic-base-background-secondary-on-dark": "#3b3b3b9E",
2979
3017
  "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
2980
3018
  "sds-color-semantic-base-background-tertiary": "#ededed",
2981
3019
  "sds-color-semantic-base-border-on-fill": "#ffffff",
2982
3020
  "sds-color-semantic-base-border-primary": "#767676",
2983
3021
  "sds-color-semantic-base-border-primary-disabled": "#c3c3c3",
3022
+ "sds-color-semantic-base-border-primary-disabled-on-dark": "#767676",
2984
3023
  "sds-color-semantic-base-border-primary-disabled-inverse": "#767676",
2985
3024
  "sds-color-semantic-base-border-primary-hover": "#000000",
3025
+ "sds-color-semantic-base-border-primary-hover-on-dark": "#ffffff",
2986
3026
  "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
3027
+ "sds-color-semantic-base-border-primary-on-dark": "#c3c3c3",
2987
3028
  "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
2988
3029
  "sds-color-semantic-base-border-primary-pressed": "#000000",
3030
+ "sds-color-semantic-base-border-primary-pressed-on-dark": "#ffffff",
2989
3031
  "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
2990
3032
  "sds-color-semantic-base-border-secondary": "#c3c3c3",
2991
3033
  "sds-color-semantic-base-divider": "#dfdfdf",
2992
- "sds-color-semantic-base-divider-inverse": "#767676",
3034
+ "sds-color-semantic-base-divider-on-dark": "#3b3b3b",
3035
+ "sds-color-semantic-base-divider-inverse": "#3b3b3b",
2993
3036
  "sds-color-semantic-base-fill-disabled": "#dfdfdf",
2994
3037
  "sds-color-semantic-base-fill-hover": "#c3c3c333",
3038
+ "sds-color-semantic-base-fill-hover-on-dark": "#c3c3c357",
2995
3039
  "sds-color-semantic-base-fill-hover-inverse": "#c3c3c357",
2996
3040
  "sds-color-semantic-base-fill-open": "#c3c3c333",
3041
+ "sds-color-semantic-base-fill-open-on-dark": "#c3c3c357",
2997
3042
  "sds-color-semantic-base-fill-open-inverse": "#c3c3c357",
2998
3043
  "sds-color-semantic-base-fill-pressed": "#c3c3c333",
3044
+ "sds-color-semantic-base-fill-pressed-on-dark": "#c3c3c357",
2999
3045
  "sds-color-semantic-base-fill-pressed-inverse": "#c3c3c357",
3000
3046
  "sds-color-semantic-base-fill-primary": "#ffffff",
3001
3047
  "sds-color-semantic-base-fill-selected": "#000000",
3002
3048
  "sds-color-semantic-base-ornament-disabled": "#c3c3c3",
3049
+ "sds-color-semantic-base-ornament-disabled-on-dark": "#767676",
3003
3050
  "sds-color-semantic-base-ornament-disabled-inverse": "#767676",
3004
3051
  "sds-color-semantic-base-ornament-on-fill": "#ffffff",
3005
3052
  "sds-color-semantic-base-ornament-primary": "#000000",
3053
+ "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
3006
3054
  "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
3007
3055
  "sds-color-semantic-base-ornament-secondary": "#767676",
3008
3056
  "sds-color-semantic-base-ornament-secondary-hover": "#000000",
3057
+ "sds-color-semantic-base-ornament-secondary-hover-on-dark": "#ffffff",
3009
3058
  "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
3059
+ "sds-color-semantic-base-ornament-secondary-on-dark": "#c3c3c3",
3010
3060
  "sds-color-semantic-base-ornament-secondary-inverse": "#c3c3c3",
3011
3061
  "sds-color-semantic-base-ornament-secondary-pressed": "#000000",
3062
+ "sds-color-semantic-base-ornament-secondary-pressed-on-dark": "#ffffff",
3012
3063
  "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
3013
3064
  "sds-color-semantic-base-surface": "#ffffff",
3065
+ "sds-color-semantic-base-surface-on-dark": "#000000",
3014
3066
  "sds-color-semantic-base-surface-inverse": "#000000",
3015
3067
  "sds-color-semantic-base-text-disabled": "#c3c3c3",
3068
+ "sds-color-semantic-base-text-disabled-on-dark": "#767676",
3016
3069
  "sds-color-semantic-base-text-disabled-inverse": "#767676",
3017
3070
  "sds-color-semantic-base-text-on-fill": "#ffffff",
3018
3071
  "sds-color-semantic-base-text-primary": "#000000",
3072
+ "sds-color-semantic-base-text-primary-on-dark": "#ffffff",
3019
3073
  "sds-color-semantic-base-text-primary-inverse": "#ffffff",
3020
3074
  "sds-color-semantic-base-text-secondary": "#767676",
3075
+ "sds-color-semantic-base-text-secondary-on-dark": "#c3c3c3",
3021
3076
  "sds-color-semantic-base-text-secondary-inverse": "#c3c3c3",
3022
3077
  "sds-color-semantic-base-text-tertiary": "#a5a5a5",
3078
+ "sds-color-semantic-base-text-tertiary-on-dark": "#969696",
3023
3079
  "sds-color-semantic-base-text-tertiary-inverse": "#969696",
3024
3080
  "sds-color-semantic-beta-border": "#6526b5",
3025
3081
  "sds-color-semantic-beta-fill-hover": "#6526b5",