@czi-sds/components 23.0.0 → 23.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.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +31 -17
  2. package/dist/index.cjs.js +450 -268
  3. package/dist/index.esm.d.ts +31 -17
  4. package/dist/index.esm.js +451 -270
  5. package/dist/tailwind.json +28 -38
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +29 -39
  8. package/dist/variables.scss +28 -38
  9. package/package.json +2 -2
package/dist/tailwind.json CHANGED
@@ -2808,7 +2808,7 @@
2808
2808
  "sds-color-semantic-base-background-primary-dark": "#101010",
2809
2809
  "sds-color-semantic-base-background-primary-inverse": "#101010",
2810
2810
  "sds-color-semantic-base-background-secondary": "#33333399",
2811
- "sds-color-semantic-base-background-secondary-on-dark": "#33333399",
2811
+ "sds-color-semantic-base-background-secondary-dark": "#33333399",
2812
2812
  "sds-color-semantic-base-background-secondary-inverse": "#33333399",
2813
2813
  "sds-color-semantic-base-background-tertiary": "#333333",
2814
2814
  "sds-color-semantic-base-border-on-fill": "#ffffff",
@@ -2816,27 +2816,23 @@
2816
2816
  "sds-color-semantic-base-border-primary-disabled": "#696969",
2817
2817
  "sds-color-semantic-base-border-primary-disabled-on-dark": "#696969",
2818
2818
  "sds-color-semantic-base-border-primary-disabled-inverse": "#696969",
2819
- "sds-color-semantic-base-border-primary-hover": "#ffffff",
2820
- "sds-color-semantic-base-border-primary-hover-on-dark": "#ffffff",
2819
+ "sds-color-semantic-base-border-primary-interaction": "#ffffff",
2820
+ "sds-color-semantic-base-border-primary-interaction-on-dark": "#ffffff",
2821
2821
  "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
2822
2822
  "sds-color-semantic-base-border-primary-on-dark": "#cdcdcd",
2823
2823
  "sds-color-semantic-base-border-primary-inverse": "#cdcdcd",
2824
- "sds-color-semantic-base-border-primary-pressed": "#ffffff",
2825
- "sds-color-semantic-base-border-primary-pressed-on-dark": "#ffffff",
2826
2824
  "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
2827
2825
  "sds-color-semantic-base-border-secondary": "#696969",
2828
2826
  "sds-color-semantic-base-divider": "#494949",
2829
2827
  "sds-color-semantic-base-divider-on-dark": "#494949",
2830
2828
  "sds-color-semantic-base-divider-inverse": "#494949",
2831
- "sds-color-semantic-base-fill-disabled": "#494949",
2832
- "sds-color-semantic-base-fill-hover": "#69696952",
2833
- "sds-color-semantic-base-fill-hover-on-dark": "#69696952",
2829
+ "sds-color-semantic-base-fill-disabled": "#333333",
2830
+ "sds-color-semantic-base-fill-interaction": "#69696952",
2831
+ "sds-color-semantic-base-fill-interaction-on-dark": "#69696952",
2834
2832
  "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
2833
  "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",
2834
+ "sds-color-semantic-base-fill-pressed": "#69696966",
2835
+ "sds-color-semantic-base-fill-pressed-on-dark": "#69696966",
2840
2836
  "sds-color-semantic-base-fill-pressed-inverse": "#69696952",
2841
2837
  "sds-color-semantic-base-fill-primary": "#333333",
2842
2838
  "sds-color-semantic-base-fill-selected": "#ffffff",
@@ -2848,16 +2844,15 @@
2848
2844
  "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
2849
2845
  "sds-color-semantic-base-ornament-primary-inverse": "#000000",
2850
2846
  "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
2851
- "sds-color-semantic-base-ornament-secondary-hover": "#ffffff",
2852
- "sds-color-semantic-base-ornament-secondary-hover-on-dark": "#ffffff",
2847
+ "sds-color-semantic-base-ornament-secondary-interaction": "#ffffff",
2848
+ "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
2853
2849
  "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
2854
2850
  "sds-color-semantic-base-ornament-secondary-on-dark": "#cdcdcd",
2855
2851
  "sds-color-semantic-base-ornament-secondary-inverse": "#cdcdcd",
2856
- "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
2857
- "sds-color-semantic-base-ornament-secondary-pressed-on-dark": "#ffffff",
2858
2852
  "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
2859
- "sds-color-semantic-base-surface": "#333333",
2860
- "sds-color-semantic-base-surface-on-dark": "#333333",
2853
+ "sds-color-semantic-base-surface-primary": "#333333",
2854
+ "sds-color-semantic-base-surface-secondary": "#69696952",
2855
+ "sds-color-semantic-base-surface-primary-dark": "#333333",
2861
2856
  "sds-color-semantic-base-surface-inverse": "#333333",
2862
2857
  "sds-color-semantic-base-text-disabled": "#696969",
2863
2858
  "sds-color-semantic-base-text-disabled-on-dark": "#696969",
@@ -3013,7 +3008,7 @@
3013
3008
  "sds-color-semantic-base-background-primary-dark": "#000000",
3014
3009
  "sds-color-semantic-base-background-primary-inverse": "#000000",
3015
3010
  "sds-color-semantic-base-background-secondary": "#ededed66",
3016
- "sds-color-semantic-base-background-secondary-on-dark": "#3b3b3b9e",
3011
+ "sds-color-semantic-base-background-secondary-dark": "#3b3b3b9e",
3017
3012
  "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
3018
3013
  "sds-color-semantic-base-background-tertiary": "#ededed",
3019
3014
  "sds-color-semantic-base-border-on-fill": "#ffffff",
@@ -3021,27 +3016,23 @@
3021
3016
  "sds-color-semantic-base-border-primary-disabled": "#c3c3c3",
3022
3017
  "sds-color-semantic-base-border-primary-disabled-on-dark": "#767676",
3023
3018
  "sds-color-semantic-base-border-primary-disabled-inverse": "#767676",
3024
- "sds-color-semantic-base-border-primary-hover": "#000000",
3025
- "sds-color-semantic-base-border-primary-hover-on-dark": "#ffffff",
3019
+ "sds-color-semantic-base-border-primary-interaction": "#000000",
3020
+ "sds-color-semantic-base-border-primary-interaction-on-dark": "#ffffff",
3026
3021
  "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
3027
3022
  "sds-color-semantic-base-border-primary-on-dark": "#c3c3c3",
3028
3023
  "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
3029
- "sds-color-semantic-base-border-primary-pressed": "#000000",
3030
- "sds-color-semantic-base-border-primary-pressed-on-dark": "#ffffff",
3031
3024
  "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
3032
3025
  "sds-color-semantic-base-border-secondary": "#c3c3c3",
3033
3026
  "sds-color-semantic-base-divider": "#dfdfdf",
3034
3027
  "sds-color-semantic-base-divider-on-dark": "#3b3b3b",
3035
3028
  "sds-color-semantic-base-divider-inverse": "#3b3b3b",
3036
- "sds-color-semantic-base-fill-disabled": "#dfdfdf",
3037
- "sds-color-semantic-base-fill-hover": "#c3c3c333",
3038
- "sds-color-semantic-base-fill-hover-on-dark": "#c3c3c357",
3039
- "sds-color-semantic-base-fill-hover-inverse": "#c3c3c357",
3040
- "sds-color-semantic-base-fill-open": "#c3c3c333",
3041
- "sds-color-semantic-base-fill-open-on-dark": "#c3c3c357",
3029
+ "sds-color-semantic-base-fill-disabled": "#ededed",
3030
+ "sds-color-semantic-base-fill-interaction": "#c3c3c333",
3031
+ "sds-color-semantic-base-fill-interaction-on-dark": "#c3c3c333",
3032
+ "sds-color-semantic-base-fill-hover-inverse": "#c3c3c333",
3042
3033
  "sds-color-semantic-base-fill-open-inverse": "#c3c3c357",
3043
- "sds-color-semantic-base-fill-pressed": "#c3c3c333",
3044
- "sds-color-semantic-base-fill-pressed-on-dark": "#c3c3c357",
3034
+ "sds-color-semantic-base-fill-pressed": "#c3c3c34d",
3035
+ "sds-color-semantic-base-fill-pressed-on-dark": "#c3c3c33d",
3045
3036
  "sds-color-semantic-base-fill-pressed-inverse": "#c3c3c357",
3046
3037
  "sds-color-semantic-base-fill-primary": "#ffffff",
3047
3038
  "sds-color-semantic-base-fill-selected": "#000000",
@@ -3053,16 +3044,15 @@
3053
3044
  "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
3054
3045
  "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
3055
3046
  "sds-color-semantic-base-ornament-secondary": "#767676",
3056
- "sds-color-semantic-base-ornament-secondary-hover": "#000000",
3057
- "sds-color-semantic-base-ornament-secondary-hover-on-dark": "#ffffff",
3047
+ "sds-color-semantic-base-ornament-secondary-interaction": "#000000",
3048
+ "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
3058
3049
  "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
3059
3050
  "sds-color-semantic-base-ornament-secondary-on-dark": "#c3c3c3",
3060
3051
  "sds-color-semantic-base-ornament-secondary-inverse": "#c3c3c3",
3061
- "sds-color-semantic-base-ornament-secondary-pressed": "#000000",
3062
- "sds-color-semantic-base-ornament-secondary-pressed-on-dark": "#ffffff",
3063
3052
  "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
3064
- "sds-color-semantic-base-surface": "#ffffff",
3065
- "sds-color-semantic-base-surface-on-dark": "#000000",
3053
+ "sds-color-semantic-base-surface-primary": "#ffffff",
3054
+ "sds-color-semantic-base-surface-secondary": "#c3c3c333",
3055
+ "sds-color-semantic-base-surface-primary-dark": "#000000",
3066
3056
  "sds-color-semantic-base-surface-inverse": "#000000",
3067
3057
  "sds-color-semantic-base-text-disabled": "#c3c3c3",
3068
3058
  "sds-color-semantic-base-text-disabled-on-dark": "#767676",
@@ -3139,7 +3129,7 @@
3139
3129
  "sds-xs": "6px",
3140
3130
  "sds-s": "8px",
3141
3131
  "sds-m": "12px",
3142
- "sds-default": "12px",
3132
+ "sds-default": "8px",
3143
3133
  "sds-l": "16px",
3144
3134
  "sds-xl": "24px",
3145
3135
  "sds-xxl": "32px",