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

@@ -162,15 +162,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);
@@ -473,17 +473,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);
@@ -594,18 +594,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;
@@ -792,7 +792,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;
@@ -858,11 +858,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;
@@ -1005,11 +1005,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;
@@ -1209,16 +1209,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 {
@@ -1248,14 +1248,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/generics.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAsBQ;AACA;AACA;AACA;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EC7BA;;ADgCA;EC1BA;;AD8BA;EC5CA;;AD+CA;ECzCA;;AD6CI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EFCA;EACA;EACA;EACA;EACA;EEFI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;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;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACvEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIRLine truncated
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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ACA;EACA;EWhBQ;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACtEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;ALine truncated

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

@@ -37,11 +37,11 @@ input[type="range"].m3.m3-slider
     background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
 
     &::-webkit-slider-container
+        height: 4px
         appearance: none
         box-shadow: none
         border-radius: 2px
         min-block-size: 4px
-        height: 4px !important
 
     &::-webkit-slider-runnable-track
         height: 4px

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