@seed-design/css 0.1.3 → 0.1.4
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 -0
- package/all.css +223 -0
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/chip.css +190 -0
- package/recipes/chip.d.ts +32 -0
- package/recipes/chip.mjs +80 -0
- package/vars/component/chip.d.ts +373 -0
- package/vars/component/chip.mjs +373 -0
- package/vars/component/index.d.ts +1 -0
- package/vars/component/index.mjs +1 -0
package/README.md
CHANGED
package/all.css
CHANGED
|
@@ -2868,6 +2868,229 @@
|
|
|
2868
2868
|
min-width: var(--seed-dimension-x8);
|
|
2869
2869
|
}
|
|
2870
2870
|
|
|
2871
|
+
.seed-chip__root {
|
|
2872
|
+
box-sizing: border-box;
|
|
2873
|
+
cursor: pointer;
|
|
2874
|
+
text-transform: none;
|
|
2875
|
+
text-align: start;
|
|
2876
|
+
white-space: nowrap;
|
|
2877
|
+
-webkit-font-smoothing: antialiased;
|
|
2878
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2879
|
+
border-radius: var(--seed-radius-full);
|
|
2880
|
+
transition-duration: var(--seed-duration-d4);
|
|
2881
|
+
transition-timing-function: var(--seed-timing-function-easing);
|
|
2882
|
+
border: none;
|
|
2883
|
+
flex-shrink: 0;
|
|
2884
|
+
justify-content: center;
|
|
2885
|
+
align-items: center;
|
|
2886
|
+
line-height: 1;
|
|
2887
|
+
transition-property: background-color, color, border-color, box-shadow;
|
|
2888
|
+
display: inline-flex;
|
|
2889
|
+
}
|
|
2890
|
+
|
|
2891
|
+
.seed-chip__root:is(:focus, [data-focus]) {
|
|
2892
|
+
outline: none;
|
|
2893
|
+
}
|
|
2894
|
+
|
|
2895
|
+
.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
|
|
2896
|
+
cursor: not-allowed;
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
.seed-chip__root {
|
|
2900
|
+
--seed-icon-color: inherit;
|
|
2901
|
+
}
|
|
2902
|
+
|
|
2903
|
+
.seed-chip__label {
|
|
2904
|
+
font-weight: var(--seed-font-weight-medium);
|
|
2905
|
+
padding-inline: var(--seed-dimension-x1_5);
|
|
2906
|
+
color: inherit;
|
|
2907
|
+
justify-content: center;
|
|
2908
|
+
align-items: center;
|
|
2909
|
+
display: inline-flex;
|
|
2910
|
+
}
|
|
2911
|
+
|
|
2912
|
+
.seed-chip__prefixIcon {
|
|
2913
|
+
padding-left: var(--seed-dimension-x1_5);
|
|
2914
|
+
--seed-icon-color: inherit;
|
|
2915
|
+
flex-shrink: 0;
|
|
2916
|
+
align-items: center;
|
|
2917
|
+
display: inline-flex;
|
|
2918
|
+
}
|
|
2919
|
+
|
|
2920
|
+
.seed-chip__prefixAvatar {
|
|
2921
|
+
flex-shrink: 0;
|
|
2922
|
+
align-items: center;
|
|
2923
|
+
display: inline-flex;
|
|
2924
|
+
}
|
|
2925
|
+
|
|
2926
|
+
.seed-chip__suffixIcon {
|
|
2927
|
+
padding-right: var(--seed-dimension-x1_5);
|
|
2928
|
+
--seed-icon-color: inherit;
|
|
2929
|
+
flex-shrink: 0;
|
|
2930
|
+
align-items: center;
|
|
2931
|
+
display: inline-flex;
|
|
2932
|
+
}
|
|
2933
|
+
|
|
2934
|
+
.seed-chip__root--variant_solid {
|
|
2935
|
+
background: var(--seed-color-bg-neutral-weak);
|
|
2936
|
+
color: var(--seed-color-fg-neutral);
|
|
2937
|
+
}
|
|
2938
|
+
|
|
2939
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]) {
|
|
2940
|
+
box-shadow: none;
|
|
2941
|
+
background: var(--seed-color-bg-neutral-inverted);
|
|
2942
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
2943
|
+
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
2944
|
+
}
|
|
2945
|
+
|
|
2946
|
+
.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
2947
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
2948
|
+
color: var(--seed-color-fg-neutral);
|
|
2949
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2950
|
+
}
|
|
2951
|
+
|
|
2952
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
2953
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
2954
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
2955
|
+
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
2956
|
+
}
|
|
2957
|
+
|
|
2958
|
+
.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
2959
|
+
opacity: .5;
|
|
2960
|
+
}
|
|
2961
|
+
|
|
2962
|
+
.seed-chip__root--variant_solid {
|
|
2963
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2964
|
+
}
|
|
2965
|
+
|
|
2966
|
+
.seed-chip__root--variant_outlineStrong {
|
|
2967
|
+
background: var(--seed-color-bg-layer-default);
|
|
2968
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
|
|
2969
|
+
color: var(--seed-color-fg-neutral);
|
|
2970
|
+
}
|
|
2971
|
+
|
|
2972
|
+
.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
2973
|
+
background: var(--seed-color-bg-layer-default-pressed);
|
|
2974
|
+
color: var(--seed-color-fg-neutral);
|
|
2975
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2976
|
+
}
|
|
2977
|
+
|
|
2978
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
|
|
2979
|
+
background: var(--seed-color-bg-neutral-inverted);
|
|
2980
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
2981
|
+
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
2982
|
+
}
|
|
2983
|
+
|
|
2984
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
2985
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
2986
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
2987
|
+
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
2988
|
+
}
|
|
2989
|
+
|
|
2990
|
+
.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
|
|
2991
|
+
opacity: .5;
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2994
|
+
.seed-chip__root--variant_outlineStrong {
|
|
2995
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2996
|
+
}
|
|
2997
|
+
|
|
2998
|
+
.seed-chip__root--variant_outlineWeak {
|
|
2999
|
+
background: var(--seed-color-bg-layer-default);
|
|
3000
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
|
|
3001
|
+
color: var(--seed-color-fg-neutral);
|
|
3002
|
+
}
|
|
3003
|
+
|
|
3004
|
+
.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3005
|
+
background: var(--seed-color-bg-layer-default-pressed);
|
|
3006
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
|
|
3007
|
+
color: var(--seed-color-fg-neutral);
|
|
3008
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3009
|
+
}
|
|
3010
|
+
|
|
3011
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
|
|
3012
|
+
background: var(--seed-color-bg-neutral-weak);
|
|
3013
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
|
|
3014
|
+
color: var(--seed-color-fg-neutral);
|
|
3015
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3016
|
+
}
|
|
3017
|
+
|
|
3018
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3019
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
3020
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
|
|
3021
|
+
color: var(--seed-color-fg-neutral);
|
|
3022
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3023
|
+
}
|
|
3024
|
+
|
|
3025
|
+
.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
3026
|
+
opacity: .5;
|
|
3027
|
+
}
|
|
3028
|
+
|
|
3029
|
+
.seed-chip__root--variant_outlineWeak {
|
|
3030
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3031
|
+
}
|
|
3032
|
+
|
|
3033
|
+
.seed-chip__root--size_large {
|
|
3034
|
+
height: 40px;
|
|
3035
|
+
padding-inline: var(--seed-dimension-x2_5);
|
|
3036
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
.seed-chip__label--size_large {
|
|
3040
|
+
font-size: var(--seed-font-size-t4);
|
|
3041
|
+
line-height: var(--seed-line-height-t4);
|
|
3042
|
+
}
|
|
3043
|
+
|
|
3044
|
+
.seed-chip__prefixIcon--size_large, .seed-chip__suffixIcon--size_large {
|
|
3045
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
3046
|
+
}
|
|
3047
|
+
|
|
3048
|
+
.seed-chip__root--size_medium {
|
|
3049
|
+
height: 36px;
|
|
3050
|
+
padding-inline: var(--seed-dimension-x2);
|
|
3051
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
3052
|
+
}
|
|
3053
|
+
|
|
3054
|
+
.seed-chip__label--size_medium {
|
|
3055
|
+
font-size: var(--seed-font-size-t4);
|
|
3056
|
+
line-height: var(--seed-line-height-t4);
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3059
|
+
.seed-chip__prefixIcon--size_medium {
|
|
3060
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
3061
|
+
}
|
|
3062
|
+
|
|
3063
|
+
.seed-chip__suffixIcon--size_medium {
|
|
3064
|
+
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
3065
|
+
}
|
|
3066
|
+
|
|
3067
|
+
.seed-chip__root--size_small {
|
|
3068
|
+
height: 32px;
|
|
3069
|
+
padding-inline: var(--seed-dimension-x1_5);
|
|
3070
|
+
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
3071
|
+
}
|
|
3072
|
+
|
|
3073
|
+
.seed-chip__label--size_small {
|
|
3074
|
+
font-size: var(--seed-font-size-t4);
|
|
3075
|
+
line-height: var(--seed-line-height-t4);
|
|
3076
|
+
}
|
|
3077
|
+
|
|
3078
|
+
.seed-chip__prefixIcon--size_small, .seed-chip__suffixIcon--size_small {
|
|
3079
|
+
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
3080
|
+
}
|
|
3081
|
+
|
|
3082
|
+
.seed-chip__root--size_small-layout_iconOnly {
|
|
3083
|
+
min-width: var(--seed-dimension-x8);
|
|
3084
|
+
}
|
|
3085
|
+
|
|
3086
|
+
.seed-chip__root--size_medium-layout_iconOnly {
|
|
3087
|
+
min-width: var(--seed-dimension-x9);
|
|
3088
|
+
}
|
|
3089
|
+
|
|
3090
|
+
.seed-chip__root--size_large-layout_iconOnly {
|
|
3091
|
+
min-width: var(--seed-dimension-x10);
|
|
3092
|
+
}
|
|
3093
|
+
|
|
2871
3094
|
.seed-control-chip {
|
|
2872
3095
|
box-sizing: border-box;
|
|
2873
3096
|
cursor: pointer;
|