@typlog/ui 0.12.2 → 0.13.0

package/components/inputs.css

@@ -1,570 +0,0 @@
-
-.ui-TextField {
-  display: flex;
-  align-items: stretch;
-  font-weight: var(--font-weight-regular);
-  font-style: normal;
-  text-align: start;
-  box-sizing: border-box;
-  height: var(--text-field-height);
-  padding: var(--text-field-border-width);
-  border-radius: var(--text-field-border-radius);
-}
-@supports selector(:has(*)) {
-.ui-TextField:where(:has(input[type=file])) {
-    align-items: center;
-}
-}
-.ui-TextField::-moz-selection {
-  background-color: var(--text-field-selection-color);
-}
-.ui-TextField::selection {
-  background-color: var(--text-field-selection-color);
-}
-.ui-TextFieldInput {
-  text-align: inherit;
-  border: none;
-  padding: 0;
-  width: 100%;
-  font-size: 1em;
-  background-color: transparent;
-  border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width));
-  text-indent: var(--text-field-padding);
-  cursor: auto;
-}
-.ui-TextFieldInput:focus {
-  outline: none;
-  box-shadow: none;
-}
-.ui-TextFieldInput:where([type=file]) {
-  font-size: 0.875em;
-  background-color: transparent;
-  text-indent: calc(var(--text-field-padding) / 2);
-}
-.ui-TextFieldInput:where([type=date], [type=datetime-local], [type=time], [type=week], [type=month]) {
-  text-indent: 0;
-  padding-left: var(--text-field-padding);
-  padding-right: var(--text-field-padding);
-}
-.ui-TextFieldInput::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-          appearance: none;
-}
-.ui-TextFieldInput::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-          appearance: none;
-}
-.ui-TextFieldInput::-moz-selection {
-  background-color: var(--text-field-selection-color);
-}
-.ui-TextFieldInput::selection {
-  background-color: var(--text-field-selection-color);
-}
-.ui-TextFieldInput::-webkit-calendar-picker-indicator {
-  box-sizing: content-box;
-  width: var(--text-field-native-icon-size);
-  height: var(--text-field-native-icon-size);
-  padding: var(--space-1);
-  margin-left: 0;
-  margin-right: calc(var(--space-1) * -1);
-  border-radius: calc(var(--text-field-border-radius) - 2px);
-}
-.ui-TextFieldInput:where(:not([type=time]))::-webkit-calendar-picker-indicator {
-  margin-left: var(--space-1);
-}
-.ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:hover) {
-  background-color: var(--gray-a3);
-}
-.ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:focus-visible) {
-  outline: 2px solid var(--text-field-focus-color);
-}
-.ui-TextFieldInput::-webkit-datetime-edit-ampm-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-day-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-hour-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-millisecond-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-minute-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-month-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-second-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-week-field:where(:focus),
-.ui-TextFieldInput::-webkit-datetime-edit-year-field:where(:focus) {
-  background-color: var(--text-field-selection-color);
-  color: inherit;
-  outline: none;
-}
-.ui-TextFieldInput:where(:-webkit-autofill) {
-  /* Reliably removes native autofill colors */
-  -webkit-background-clip: text;
-          background-clip: text;
-  -webkit-text-fill-color: var(--gray-12);
-}
-.ui-TextFieldInput:where(:autofill) {
-  /* Reliably removes native autofill colors */
-  -webkit-background-clip: text;
-          background-clip: text;
-  -webkit-text-fill-color: var(--gray-12);
-}
-.ui-TextFieldSlot {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  cursor: text;
-  gap: var(--space-2);
-  padding-left: var(--text-field-slot-padding);
-  padding-right: var(--text-field-slot-padding);
-}
-.ui-TextFieldSlot:where([data-side=left]) {
-  order: -1;
-  margin-left: calc(var(--text-field-border-width) * -1);
-  margin-right: 0;
-}
-.ui-TextFieldSlot:where([data-side=right]) {
-  order: 0;
-  margin-left: 0;
-  margin-right: calc(var(--text-field-border-width) * -1);
-}
-.ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot:not([data-side=right]))) {
-  text-indent: 0;
-  padding-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot[data-side=right],
-~ .ui-TextFieldSlot:not([data-side=right]) ~ .ui-TextFieldSlot:not([data-side=left]))) {
-  padding-right: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.ui-TextField:where(.r-size-1) {
-  --text-field-height: var(--space-5);
-  --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
-  --text-field-border-radius: max(var(--radius-2), var(--radius-full));
-  --text-field-native-icon-size: var(--space-3);
-  --text-field-slot-padding: var(--space-1);
-  font-size: var(--font-size-1);
-  letter-spacing: var(--letter-spacing-1);
-}
-.ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput) {
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
-}
-.ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
-  padding-right: 0px;
-  margin-right: -2px;
-}
-.ui-TextField:where(.r-size-2) {
-  --text-field-height: var(--space-6);
-  --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
-  --text-field-border-radius: max(var(--radius-2), var(--radius-full));
-  --text-field-native-icon-size: var(--space-4);
-  --text-field-slot-padding: var(--space-2);
-  font-size: var(--font-size-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-.ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput) {
-  /* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
-  /* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
-  padding-bottom: 0.5px;
-  /* Safari credentials autofill icon */
-}
-.ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
-  padding-right: 2px;
-  margin-right: 0px;
-}
-.ui-TextField:where(.r-size-3) {
-  --text-field-height: var(--space-7);
-  --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
-  --text-field-border-radius: max(var(--radius-3), var(--radius-full));
-  --text-field-native-icon-size: var(--space-4);
-  --text-field-slot-padding: var(--space-3);
-  font-size: var(--font-size-3);
-  letter-spacing: var(--letter-spacing-3);
-}
-.ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput) {
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
-}
-.ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
-  padding-right: 5px;
-  margin-right: 0px;
-}
-.ui-TextField:where(.r-size-3) :where(.ui-TextFieldSlot) {
-  gap: var(--space-3);
-}
-.ui-TextField:where(.r-variant-surface) {
-  --text-field-selection-color: var(--focus-a5);
-  --text-field-focus-color: var(--focus-a8);
-  --text-field-border-width: 1px;
-  --text-field-border-color: var(--gray-a7);
-  /* Blend inner shadow with page background */
-  background-clip: content-box;
-  background-color: var(--color-surface);
-  box-sizing: border-box;
-  border: var(--text-field-border-width) solid var(--text-field-border-color);
-  color: var(--gray-12);
-}
-@supports selector(:has(*)) {
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:focus)) {
-    --text-field-border-color: var(--text-field-focus-color);
-    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-}
-@supports not selector(:has(*)) {
-.ui-TextField:where(.r-variant-surface):where(:focus-within) {
-    --text-field-border-color: var(--text-field-focus-color);
-    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-}
-.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::-moz-placeholder {
-  color: var(--gray-a10);
-}
-.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::placeholder {
-  color: var(--gray-a10);
-}
-.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot) {
-  color: var(--gray-a11);
-}
-.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot):where([data-accent-color]) {
-  color: var(--accent-a11);
-}
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
-  /* Blend with focus color */
-  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  border-color: var(--gray-a5);
-}
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
-  /* Blend with focus color */
-  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  border-color: var(--gray-a5);
-}
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
-  /* Blend with focus color */
-  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  border-color: var(--gray-a5);
-}
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
-  /* Blend with grey */
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  border-color: var(--gray-a6);
-}
-.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
-  /* Blend with grey */
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  border-color: var(--gray-a6);
-}
-
-/* soft */
-.ui-TextField:where(.r-variant-soft) {
-  --text-field-selection-color: var(--accent-a5);
-  --text-field-focus-color: var(--accent-8);
-  --text-field-border-width: 0px;
-  background-color: var(--accent-a3);
-  color: var(--accent-12);
-  /* prettier-ignore */
-}
-@supports selector(:has(*)) {
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:focus)) {
-    outline: 2px solid var(--text-field-focus-color);
-    outline-offset: -1px;
-}
-}
-@supports not selector(:has(*)) {
-.ui-TextField:where(.r-variant-soft):where(:focus-within) {
-    outline: 2px solid var(--text-field-focus-color);
-    outline-offset: -1px;
-}
-}
-.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::-moz-placeholder {
-  color: var(--accent-12);
-  opacity: 0.6;
-}
-.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::placeholder {
-  color: var(--accent-12);
-  opacity: 0.6;
-}
-.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot) {
-  color: var(--accent-12);
-}
-.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot):where([data-accent-color]) {
-  color: var(--accent-a11);
-}
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
-  /* Use gray autofill color when component color is gray */
-  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
-}
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
-  /* Use gray autofill color when component color is gray */
-  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
-}
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
-  /* Use gray autofill color when component color is gray */
-  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
-}
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
-  background-color: var(--gray-a3);
-}
-.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
-  background-color: var(--gray-a3);
-}
-
-/* all disabled and read-only text fields */
-.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])) {
-  cursor: text;
-  color: var(--gray-a11);
-  /* Safari */
-  -webkit-text-fill-color: var(--gray-a11);
-}
-.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])) {
-  cursor: text;
-  color: var(--gray-a11);
-  /* Safari */
-  -webkit-text-fill-color: var(--gray-a11);
-}
-.ui-TextFieldInput:where(:disabled, :read-only)::-moz-placeholder {
-  opacity: 0.5;
-}
-.ui-TextFieldInput:where(:disabled, :-moz-read-only)::placeholder {
-  opacity: 0.5;
-}
-.ui-TextFieldInput:where(:disabled, :read-only)::placeholder {
-  opacity: 0.5;
-}
-.ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) ~ :where(.ui-TextFieldSlot) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
-  cursor: var(--cursor-disabled);
-}
-.ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
-  --text-field-selection-color: var(--gray-a5);
-  --text-field-focus-color: var(--gray-8);
-}
-.ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
-  --text-field-selection-color: var(--gray-a5);
-  --text-field-focus-color: var(--gray-8);
-}
-
-.ui-TextArea {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  font-weight: var(--font-weight-regular);
-  font-style: normal;
-  text-align: start;
-  overflow: hidden;
-  width: 100%;
-}
-.ui-TextAreaInput {
-  border-radius: inherit;
-  resize: none;
-  display: block;
-  width: 100%;
-  flex-grow: 1;
-  cursor: auto;
-  border: none;
-  padding: var(--text-area-padding-y) var(--text-area-padding-x);
-  font-size: 1em;
-  background-color: transparent;
-}
-.ui-TextAreaInput:focus {
-  outline: none;
-  box-shadow: none;
-}
-.ui-TextAreaInput:where(:disabled) {
-  cursor: not-allowed;
-}
-.ui-TextAreaInput::-webkit-scrollbar {
-  width: var(--space-3);
-  height: var(--space-3);
-}
-.ui-TextAreaInput::-webkit-scrollbar-track,
-.ui-TextAreaInput::-webkit-scrollbar-thumb {
-  background-clip: content-box;
-  border: var(--space-1) solid transparent;
-  border-radius: var(--space-3);
-}
-.ui-TextAreaInput::-webkit-scrollbar-track {
-  background-color: var(--gray-a3);
-}
-.ui-TextAreaInput::-webkit-scrollbar-thumb {
-  background-color: var(--gray-a8);
-}
-.ui-TextAreaInput:where(:not(:disabled))::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gray-a9);
-}
-.ui-TextArea:where(.r-size-1) {
-  min-height: var(--space-8);
-  border-radius: var(--radius-2);
-}
-.ui-TextArea:where(.r-size-1) .ui-TextAreaInput {
-  --text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-}
-.ui-TextArea:where(.r-size-2) {
-  min-height: var(--space-9);
-  border-radius: var(--radius-2);
-}
-.ui-TextArea:where(.r-size-2) .ui-TextAreaInput {
-  --text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-.ui-TextArea:where(.r-size-3) {
-  min-height: 80px;
-  border-radius: var(--radius-3);
-}
-.ui-TextArea:where(.r-size-3) .ui-TextAreaInput {
-  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-  letter-spacing: var(--letter-spacing-3);
-}
-.ui-TextArea:where(.r-variant-surface) {
-  --text-area-border-width: 1px;
-  --text-area-border-color: var(--gray-a7);
-  /* Blend inner shadow with page background */
-  background-clip: content-box;
-  background-color: var(--color-surface);
-  border: var(--text-area-border-width) solid var(--text-area-border-color);
-  color: var(--gray-12);
-}
-.ui-TextArea:where(.r-variant-surface):where(:focus-within) {
-  --text-area-border-color: var(--focus-a8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::-moz-placeholder {
-  color: var(--gray-a10);
-}
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::placeholder {
-  color: var(--gray-a10);
-}
-.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:-moz-read-only) {
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-}
-.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:read-only) {
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-}
-.ui-TextArea:where(.r-variant-soft) {
-  --text-area-border-width: 0px;
-  background-color: var(--accent-a3);
-  color: var(--accent-12);
-}
-.ui-TextArea:where(.r-variant-soft):where(:focus-within) {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -1px;
-}
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-selection {
-  background-color: var(--accent-a5);
-}
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::selection {
-  background-color: var(--accent-a5);
-}
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-placeholder {
-  color: var(--accent-12);
-  opacity: 0.65;
-}
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::placeholder {
-  color: var(--accent-12);
-  opacity: 0.65;
-}
-.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:-moz-read-only) {
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
-}
-.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:read-only) {
-  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
-}
-
-.ui-ColorField {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--color-field-size);
-  height: var(--color-field-size);
-  border-radius: var(--color-field-radius);
-}
-.ui-ColorField:where(.r-size-1) {
-  --color-field-size: var(--space-5);
-  --color-field-radius: max(var(--radius-2), var(--radius-full));
-  --color-field-border-width: 1px;
-}
-.ui-ColorField:where(.r-size-2) {
-  --color-field-size: var(--space-6);
-  --color-field-radius: max(var(--radius-2), var(--radius-full));
-  --color-field-border-width: 2px;
-}
-.ui-ColorField:where(.r-size-3) {
-  --color-field-size: var(--space-7);
-  --color-field-radius: max(var(--radius-3), var(--radius-full));
-  --color-field-border-width: 3px;
-}
-.ui-ColorField:where(.r-variant-solid) {
-  --color-input-size: var(--color-field-size);
-  --color-input-radius: var(--color-field-radius);
-}
-.ui-ColorField:where(.r-variant-ring) {
-  --color-input-size: calc(var(--color-field-size) - var(--color-field-border-width) * 4);
-  --color-input-radius: calc(var(--color-field-radius) - 2px);
-  border: var(--color-field-border-width) solid var(--color-field-color);
-}
-.ui-ColorFieldInput {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: var(--color-input-size);
-  height: var(--color-input-size);
-  border-radius: var(--color-input-radius);
-}
-.ui-ColorFieldInput::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: var(--color-input-radius);
-}
-.ui-ColorFieldInput::-webkit-color-swatch {
-  border: none;
-  border-radius: var(--color-input-radius);
-}
-.ui-ColorFieldInput::-moz-color-swatch {
-  border: none;
-  border-radius: var(--color-input-radius);
-}
-@supports selector(:has(*)) {
-.ui-ColorField:where(:has(.ui-ColorFieldInput:focus)) {
-    --text-field-border-color: var(--text-field-focus-color);
-    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-}
-:where(.ui-TextFieldSlot[data-side="left"]) .ui-ColorField {
-  margin-left: calc(0px - var(--text-field-slot-padding) / 2);
-}
-:where(.ui-TextFieldSlot[data-side="right"]) .ui-ColorField {
-  margin-right: calc(0px - var(--text-field-slot-padding) / 2);
-}
-:where(.ui-TextFieldSlot) .ui-ColorField,
-:where(.ui-TextFieldSlot) .ui-ColorFieldInput {
-  width: calc(var(--color-field-size) - var(--text-field-padding));
-  height: calc(var(--color-field-size) - var(--text-field-padding));
-}