@@ -85,6 +85,100 @@ input[type="color"] {
8585 padding : var (--space-4 )
8686}
8787
88+ input [type = "color" ][data-palette-swatch-preview ] {
89+ width : var (--space-44 );
90+ min-width : var (--space-44 );
91+ height : var (--space-44 );
92+ min-height : var (--space-44 );
93+ padding : var (--space-0 );
94+ border : var (--border-width-sm ) solid var (--line );
95+ border-radius : var (--radius-xs );
96+ background : transparent;
97+ overflow : hidden
98+ }
99+
100+ input [type = "color" ][data-palette-swatch-preview ]::-webkit-color-swatch-wrapper {
101+ padding : var (--space-0 )
102+ }
103+
104+ input [type = "color" ][data-palette-swatch-preview ]::-webkit-color-swatch {
105+ border : var (--border-width-sm ) solid var (--line );
106+ border-radius : var (--radius-xs )
107+ }
108+
109+ input [type = "color" ][data-palette-swatch-size = "small" ] {
110+ width : var (--space-28 );
111+ min-width : var (--space-28 );
112+ height : var (--space-28 );
113+ min-height : var (--space-28 )
114+ }
115+
116+ input [type = "color" ][data-palette-swatch-size = "large" ] {
117+ width : var (--space-54 );
118+ min-width : var (--space-54 );
119+ height : var (--space-54 );
120+ min-height : var (--space-54 )
121+ }
122+
123+ .palette-swatch-list-wrapper {
124+ overflow : auto
125+ }
126+
127+ .palette-swatch-list {
128+ display : flex;
129+ flex-wrap : wrap;
130+ gap : var (--space-8 );
131+ align-items : flex-start
132+ }
133+
134+ .palette-swatch-tile {
135+ position : relative;
136+ display : inline-flex;
137+ align-items : center;
138+ justify-content : center;
139+ padding : var (--space-0 );
140+ border : 0 ;
141+ border-radius : var (--radius-xs );
142+ background : var (--transparent );
143+ line-height : var (--line-height-single );
144+ min-width : auto;
145+ min-height : auto;
146+ transition : box-shadow var (--transition-duration-fast ), transform var (--transition-duration-fast )
147+ }
148+
149+ .palette-swatch-tile input [type = "color" ] {
150+ pointer-events : none
151+ }
152+
153+ .palette-swatch-tile : hover ,
154+ .palette-swatch-tile : focus-visible {
155+ box-shadow : 0 0 0 var (--space-3 ) var (--gold-soft ), 0 0 var (--space-18 ) var (--orange-shadow-color );
156+ transform : translateY (-1px );
157+ z-index : var (--z-index-sm )
158+ }
159+
160+ .palette-swatch-tile : focus-visible {
161+ outline : var (--border-width-sm ) solid var (--gold );
162+ outline-offset : var (--space-3 )
163+ }
164+
165+ .palette-swatch-pin {
166+ position : absolute;
167+ top : var (--space-3 );
168+ right : var (--space-3 );
169+ width : var (--space-10 );
170+ height : var (--space-10 );
171+ border : var (--border-width-sm ) solid var (--bg );
172+ border-radius : var (--radius-pill );
173+ background : var (--red );
174+ box-shadow : var (--shadow-sm );
175+ pointer-events : none
176+ }
177+
178+ .palette-swatch-tile [data-palette-pinned = "true" ] .palette-swatch-pin {
179+ background : var (--green )
180+ }
181+
88182input [type = "file" ],
89183select {
90184 min-height : var (--space-44 )
0 commit comments