@@ -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