@thalassic/themes 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/themes/thalassic/_motion.scss

@@ -17,4 +17,9 @@
   --motion-delay-short: 50ms;
   --motion-delay-medium: 100ms;
   --motion-delay-long: 200ms;
+
+  // Theme transition
+  --motion-theme-duration: var(--motion-default);
+  --motion-theme-easing: var(--motion-ease-in-out);
+  --motion-theme: var(--motion-theme-duration) var(--motion-theme-easing);
 }

package/themes/thalassic/_radius.scss

@@ -3,4 +3,6 @@
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-3xl: 24px;
 }

package/themes/thalassic/components/button/_button-size.scss

@@ -14,6 +14,10 @@
     padding-inline: 0;
 
     aspect-ratio: 1/1;
+
+    &.tls-button--rounded {
+      --tls-button-border-radius: 50%;
+    }
   }
 
   &.tls-button--fluid {
@@ -28,6 +32,10 @@
     --tls-button-font-weight: var(--font-label-small-weight);
     --tls-button-line-height: var(--font-label-small-line-height);
     --tls-button-letter-spacing: var(--font-label-small-letter-spacing);
+
+    &.tls-button--rounded {
+      --tls-button-border-radius: var(--radius-xl);
+    }
   }
 
   &.tls-button--md {
@@ -38,6 +46,10 @@
     --tls-button-font-weight: var(--font-label-medium-weight);
     --tls-button-line-height: var(--font-label-medium-line-height);
     --tls-button-letter-spacing: var(--font-label-medium-letter-spacing);
+
+    &.tls-button--rounded {
+      --tls-button-border-radius: var(--radius-2xl);
+    }
   }
 
   &.tls-button--lg {
@@ -48,5 +60,9 @@
     --tls-button-font-weight: var(--font-label-large-weight);
     --tls-button-line-height: var(--font-label-large-line-height);
     --tls-button-letter-spacing: var(--font-label-large-letter-spacing);
+
+    &.tls-button--rounded {
+      --tls-button-border-radius: var(--radius-3xl);
+    }
   }
 }

package/themes/thalassic/components/button/_button.scss

@@ -2,6 +2,7 @@
 
 .tls-button {
   --tls-button-border-width: 1px;
+  --tls-button-border-radius: var(--radius-sm);
 
   position: relative;
   z-index: 1;
@@ -14,7 +15,7 @@
   cursor: pointer;
   user-select: none;
 
-  border-radius: var(--radius-md);
+  border-radius: var(--tls-button-border-radius);
   background-color: var(--color-surface);
 
   transition: color var(--motion-fast) var(--motion-ease-in-out);
@@ -33,7 +34,7 @@
     z-index: -1;
 
     border: var(--tls-button-border-width) solid var(--tls-button-color);
-    border-radius: var(--radius-md);
+    border-radius: var(--tls-button-border-radius);
   }
 
   &::before {
@@ -44,7 +45,7 @@
 
   &::after {
     border: none;
-    border-radius: var(--radius-md);
+    border-radius: var(--tls-button-border-radius);
 
     transition:
       border-color var(--motion-fast) var(--motion-ease-in-out),

package/themes/thalassic/components/index.scss

@@ -2,6 +2,7 @@
 @forward 'button';
 @forward 'form';
 @forward 'switch';
+@forward 'tabs';
 
 @forward 'checkbox';
 @forward 'divider';

package/themes/thalassic/components/tabs/_index.scss

@@ -0,0 +1,2 @@
+@forward 'tabs';
+@forward 'tabs-variant';

package/themes/thalassic/components/tabs/_tabs-variant.scss

@@ -0,0 +1,63 @@
+.tls-tabs {
+  // Flat
+  &.tls-tabs--flat {
+    .tls-tabs-header {
+      border-bottom-width: var(--tls-tabs-border-width);
+      border-bottom-style: solid;
+
+      &__item {
+        margin-bottom: -1px;
+
+        &:hover {
+          .tls-tabs-header__item-button {
+            background-color: var(--color-surface-container);
+          }
+        }
+
+        &.tls-tabs-header__item--active {
+          border-bottom-width: var(--tls-tabs-active-border-width);
+          border-bottom-style: solid;
+        }
+      }
+    }
+  }
+
+  // Outlined
+  &.tls-tabs--outlined {
+    --tls-tabs-border-radius: var(--radius-sm);
+    --tls-tabs-header-background-color: var(--color-surface-container);
+    --tls-tabs-active-border-width: 1px;
+    --tls-tabs-active-border-color: var(--tls-tabs-border-color);
+
+    border: var(--tls-tabs-border-width) solid var(--tls-tabs-border-color);
+    border-radius: var(--tls-tabs-border-radius);
+
+    .tls-tabs-header {
+      border-bottom-width: var(--tls-tabs-border-width);
+      border-bottom-style: solid;
+
+      background-color: var(--tls-tabs-header-background-color);
+
+      &__item {
+        margin-bottom: -1px;
+
+        border-width: 0;
+        border-left-width: var(--tls-tabs-active-border-width);
+        border-right-width: var(--tls-tabs-active-border-width);
+        border-style: solid;
+
+        &:hover {
+          color: var(--tls-tabs-active-label-color);
+        }
+
+        &:first-child {
+          border-left-width: 0;
+        }
+
+        &.tls-tabs-header__item--active {
+          background-color: var(--tls-tabs-background-color);
+        }
+      }
+    }
+  }
+}

package/themes/thalassic/components/tabs/_tabs.scss

@@ -0,0 +1,73 @@
+.tls-tabs {
+  --tls-tabs-background-color: var(--color-surface);
+  --tls-tabs-label-color: var(--color-outline);
+  --tls-tabs-active-label-color: var(--color-primary);
+  --tls-tabs-border-color: var(--color-outline-variant);
+  --tls-tabs-border-width: 1px;
+  --tls-tabs-active-border-color: var(--color-primary);
+  --tls-tabs-active-border-width: 2px;
+  --tls-tabs-content-padding: var(--spacing-4);
+
+  background: var(--tls-tabs-background-color);
+
+  display: block;
+
+  transition:
+    border-color var(--motion-theme),
+    background-color var(--motion-theme);
+
+  overflow: clip;
+
+  .tls-tabs-header {
+    display: flex;
+
+    border-color: var(--tls-tabs-border-color);
+
+    &__item {
+      color: var(--tls-tabs-label-color);
+
+      border-color: transparent;
+
+      transition:
+        color var(--motion-fast),
+        border-color var(--motion-fast),
+        background-color var(--motion-theme);
+
+      &:has(&-link:hover, &-link:focus) {
+        background-color: var(--color-grey-95);
+      }
+
+      &.tls-tabs-header__item--active {
+        color: var(--tls-tabs-active-label-color);
+        border-color: var(--tls-tabs-active-border-color);
+      }
+
+      &-button {
+        padding: var(--spacing-3) var(--spacing-6);
+
+        // TODO: use mixin
+        font-size: var(--font-label-large-size);
+        font-weight: var(--font-label-large-weight);
+        line-height: var(--font-label-large-border-height);
+        letter-spacing: var(--font-label-large-letter-spacing);
+
+        cursor: pointer;
+
+        transition: background-color var(--motion-fast);
+      }
+    }
+  }
+
+  .tls-tabs-content {
+    padding: var(--tls-tabs-content-padding);
+
+    // Tab
+    .tls-tab {
+      display: none;
+
+      &--active {
+        display: block;
+      }
+    }
+  }
+}