resolve conflicts

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,22 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="6">
+            <item index="0" class="java.lang.String" itemvalue="cy" />
+            <item index="1" class="java.lang.String" itemvalue="cx" />
+            <item index="2" class="java.lang.String" itemvalue="r" />
+            <item index="3" class="java.lang.String" itemvalue="rx" />
+            <item index="4" class="java.lang.String" itemvalue="x" />
+            <item index="5" class="java.lang.String" itemvalue="y" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
     <inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
   </profile>

app/page.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
-import { Checkbox } from '../src/primitive-components/components';
+import {
+    Button,
+    Checkbox,
+    IconButton,
+} from '../src/primitive-components/components';
 import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
@@ -29,38 +33,7 @@ export default function Page() {
                     style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
                 >
                     <Card variant={'outlined'}>
-                        <CardHeader>
-                            <Typography role={'headline'} size={'large'}>
-                                Welcome to Material You for Next.js!
-                            </Typography>
-                            <Typography role={'body'} size={'large'}>
-                                {"It's UI kit for fast frontend development!"}
-                            </Typography>
-                        </CardHeader>
-                        <CardActionArea>
-                            <CardMedia src={testImage1.src} type={'img'} />
-                            <CardBody>
-                                <Typography role={'body'} size={'large'}>
-                                    Lorem ipsum dolor sit amet, consecrate
-                                    adipiscing elit, sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua.
-                                    Ut enim ad minim veniam, quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip
-                                    ex ea commodo consequat. Duis aute irure
-                                    dolor in reprehenderit in voluptate velit
-                                    esse cillum dolore eu fugiat nulla pariatur.
-                                    Excepteur sint occaecat cupidatat non
-                                    proident, sunt in culpa qui officia deserunt
-                                    mollit anim id est laborum.
-                                </Typography>
-                            </CardBody>
-                        </CardActionArea>
                         <CardFooter>
-                            <div className={'flex flex-row gap-3'}>
-                                <Button icon={'add'}>Label 1</Button>
-                                <Button icon={'add'} iconPlace={'right'}>
-                                    Label 2
-                                </Button>
                             <SegmentedButtons toggled={true}>
                                 <SegmentButton
                                     fillIcon={1}
@@ -75,32 +48,8 @@ export default function Page() {
                                 >
                                     Label 2
                                 </SegmentButton>
-                                    <SegmentButton disabled>
+                                <SegmentButton disabled>Label 3</SegmentButton>
-                                        Label 3
-                                    </SegmentButton>
                             </SegmentedButtons>
-                                <Checkbox />
-                                <Slider
-                                    defaultValue={0}
-                                    max={100}
-                                    min={0}
-                                    options={[0, 10, 20, 100]}
-                                />
-                                <Slider defaultValue={0} max={100} min={0} />
-                                <div>
-                                    <input
-                                        list={'lol'}
-                                        max={100}
-                                        min={0}
-                                        type={'range'}
-                                    />
-                                    <datalist id={'lol'}>
-                                        <option value={0} />
-                                        <option value={50} />
-                                        <option value={100} />
-                                    </datalist>
-                                </div>
-                            </div>
                         </CardFooter>
                     </Card>
                 </div>

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

@@ -1,20 +1,18 @@
 div.m3.m3-segmented-buttons
     padding: 0
     height: 40px
-    display: flex
+    display: inline-flex
-    flex-direction: row
     border-radius: 20px
     box-sizing: border-box
-    border-collapse: collapse
 
     & > button.m3.m3-button-segment
+        width: auto
         height: 40px
-        display: flex
+        padding: 10px
         min-width: 108px
         border-radius: 0
-        width: max-content
+        margin: 0 -0.5px
-        padding-inline: 10px
+        display: inline-flex
-        margin: 0 -0.5px 0 -0.5px
         background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
@@ -46,9 +44,9 @@ div.m3.m3-segmented-buttons
                     fill: var(--md-sys-color-on-secondary-container)
 
         & > span.m3.m3-button-segment-state-layer
-            position: absolute
             width: 100%
             height: 100%
+            position: absolute
 
         & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
             transition: .2s cubic-bezier(0.2, 0, 0, 1)

src/styles/fonts.sass

@@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
 
 @each $name, $weight in $weights
     @font-face
-        font-family: Roboto
+        font-family: Roboto, system-ui
         font-face-name: #{$name}
         font-weight: #{$weight}
         src: url("./font/Roboto-#{$name}.ttf")

src/styles/generics.css

@@ -73,8 +73,9 @@ div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
 }
 
 svg.m3.m3-svg-icon > text {
-  alignment-baseline: central;
   text-anchor: middle;
+  dominant-baseline: middle;
+  alignment-baseline: middle;
 }
 svg.m3.m3-svg-icon > text.m3-size-12px {
   width: 12px;
@@ -186,37 +187,37 @@ svg.m3.m3-badge > text {
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Thin;
   font-weight: 100;
   src: url("./font/Roboto-Thin.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Light;
   font-weight: 300;
   src: url("./font/Roboto-Light.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Regular;
   font-weight: 400;
   src: url("./font/Roboto-Regular.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Medium;
   font-weight: 500;
   src: url("./font/Roboto-Medium.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Bold;
   font-weight: 700;
   src: url("./font/Roboto-Bold.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Black;
   font-weight: 900;
   src: url("./font/Roboto-Black.ttf");
@@ -721,20 +722,18 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 div.m3.m3-segmented-buttons {
   padding: 0;
   height: 40px;
-  display: flex;
+  display: inline-flex;
-  flex-direction: row;
   border-radius: 20px;
   box-sizing: border-box;
-  border-collapse: collapse;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  width: auto;
   height: 40px;
-  display: flex;
+  padding: 10px;
   min-width: 108px;
   border-radius: 0;
-  width: max-content;
+  margin: 0 -0.5px;
-  padding-inline: 10px;
+  display: inline-flex;
-  margin: 0 -0.5px 0 -0.5px;
   background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
@@ -766,9 +765,9 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text
   fill: var(--md-sys-color-on-secondary-container);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  position: absolute;
   width: 100%;
   height: 100%;
+  position: absolute;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);

src/styles/icon.sass

@@ -3,8 +3,9 @@ svg.m3.m3-svg-icon
     $types: ["Outlined", "Rounded", "Sharp"]
 
     & > text
-        alignment-baseline: central
         text-anchor: middle
+        dominant-baseline: middle
+        alignment-baseline: middle
 
     @each $size in $sizes
         & > text.m3-size-#{$size}