@educarehq/solaris-ui 0.2.0 → 0.3.1

package/styles/_input.scss

@@ -1,255 +1,255 @@
-input[solaris-input] {
-  --solaris-input-background: initial;
-  --solaris-input-color: initial;
-  --solaris-input-border-color: initial;
-  --solaris-input-border-width: initial;
-  --solaris-input-radius: initial;
-  --solaris-input-height: initial;
-  --solaris-input-padding-x: initial;
-  --solaris-input-padding-y: initial;
-  --solaris-input-font-size: initial;
-  --solaris-input-line-height: initial;
-  --solaris-input-placeholder-color: initial;
-  --solaris-input-focus-ring-color: initial;
-  --solaris-input-invalid-border-color: initial;
-  --solaris-input-disabled-opacity: initial;
-  --solaris-input-readonly-background: initial;
-
-  font-family: var(--solaris-font-family-sans), system-ui;
-  box-sizing: border-box;
-  margin: 0;
-  width: 100%;
-  color: var(--solaris-input-color);
-  background: var(--solaris-input-background);
-  border: var(--solaris-input-border-width) solid
-    var(--solaris-input-border-color);
-  border-radius: var(--solaris-input-radius);
-  height: var(--solaris-input-height);
-  padding: var(--solaris-input-padding-y) var(--solaris-input-padding-x);
-  font-size: var(--solaris-input-font-size);
-  line-height: var(--solaris-input-line-height);
-  outline: none;
-  transition:
-    border-color var(--solaris-motion-duration-fast, 150ms) ease,
-    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
-}
-
-input[solaris-input]::placeholder {
-  color: var(--solaris-input-placeholder-color);
-  opacity: 1;
-}
-
-input[solaris-input]:focus-visible {
-  border-color: var(--solaris-input-focus-ring-color);
-  // SOLARIS_TOKEN_EXCEPTION: Focus ring box-shadow uses CSS var with tokenized color. Hardcoded spread is required by design.
-  box-shadow: 0 0 0 2px var(--solaris-input-focus-ring-color);
-}
-
-input[solaris-input][data-invalid] {
-  border-color: var(--solaris-input-invalid-border-color);
-}
-
-input[solaris-input][data-invalid]:focus-visible {
-  border-color: var(--solaris-input-invalid-border-color);
-  // SOLARIS_TOKEN_EXCEPTION: Invalid state focus ring box-shadow uses CSS var. Hardcoded spread required by design.
-  box-shadow: 0 0 0 2px var(--solaris-input-invalid-border-color);
-}
-
-input[solaris-input]:disabled {
-  cursor: not-allowed;
-  opacity: var(--solaris-input-disabled-opacity);
-}
-
-input[solaris-input][readonly] {
-  background: var(--solaris-input-readonly-background);
-  cursor: default;
-}
-
-input[solaris-input]::-webkit-search-decoration,
-input[solaris-input]::-webkit-search-cancel-button,
-input[solaris-input]::-webkit-search-results-button,
-input[solaris-input]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-input[solaris-input]::-webkit-inner-spin-button,
-input[solaris-input]::-webkit-outer-spin-button {
-  opacity: 1;
-}
-
-input[solaris-input]:autofill,
-input[solaris-input]:-webkit-autofill {
-  -webkit-text-fill-color: var(--solaris-input-color);
-  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill requires hardcoded box-shadow inset to override browser default yellow background.
-  -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-input[solaris-input][data-appearance='outline'] {
-  --solaris-input-background: var(--solaris-surface-base);
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-border-color: var(--solaris-border-default);
-  --solaris-input-border-width: var(--solaris-border-width-sm);
-  --solaris-input-placeholder-color: var(--solaris-text-muted);
-  --solaris-input-focus-ring-color: var(--solaris-primary-base);
-  --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
-  --solaris-input-readonly-background: var(--solaris-surface-muted);
-}
-
-input[solaris-input][data-appearance='surface'] {
-  --solaris-input-background: var(--solaris-surface-muted);
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-border-color: var(--solaris-border-subtle);
-  --solaris-input-border-width: var(--solaris-border-width-sm);
-  --solaris-input-placeholder-color: var(--solaris-text-muted);
-  --solaris-input-focus-ring-color: var(--solaris-primary-base);
-  --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
-  --solaris-input-readonly-background: var(--solaris-surface-base);
-}
-
-input[solaris-input][data-appearance='filled'] {
-  --solaris-input-background: var(--solaris-surface-muted);
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-border-color: transparent;
-  --solaris-input-border-width: 0 0 var(--solaris-border-width-sm) 0;
-  --solaris-input-placeholder-color: var(--solaris-text-muted);
-  --solaris-input-focus-ring-color: var(--solaris-primary-base);
-  --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
-  --solaris-input-readonly-background: var(--solaris-surface-base);
-}
-
-input[solaris-input][data-size='sm'] {
-  --solaris-input-height: var(--solaris-spacing-8);
-  --solaris-input-padding-x: var(--solaris-spacing-2);
-  --solaris-input-padding-y: var(--solaris-spacing-1);
-  --solaris-input-font-size: var(--solaris-font-size-sm);
-  --solaris-input-line-height: var(--solaris-line-height-sm);
-}
-
-input[solaris-input][data-size='md'] {
-  --solaris-input-height: var(--solaris-spacing-10);
-  --solaris-input-padding-x: var(--solaris-spacing-3);
-  --solaris-input-padding-y: var(--solaris-spacing-2);
-  --solaris-input-font-size: var(--solaris-font-size-md);
-  --solaris-input-line-height: var(--solaris-line-height-md);
-}
-
-input[solaris-input][data-size='lg'] {
-  --solaris-input-height: var(--solaris-spacing-12);
-  --solaris-input-padding-x: var(--solaris-spacing-4);
-  --solaris-input-padding-y: var(--solaris-spacing-2);
-  --solaris-input-font-size: var(--solaris-font-size-lg);
-  --solaris-input-line-height: var(--solaris-line-height-lg);
-}
-
-input[solaris-input][data-density='compact'] {
-  --solaris-input-height: var(--solaris-density-min-height);
-  --solaris-input-padding-y: var(--solaris-density-padding-xs);
-  --solaris-input-line-height: var(--solaris-line-height-sm);
-}
-
-input[solaris-input][data-density='comfortable'] {
-  --solaris-input-padding-y: var(--solaris-density-padding-sm);
-  --solaris-input-line-height: var(--solaris-line-height-md);
-}
-
-input[solaris-input][data-radius='none'] {
-  --solaris-input-radius: var(--solaris-radius-none);
-}
-
-input[solaris-input][data-radius='sm'] {
-  --solaris-input-radius: var(--solaris-radius-sm);
-}
-
-input[solaris-input][data-radius='md'] {
-  --solaris-input-radius: var(--solaris-radius-md);
-}
-
-input[solaris-input][data-radius='lg'] {
-  --solaris-input-radius: var(--solaris-radius-lg);
-}
-
-input[solaris-input][data-full-width] {
-  width: 100%;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  input[solaris-input] {
-    transition: none;
-  }
-}
-
-[data-reduced-motion='true'] input[solaris-input] {
-  transition: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  input[solaris-input]:autofill,
-  input[solaris-input]:-webkit-autofill {
-    -webkit-text-fill-color: var(--solaris-input-color);
-    // SOLARIS_TOKEN_EXCEPTION: WebKit autofill dark mode requires hardcoded box-shadow inset override.
-    -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
-  }
-}
-
-solaris-form-field input[solaris-input] {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  height: auto;
-  padding-left: 0;
-  padding-right: 0;
-  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
-  box-shadow: none;
-}
-
-solaris-form-field input[solaris-input]:focus-visible {
-  border-color: transparent;
-  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
-  box-shadow: none;
-}
-
-solaris-form-field input[solaris-input][data-invalid] {
-  border-color: transparent;
-}
-
-solaris-form-field input[solaris-input][data-invalid]:focus-visible {
-  border-color: transparent;
-  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
-  box-shadow: none;
-}
-
-solaris-form-field input[solaris-input][disabled] {
-  opacity: var(--solaris-input-disabled-opacity);
-}
-
-solaris-form-field input[solaris-input][readonly] {
-  background: transparent;
-}
-
-solaris-form-field input[solaris-input][data-density='compact'] {
-  padding-top: var(--solaris-density-padding-xs);
-  padding-bottom: var(--solaris-density-padding-xs);
-}
-
-solaris-form-field input[solaris-input][data-density='comfortable'] {
-  padding-top: var(--solaris-density-padding-sm);
-  padding-bottom: var(--solaris-density-padding-sm);
-}
-
-solaris-form-field input[solaris-input]::-webkit-search-decoration,
-solaris-form-field input[solaris-input]::-webkit-search-cancel-button,
-solaris-form-field input[solaris-input]::-webkit-search-results-button,
-solaris-form-field input[solaris-input]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-solaris-form-field input[solaris-input]:autofill,
-solaris-form-field input[solaris-input]:-webkit-autofill {
-  -webkit-text-fill-color: var(--solaris-input-color);
-  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill inside form-field requires hardcoded transparent box-shadow inset.
-  -webkit-box-shadow: 0 0 0 30px transparent inset;
-}
+input[solaris-input] {
+  --solaris-input-background: initial;
+  --solaris-input-color: initial;
+  --solaris-input-border-color: initial;
+  --solaris-input-border-width: initial;
+  --solaris-input-radius: initial;
+  --solaris-input-height: initial;
+  --solaris-input-padding-x: initial;
+  --solaris-input-padding-y: initial;
+  --solaris-input-font-size: initial;
+  --solaris-input-line-height: initial;
+  --solaris-input-placeholder-color: initial;
+  --solaris-input-focus-ring-color: initial;
+  --solaris-input-invalid-border-color: initial;
+  --solaris-input-disabled-opacity: initial;
+  --solaris-input-readonly-background: initial;
+
+  font-family: var(--solaris-font-family-sans), system-ui;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  color: var(--solaris-input-color);
+  background: var(--solaris-input-background);
+  border: var(--solaris-input-border-width) solid
+    var(--solaris-input-border-color);
+  border-radius: var(--solaris-input-radius);
+  height: var(--solaris-input-height);
+  padding: var(--solaris-input-padding-y) var(--solaris-input-padding-x);
+  font-size: var(--solaris-input-font-size);
+  line-height: var(--solaris-input-line-height);
+  outline: none;
+  transition:
+    border-color var(--solaris-motion-duration-fast, 150ms) ease,
+    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
+}
+
+input[solaris-input]::placeholder {
+  color: var(--solaris-input-placeholder-color);
+  opacity: 1;
+}
+
+input[solaris-input]:focus-visible {
+  border-color: var(--solaris-input-focus-ring-color);
+  // SOLARIS_TOKEN_EXCEPTION: Focus ring box-shadow uses CSS var with tokenized color. Hardcoded spread is required by design.
+  box-shadow: 0 0 0 2px var(--solaris-input-focus-ring-color);
+}
+
+input[solaris-input][data-invalid] {
+  border-color: var(--solaris-input-invalid-border-color);
+}
+
+input[solaris-input][data-invalid]:focus-visible {
+  border-color: var(--solaris-input-invalid-border-color);
+  // SOLARIS_TOKEN_EXCEPTION: Invalid state focus ring box-shadow uses CSS var. Hardcoded spread required by design.
+  box-shadow: 0 0 0 2px var(--solaris-input-invalid-border-color);
+}
+
+input[solaris-input]:disabled {
+  cursor: not-allowed;
+  opacity: var(--solaris-input-disabled-opacity);
+}
+
+input[solaris-input][readonly] {
+  background: var(--solaris-input-readonly-background);
+  cursor: default;
+}
+
+input[solaris-input]::-webkit-search-decoration,
+input[solaris-input]::-webkit-search-cancel-button,
+input[solaris-input]::-webkit-search-results-button,
+input[solaris-input]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+input[solaris-input]::-webkit-inner-spin-button,
+input[solaris-input]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+input[solaris-input]:autofill,
+input[solaris-input]:-webkit-autofill {
+  -webkit-text-fill-color: var(--solaris-input-color);
+  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill requires hardcoded box-shadow inset to override browser default yellow background.
+  -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+input[solaris-input][data-appearance='outline'] {
+  --solaris-input-background: var(--solaris-surface-base);
+  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-border-color: var(--solaris-border-default);
+  --solaris-input-border-width: var(--solaris-border-width-sm);
+  --solaris-input-placeholder-color: var(--solaris-text-muted);
+  --solaris-input-focus-ring-color: var(--solaris-primary-base);
+  --solaris-input-invalid-border-color: var(--solaris-danger-base);
+  --solaris-input-disabled-opacity: 0.5;
+  --solaris-input-readonly-background: var(--solaris-surface-muted);
+}
+
+input[solaris-input][data-appearance='surface'] {
+  --solaris-input-background: var(--solaris-surface-muted);
+  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-border-color: var(--solaris-border-subtle);
+  --solaris-input-border-width: var(--solaris-border-width-sm);
+  --solaris-input-placeholder-color: var(--solaris-text-muted);
+  --solaris-input-focus-ring-color: var(--solaris-primary-base);
+  --solaris-input-invalid-border-color: var(--solaris-danger-base);
+  --solaris-input-disabled-opacity: 0.5;
+  --solaris-input-readonly-background: var(--solaris-surface-base);
+}
+
+input[solaris-input][data-appearance='filled'] {
+  --solaris-input-background: var(--solaris-surface-muted);
+  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-border-color: transparent;
+  --solaris-input-border-width: 0 0 var(--solaris-border-width-sm) 0;
+  --solaris-input-placeholder-color: var(--solaris-text-muted);
+  --solaris-input-focus-ring-color: var(--solaris-primary-base);
+  --solaris-input-invalid-border-color: var(--solaris-danger-base);
+  --solaris-input-disabled-opacity: 0.5;
+  --solaris-input-readonly-background: var(--solaris-surface-base);
+}
+
+input[solaris-input][data-size='sm'] {
+  --solaris-input-height: var(--solaris-spacing-8);
+  --solaris-input-padding-x: var(--solaris-spacing-2);
+  --solaris-input-padding-y: var(--solaris-spacing-1);
+  --solaris-input-font-size: var(--solaris-font-size-sm);
+  --solaris-input-line-height: var(--solaris-line-height-sm);
+}
+
+input[solaris-input][data-size='md'] {
+  --solaris-input-height: var(--solaris-spacing-10);
+  --solaris-input-padding-x: var(--solaris-spacing-3);
+  --solaris-input-padding-y: var(--solaris-spacing-2);
+  --solaris-input-font-size: var(--solaris-font-size-md);
+  --solaris-input-line-height: var(--solaris-line-height-md);
+}
+
+input[solaris-input][data-size='lg'] {
+  --solaris-input-height: var(--solaris-spacing-12);
+  --solaris-input-padding-x: var(--solaris-spacing-4);
+  --solaris-input-padding-y: var(--solaris-spacing-2);
+  --solaris-input-font-size: var(--solaris-font-size-lg);
+  --solaris-input-line-height: var(--solaris-line-height-lg);
+}
+
+input[solaris-input][data-density='compact'] {
+  --solaris-input-height: var(--solaris-density-min-height);
+  --solaris-input-padding-y: var(--solaris-density-padding-xs);
+  --solaris-input-line-height: var(--solaris-line-height-sm);
+}
+
+input[solaris-input][data-density='comfortable'] {
+  --solaris-input-padding-y: var(--solaris-density-padding-sm);
+  --solaris-input-line-height: var(--solaris-line-height-md);
+}
+
+input[solaris-input][data-radius='none'] {
+  --solaris-input-radius: var(--solaris-radius-none);
+}
+
+input[solaris-input][data-radius='sm'] {
+  --solaris-input-radius: var(--solaris-radius-sm);
+}
+
+input[solaris-input][data-radius='md'] {
+  --solaris-input-radius: var(--solaris-radius-md);
+}
+
+input[solaris-input][data-radius='lg'] {
+  --solaris-input-radius: var(--solaris-radius-lg);
+}
+
+input[solaris-input][data-full-width] {
+  width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  input[solaris-input] {
+    transition: none;
+  }
+}
+
+[data-reduced-motion='true'] input[solaris-input] {
+  transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  input[solaris-input]:autofill,
+  input[solaris-input]:-webkit-autofill {
+    -webkit-text-fill-color: var(--solaris-input-color);
+    // SOLARIS_TOKEN_EXCEPTION: WebKit autofill dark mode requires hardcoded box-shadow inset override.
+    -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
+  }
+}
+
+solaris-form-field input[solaris-input] {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  height: auto;
+  padding-left: 0;
+  padding-right: 0;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field input[solaris-input]:focus-visible {
+  border-color: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field input[solaris-input][data-invalid] {
+  border-color: transparent;
+}
+
+solaris-form-field input[solaris-input][data-invalid]:focus-visible {
+  border-color: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field input[solaris-input][disabled] {
+  opacity: var(--solaris-input-disabled-opacity);
+}
+
+solaris-form-field input[solaris-input][readonly] {
+  background: transparent;
+}
+
+solaris-form-field input[solaris-input][data-density='compact'] {
+  padding-top: var(--solaris-density-padding-xs);
+  padding-bottom: var(--solaris-density-padding-xs);
+}
+
+solaris-form-field input[solaris-input][data-density='comfortable'] {
+  padding-top: var(--solaris-density-padding-sm);
+  padding-bottom: var(--solaris-density-padding-sm);
+}
+
+solaris-form-field input[solaris-input]::-webkit-search-decoration,
+solaris-form-field input[solaris-input]::-webkit-search-cancel-button,
+solaris-form-field input[solaris-input]::-webkit-search-results-button,
+solaris-form-field input[solaris-input]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+solaris-form-field input[solaris-input]:autofill,
+solaris-form-field input[solaris-input]:-webkit-autofill {
+  -webkit-text-fill-color: var(--solaris-input-color);
+  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill inside form-field requires hardcoded transparent box-shadow inset.
+  -webkit-box-shadow: 0 0 0 30px transparent inset;
+}

package/styles/_popover.scss

@@ -1,68 +1,73 @@
-.solaris-popover-panel-overlay {
-  z-index: var(--solaris-z-index-popover, 1000);
-}
-
-.solaris-popover-panel {
-  display: block;
-  outline: none;
-}
-
-.solaris-popover-panel__container {
-  box-sizing: border-box;
-  background: var(--solaris-popover-background, var(--solaris-surface-raised));
-  color: var(--solaris-popover-color, var(--solaris-text-default));
-  border: var(--solaris-popover-border-width, 0) solid
-    var(--solaris-popover-border-color, transparent);
-  border-radius: var(--solaris-popover-radius, var(--solaris-radius-md));
-  box-shadow: var(--solaris-popover-shadow, var(--solaris-shadow-lg));
-  padding: var(--solaris-popover-padding, var(--solaris-spacing-3));
-  min-width: var(--solaris-popover-min-width, auto);
-  max-width: var(--solaris-popover-max-width, none);
-  outline: none;
-}
-
-.solaris-popover-panel__container[data-appearance='outline'] {
-  background: var(--solaris-popover-background, var(--solaris-surface-raised));
-  border: var(--solaris-popover-border-width, var(--solaris-border-width-sm))
-    solid
-    var(
-      --solaris-popover-border-color,
-      var(--solaris-popover-outline-border-color, var(--solaris-border-default))
-    );
-}
-
-.solaris-popover-panel__container[data-padding='none'] {
-  --solaris-popover-padding: 0;
-}
-
-.solaris-popover-panel__container[data-padding='sm'] {
-  --solaris-popover-padding: var(--solaris-spacing-2);
-}
-
-.solaris-popover-panel__container[data-padding='md'] {
-  --solaris-popover-padding: var(--solaris-spacing-3);
-}
-
-.solaris-popover-panel__container[data-padding='lg'] {
-  --solaris-popover-padding: var(--solaris-spacing-4);
-}
-
-.solaris-popover-panel__container[data-radius='none'] {
-  border-radius: var(--solaris-radius-none);
-}
-
-.solaris-popover-panel__container[data-radius='sm'] {
-  border-radius: var(--solaris-radius-sm);
-}
-
-.solaris-popover-panel__container[data-radius='md'] {
-  border-radius: var(--solaris-radius-md);
-}
-
-.solaris-popover-panel__container[data-radius='lg'] {
-  border-radius: var(--solaris-radius-lg);
-}
-
-.solaris-popover-panel__container[data-radius='xl'] {
-  border-radius: var(--solaris-radius-xl);
-}
+.solaris-popover-panel-overlay {
+  z-index: var(--solaris-z-index-popover);
+}
+
+.solaris-popover-panel {
+  --solaris-popover-border-width: 0;
+  --solaris-popover-min-width: auto;
+  --solaris-popover-max-width: none;
+  --solaris-popover-border-color: transparent;
+  --solaris-popover-radius: var(--solaris-radius-md);
+  --solaris-popover-shadow: var(--solaris-shadow-lg);
+  --solaris-popover-padding: var(--solaris-spacing-3);
+  --solaris-popover-color: var(--solaris-text-default);
+  --solaris-popover-background: var(--solaris-surface-raised);
+
+  outline: none;
+  display: block;
+}
+
+.solaris-popover-panel__container {
+  outline: none;
+  box-sizing: border-box;
+  color: var(--solaris-popover-color);
+  padding: var(--solaris-popover-padding);
+  box-shadow: var(--solaris-popover-shadow);
+  min-width: var(--solaris-popover-min-width);
+  max-width: var(--solaris-popover-max-width);
+  border-radius: var(--solaris-popover-radius);
+  background: var(--solaris-popover-background);
+  border: var(--solaris-popover-border-width) solid
+    var(--solaris-popover-border-color);
+}
+
+.solaris-popover-panel__container[data-appearance='outline'] {
+  background: var(--solaris-surface-base);
+  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
+}
+
+.solaris-popover-panel__container[data-padding='none'] {
+  --solaris-popover-padding: 0;
+}
+
+.solaris-popover-panel__container[data-padding='sm'] {
+  --solaris-popover-padding: var(--solaris-spacing-2);
+}
+
+.solaris-popover-panel__container[data-padding='md'] {
+  --solaris-popover-padding: var(--solaris-spacing-3);
+}
+
+.solaris-popover-panel__container[data-padding='lg'] {
+  --solaris-popover-padding: var(--solaris-spacing-4);
+}
+
+.solaris-popover-panel__container[data-radius='none'] {
+  border-radius: var(--solaris-radius-none);
+}
+
+.solaris-popover-panel__container[data-radius='sm'] {
+  border-radius: var(--solaris-radius-sm);
+}
+
+.solaris-popover-panel__container[data-radius='md'] {
+  border-radius: var(--solaris-radius-md);
+}
+
+.solaris-popover-panel__container[data-radius='lg'] {
+  border-radius: var(--solaris-radius-lg);
+}
+
+.solaris-popover-panel__container[data-radius='xl'] {
+  border-radius: var(--solaris-radius-xl);
+}