From c40cceb80f5ed860f7e23ee4f8256f48ea9cface Mon Sep 17 00:00:00 2001
From: Sebastian Kranz <kranz.sebastian@me.com>
Date: Sun, 14 Jul 2024 11:12:33 +0200
Subject: [PATCH] Add `borderless` variants (#434)

This variant is available for Button, IconButton and SelectTrigger.

Borderless variants combine all color properties from ghost-buttons,
but retain the padding, margin, alignment and text-style of the other variants.
---
 packages/radix-ui-themes/src/components/base-button.css     | 4 ++--
 .../radix-ui-themes/src/components/base-button.props.ts     | 2 +-
 packages/radix-ui-themes/src/components/select.css          | 6 ++++--
 packages/radix-ui-themes/src/components/select.props.ts     | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/radix-ui-themes/src/components/base-button.css b/packages/radix-ui-themes/src/components/base-button.css
index dfd2f855..37d278ac 100644
--- a/packages/radix-ui-themes/src/components/base-button.css
+++ b/packages/radix-ui-themes/src/components/base-button.css
@@ -317,7 +317,7 @@
 
 /* soft / ghost */
 
-.rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost) {
+.rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-borderless) {
   color: var(--accent-a11);
 
   &:where(.rt-high-contrast) {
@@ -353,7 +353,7 @@
   }
 }
 
-.rt-BaseButton:where(.rt-variant-ghost) {
+.rt-BaseButton:where(.rt-variant-ghost, .rt-variant-borderless) {
   @media (hover: hover) {
     &:where(:hover) {
       background-color: var(--accent-a3);
diff --git a/packages/radix-ui-themes/src/components/base-button.props.ts b/packages/radix-ui-themes/src/components/base-button.props.ts
index 5f420bf4..a840df88 100644
--- a/packages/radix-ui-themes/src/components/base-button.props.ts
+++ b/packages/radix-ui-themes/src/components/base-button.props.ts
@@ -6,7 +6,7 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
+const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'borderless', 'ghost'] as const;
 
 const baseButtonPropDefs = {
   ...asChildPropDef,
diff --git a/packages/radix-ui-themes/src/components/select.css b/packages/radix-ui-themes/src/components/select.css
index cf38cb62..f94e917a 100644
--- a/packages/radix-ui-themes/src/components/select.css
+++ b/packages/radix-ui-themes/src/components/select.css
@@ -398,7 +398,8 @@
 /* soft / ghost */
 
 .rt-SelectTrigger:where(.rt-variant-soft),
-.rt-SelectTrigger:where(.rt-variant-ghost) {
+.rt-SelectTrigger:where(.rt-variant-ghost),
+.rt-SelectTrigger:where(.rt-variant-borderless) {
   color: var(--accent-12);
 
   &:where([data-placeholder]) {
@@ -430,7 +431,8 @@
   }
 }
 
-.rt-SelectTrigger:where(.rt-variant-ghost) {
+.rt-SelectTrigger:where(.rt-variant-ghost),
+.rt-SelectTrigger:where(.rt-variant-borderless) {
   @media (hover: hover) {
     &:where(:hover) {
       background-color: var(--accent-a3);
diff --git a/packages/radix-ui-themes/src/components/select.props.ts b/packages/radix-ui-themes/src/components/select.props.ts
index d59c72e2..b907ad2e 100644
--- a/packages/radix-ui-themes/src/components/select.props.ts
+++ b/packages/radix-ui-themes/src/components/select.props.ts
@@ -12,7 +12,7 @@ const selectRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['classic', 'surface', 'soft', 'ghost'] as const;
+const triggerVariants = ['classic', 'surface', 'soft', 'borderless', 'ghost'] as const;
 
 const selectTriggerPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'surface' },