ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons

app/page.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { Card } from '../src/primitive-components/card/card';
-import {
+import { IconButton } from '../src/primitive-components/components';
-    Button,
-    FAB,
-    IconButton,
-} from '../src/primitive-components/components';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
 import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
 import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@@ -52,25 +48,7 @@ export default function Page() {
                                 </SegmentButton>
                                 <SegmentButton disabled>Label 4</SegmentButton>
                             </SegmentedButtons>
-                            <Button ripple={false}>Filled button</Button>
+                            <IconButton icon={'settings'} variant={'filled'} />
-                            <Button ripple={false} variant={'outlined'}>
-                                Outlined button
-                            </Button>
-                            <Button ripple={false} variant={'elevated'}>
-                                Elevated button
-                            </Button>
-                            <Button ripple={false} variant={'text'}>
-                                Text button
-                            </Button>
-                            <Button ripple={false} variant={'tonal'}>
-                                Tonal button
-                            </Button>
-                            <FAB icon={'edit'} ripple={false}></FAB>
-                            <FAB icon={'edit'}></FAB>
-                            <IconButton
-                                icon={'settings'}
-                                variant={'filled'}
-                            ></IconButton>
                         </CardFooter>
                     </Card>
                 </div>

src/styles/badge.sass

@@ -13,12 +13,10 @@ svg.m3.m3-badge
         border-radius: 8px
 
     & > text
+        @include center(flex)
         @include m3-typography-mixin('label-small')
 
-        display: flex
-        align-items: center
         text-anchor: middle
-        justify-content: center
         font-optical-sizing: none
         alignment-baseline: central
         fill: var(--md-sys-color-on-error)

src/styles/button-styles/button.sass

@@ -9,17 +9,16 @@ button:not(.m3-fab, .m3-icon-button)
     transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
     &.m3
+        @include center(inline-flex)
+
         gap: 8px
         border: none
         contain: content
         text-align: center
         padding: 10px 24px
-        align-items: center
         flex-direction: row
-        display: inline-flex
         border-radius: 100px
         box-sizing: border-box
-        justify-content: center
 
     &.filled
         background-color: var(--md-sys-color-primary)

src/styles/button-styles/icon-button.sass

@@ -1,16 +1,15 @@
 button.m3.m3-icon-button
-    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
+    @include center(inline-flex)
-    contain: content
+
-    border-radius: 50%
+    padding: 0
-    position: relative
-    display: inline-flex
-    flex-direction: row
-    justify-content: center
-    align-items: center
     width: 40px
     height: 40px
     border: none
-    padding: 0
+    contain: content
+    border-radius: 50%
+    position: relative
+    flex-direction: row
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
     &::before
         transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
@@ -93,10 +92,10 @@ button.m3.m3-icon-button
         & > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
 
-        &:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
+        &:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-        &:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
+        &:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
 
     &.tonal:not(:disabled)

src/styles/button-styles/segmented-button.sass

@@ -34,7 +34,7 @@ div.m3.m3-segmented-buttons
         flex: 1 1
         padding: 0
         width: 100%
-        min-width: 48px
+        min-width: 108px
         border-radius: 0
         margin: 0 -0.5px
         display: inline-flex

src/styles/generics.css

@@ -161,15 +161,15 @@ svg.m3.m3-badge {
   border-radius: 8px;
 }
 svg.m3.m3-badge > text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--md-sys-typescale-label-small-font-size);
   font-weight: var(--md-sys-typescale-label-small-font-weight);
   line-height: var(--md-sys-typescale-label-small-line-height);
   font-family: var(--md-sys-typescale-label-small-font-family-name);
   letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
-  display: flex;
-  align-items: center;
   text-anchor: middle;
-  justify-content: center;
   font-optical-sizing: none;
   alignment-baseline: central;
   fill: var(--md-sys-color-on-error);
@@ -474,17 +474,17 @@ button:not(.m3-fab, .m3-icon-button) {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
 button:not(.m3-fab, .m3-icon-button).m3 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   gap: 8px;
   border: none;
   contain: content;
   text-align: center;
   padding: 10px 24px;
-  align-items: center;
   flex-direction: row;
-  display: inline-flex;
   border-radius: 100px;
   box-sizing: border-box;
-  justify-content: center;
 }
 button:not(.m3-fab, .m3-icon-button).filled {
   background-color: var(--md-sys-color-primary);
@@ -595,18 +595,18 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
 }
 
 button.m3.m3-icon-button {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  contain: content;
-  border-radius: 50%;
-  position: relative;
   display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  padding: 0;
   width: 40px;
   height: 40px;
   border: none;
-  padding: 0;
+  contain: content;
+  border-radius: 50%;
+  position: relative;
+  flex-direction: row;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
 button.m3.m3-icon-button::before {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
@@ -793,7 +793,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
   flex: 1 1;
   padding: 0;
   width: 100%;
-  min-width: 48px;
+  min-width: 108px;
   border-radius: 0;
   margin: 0 -0.5px;
   display: inline-flex;
@@ -859,11 +859,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
 }
 
 div.m3.m3-radio-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 20px;
   height: 20px;
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
 }
 div.m3.m3-radio-container + label.m3.m3-radio-label {
   margin-inline: 3px;
@@ -1006,11 +1006,11 @@ input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
   outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 input[type=range].m3.m3-slider::-webkit-slider-container {
+  height: 4px;
   appearance: none;
   box-shadow: none;
   border-radius: 2px;
   min-block-size: 4px;
-  height: 4px;
 }
 input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
   height: 20px;
@@ -1210,16 +1210,16 @@ div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
 }
 
 input[type=checkbox].m3.m3-checkbox {
-  z-index: 10;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
   width: 1.125rem;
   height: 1.125rem;
   appearance: none;
   position: absolute;
-  align-items: center;
   border-radius: 0.14rem;
   box-sizing: content-box;
-  justify-content: center;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
@@ -1249,14 +1249,14 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox]
   opacity: 38%;
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
-  z-index: 10;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
   font-size: 24px;
   font-weight: 700;
   line-height: 24px;
-  align-items: center;
   pointer-events: none;
-  justify-content: center;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
 }

src/styles/input-styles/checkbox.sass

@@ -13,16 +13,15 @@ div.m3.m3-checkbox-container
         position: absolute
 
 input[type="checkbox"].m3.m3-checkbox
+    @include center(flex)
+
     z-index: 10
-    display: flex
     width: 1.125rem
     height: 1.125rem
     appearance: none
     position: absolute
-    align-items: center
     border-radius: .14rem
     box-sizing: content-box
-    justify-content: center
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     & ~ span.m3-checkbox-state
@@ -54,14 +53,13 @@ input[type="checkbox"].m3.m3-checkbox
             opacity: 38%
 
     & ~ span.m3-checkbox-state
+        @include center(flex)
+
         z-index: 10
-        display: flex
         font-size: 24px
         font-weight: 700
         line-height: 24px
-        align-items: center
         pointer-events: none
-        justify-content: center
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
 

src/styles/input-styles/radio.sass

@@ -1,9 +1,8 @@
 div.m3.m3-radio-container
+    @include center(inline-flex)
+
     width: 20px
     height: 20px
-    align-items: center
-    display: inline-flex
-    justify-content: center
 
     & + label.m3.m3-radio-label
         margin-inline: 3px

src/styles/input-styles/slider.sass

@@ -59,11 +59,11 @@ input[type="range"].m3.m3-slider
         border: none
 
     &::-webkit-slider-container
+        height: 4px
         appearance: none
         box-shadow: none
         border-radius: 2px
         min-block-size: 4px
-        height: 4px
 
     &::-webkit-slider-runnable-track
         height: 20px

src/styles/input-styles/text-field.sass

@@ -1,3 +1,9 @@
+@mixin m3-text-field-fieldset-legend
+    border-top-width: 0
+    border-style: solid
+    border-bottom-width: 0
+    border-color: transparent
+
 div.m3.m3-text-field
     margin: 0
     display: flex
@@ -173,17 +179,13 @@ div.m3.m3-text-field
             border: 3px solid var(--md-sys-color-primary)
 
         &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
-            border-top-width: 0
+            @include m3-text-field-fieldset-legend
-            border-style: solid
+
-            border-bottom-width: 0
-            border-color: transparent
             border-inline-width: 5.5px
 
         &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
-            border-top-width: 0
+            @include m3-text-field-fieldset-legend
-            border-style: solid
+
-            border-bottom-width: 0
-            border-color: transparent
             border-inline-width: 7.5px
 
         & > input:focus-visible + label