feat(tabs): add classic variant

Author: lepture

src/components/tabs/TabsList.vue

@@ -4,7 +4,7 @@ import type { ColorType } from '../types'
 export interface TabsListProps {
   size?: '1' | '2'
   color?: ColorType
-  variant?: 'outline' | 'surface' | 'soft'
+  variant?: 'classic' | 'outline' | 'surface' | 'soft'
   highContrast?: boolean
 }
 </script>
@@ -40,39 +40,63 @@ const resetClass = buildPropsClass(props, ['variant', 'size', 'highContrast'])
   font-style: normal;
   scrollbar-width: none;
 }
+
 .ui-TabList::-webkit-scrollbar {
   display: none;
 }
 
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
-  display: flex;
-  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+.ui-TabList:where(.r-size-1) {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  --tab-height: var(--space-6);
+  --tab-padding-x: var(--space-1);
+  --tab-radius: max(var(--radius-2), var(--radius-full));
+  --tab-item-radius: var(--radius-1);
+  --tab-inner-padding-x: var(--space-1);
+  --tab-inner-height: var(--space-5);
+}
+.ui-TabList:where(.r-size-2) {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  --tab-height: var(--space-7);
+  --tab-padding-x: var(--space-2);
+  --tab-radius: max(var(--radius-3), var(--radius-full));
+  --tab-item-radius: var(--radius-2);
+  --tab-inner-padding-x: var(--space-2);
+  --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
 
-.ui-TabList:where(.r-variant-surface) {
+.ui-TabsIndicator {
+  position: absolute;
+  left: 0;
+  transition-property: width, transform;
+  transform: translateX(var(--reka-tabs-indicator-position));
+  width: var(--reka-tabs-indicator-size);
+}
+
+/** classic & surface */
+.ui-TabList:where(.r-variant-surface, .r-variant-classic) {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: top;
   flex-shrink: 0;
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
   border-radius: var(--tab-radius);
 }
 
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
+.ui-TabList:where(.r-variant-classic) {
+  background-color: var(--accent-a3);
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
 }
 
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
-  bottom: 0;
-  height: 2px;
-  background-color: var(--accent-indicator);
-  transition-duration: 300ms;
+.ui-TabList:where(.r-variant-surface) {
+  --tab-item-radius: 0;
+  --tab-inner-height: var(--tab-height);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
 
 .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
@@ -82,52 +106,51 @@ const resetClass = buildPropsClass(props, ['variant', 'size', 'highContrast'])
   transition-duration: 100ms;
 }
 
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
   top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
   height: var(--tab-inner-height);
-  background-color: var(--accent-a3);
+  background-color: var(--color-panel-solid);
+  box-shadow:
+    0 0 0 0.5px var(--black-a1),
+    0 1px 1px 0 var(--gray-a2),
+    0 2px 1px -1px var(--black-a1),
+    0 1px 3px 0 var(--black-a1);
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
 
-.ui-TabList:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  --tab-height: var(--space-6);
-  --tab-padding-x: var(--space-1);
-  --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: var(--radius-1);
-  --tab-inner-padding-x: var(--space-1);
-  --tab-inner-height: var(--space-5);
-}
-.ui-TabList:where(.r-size-2) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  --tab-height: var(--space-7);
-  --tab-padding-x: var(--space-2);
-  --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: var(--radius-2);
-  --tab-inner-padding-x: var(--space-2);
-  --tab-inner-height: calc(var(--space-6) - var(--space-1));
+.ui-TabList:where(.r-variant-surface.r-size-1),
+.ui-TabList:where(.r-variant-soft.r-size-1) {
+  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
 }
 
-.ui-TabList:where(.r-variant-surface) {
-  --tab-item-radius: 0;
-  --tab-inner-height: var(--tab-height);
+/** soft & outline */
+.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+  display: flex;
+  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
 }
 
 .ui-TabList:where(.r-variant-soft) {
   padding-left: var(--tab-padding-x);
   padding-right: var(--tab-padding-x);
 }
 
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
-  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
+.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
+  height: var(--tab-inner-height);
+  background-color: var(--accent-a3);
+  border-radius: var(--tab-item-radius);
+  transition-duration: 100ms;
+}
+
+.ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
+  bottom: 0;
+  height: 2px;
+  background-color: var(--accent-indicator);
+  transition-duration: 300ms;
 }
 
+/** high contrast */
 :where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
   background-color: var(--accent-12);
 }

src/components/tabs/TabsTrigger.vue

@@ -79,7 +79,7 @@ const forwarded = useForwardProps(props)
 }
 
 @media (hover: hover) {
-  .ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger:hover) {
+  .ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
     color: var(--gray-12);
   }
   .ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
@@ -103,7 +103,7 @@ const forwarded = useForwardProps(props)
   padding-right: var(--tab-padding-x);
 }
 
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
+.ui-TabList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
   color: var(--gray-12);
 }