doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

postgres mudila

This commit is contained in:
doryan04 2024-01-25 23:43:42 +04:00
parent b764e6f86f
commit cf584fe269
122 changed files with 23486 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc.yml Normal file
View File

@ -0,0 +1,12 @@
env:
browser: true
es2021: true
extends:
- standard-with-typescript
- plugin:react/recommended
parserOptions:
ecmaVersion: latest
sourceType: module
plugins:
- react
rules: {}

36
.gitignore vendored Normal file
View File

@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

12
.idea/doryan-blog-next-turbo.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

15
.idea/inspectionProfiles/Project_Default.xml Normal file
View File

@ -0,0 +1,15 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="indeterminate" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
</profile>
</component>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" filepath="$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

25
.idea/watcherTasks.xml Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions">
<TaskOptions isEnabled="true">
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
<option name="checkSyntaxErrors" value="true" />
<option name="description" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="sass" />
<option name="immediateSync" value="true" />
<option name="name" value="Sass" />
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
<option name="outputFilters">
<array />
</option>
<option name="outputFromStdout" value="false" />
<option name="program" value="sass" />
<option name="runOnExternalChanges" value="true" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="false" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
</component>
</project>

604
.idea/workspace.xml Normal file
View File

@ -0,0 +1,604 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="TypeScript File" />
<option value="TypeScript JSX File" />
<option value="Sass File" />
</list>
</option>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="HighlightingSettingsPerFile">
<setting file="file://$PROJECT_DIR$/node_modules/@material/web/checkbox/checkbox.d.ts" root0="SKIP_INSPECTION" />
</component>
<component name="MarkdownSettingsMigration">
<option name="stateVersion" value="1" />
</component>
<component name="ProjectColorInfo">{
&quot;customColor&quot;: &quot;&quot;,
&quot;associatedIndex&quot;: 2
}</component>
<component name="ProjectId" id="2aMzZwdBm9SBJKBvmCHBJPUs4Gu" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
&quot;git-widget-placeholder&quot;: &quot;experimental&quot;,
&quot;last_opened_file_path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/src/styles&quot;,
&quot;list.type.of.created.stylesheet&quot;: &quot;Sass&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
&quot;ts.external.directory.path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/styles" />
<recent name="$PROJECT_DIR$/src/styles/font" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/primitive-components" />
</key>
</component>
<component name="RunManager" selected="npm.dev">
<configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="start" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="npm.start" />
<item itemvalue="npm.build" />
</list>
</recent_temporary>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="" />
<created>1704143295326</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1704143295326</updated>
<workItem from="1704143297251" duration="2066000" />
<workItem from="1704145458812" duration="1333000" />
<workItem from="1704147434511" duration="2788000" />
<workItem from="1704179271846" duration="27334000" />
<workItem from="1704228987899" duration="62000" />
<workItem from="1704266465200" duration="4226000" />
<workItem from="1704303741925" duration="11908000" />
<workItem from="1704352985433" duration="28906000" />
<workItem from="1704441648986" duration="8737000" />
<workItem from="1704453712620" duration="34000" />
<workItem from="1704453866252" duration="4606000" />
<workItem from="1704470557960" duration="599000" />
<workItem from="1704482822622" duration="25572000" />
<workItem from="1704622017317" duration="1170000" />
<workItem from="1704624362614" duration="32454000" />
<workItem from="1704736262141" duration="16696000" />
<workItem from="1704788077373" duration="1228000" />
<workItem from="1704791818898" duration="8375000" />
<workItem from="1704833453490" duration="5101000" />
<workItem from="1704989132540" duration="9364000" />
<workItem from="1705064322484" duration="9060000" />
<workItem from="1705088474200" duration="6084000" />
<workItem from="1705095829356" duration="1674000" />
<workItem from="1705097515215" duration="1484000" />
<workItem from="1705144217658" duration="184000" />
<workItem from="1705175691296" duration="9914000" />
<workItem from="1705221294286" duration="3349000" />
<workItem from="1705225252401" duration="32000" />
<workItem from="1705225292674" duration="8000" />
<workItem from="1705225306474" duration="555000" />
<workItem from="1705446738426" duration="38000" />
<workItem from="1705483840463" duration="31000" />
<workItem from="1705521877221" duration="7923000" />
<workItem from="1705592136891" duration="692000" />
<workItem from="1705594003195" duration="6604000" />
<workItem from="1705603674262" duration="5421000" />
<workItem from="1705661083275" duration="4000" />
<workItem from="1705666401100" duration="1064000" />
<workItem from="1705667596747" duration="3042000" />
<workItem from="1705671414099" duration="1026000" />
<workItem from="1705695392779" duration="6092000" />
<workItem from="1705775936603" duration="80000" />
<workItem from="1705776495106" duration="3149000" />
<workItem from="1705784955475" duration="3244000" />
<workItem from="1705824814760" duration="3000" />
<workItem from="1705872118999" duration="5390000" />
<workItem from="1705911291566" duration="124000" />
<workItem from="1705937322215" duration="316000" />
<workItem from="1705937839794" duration="11116000" />
<workItem from="1706023242228" duration="822000" />
<workItem from="1706024195558" duration="6543000" />
</task>
<task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
<option name="closed" value="true" />
<created>1704526583970</created>
<option name="number" value="00019" />
<option name="presentableId" value="LOCAL-00019" />
<option name="project" value="LOCAL" />
<updated>1704526583970</updated>
</task>
<task id="LOCAL-00020" summary="updated switch styles">
<option name="closed" value="true" />
<created>1704526600066</created>
<option name="number" value="00020" />
<option name="presentableId" value="LOCAL-00020" />
<option name="project" value="LOCAL" />
<updated>1704526600066</updated>
</task>
<task id="LOCAL-00021" summary="updated checkbox component">
<option name="closed" value="true" />
<created>1704526612167</created>
<option name="number" value="00021" />
<option name="presentableId" value="LOCAL-00021" />
<option name="project" value="LOCAL" />
<updated>1704526612167</updated>
</task>
<task id="LOCAL-00022" summary="added opportunity for customize classname">
<option name="closed" value="true" />
<created>1704526646792</created>
<option name="number" value="00022" />
<option name="presentableId" value="LOCAL-00022" />
<option name="project" value="LOCAL" />
<updated>1704526646792</updated>
</task>
<task id="LOCAL-00023" summary="updated generic styles">
<option name="closed" value="true" />
<created>1704526658894</created>
<option name="number" value="00023" />
<option name="presentableId" value="LOCAL-00023" />
<option name="project" value="LOCAL" />
<updated>1704526658894</updated>
</task>
<task id="LOCAL-00024" summary="other updates...">
<option name="closed" value="true" />
<created>1704526668819</created>
<option name="number" value="00024" />
<option name="presentableId" value="LOCAL-00024" />
<option name="project" value="LOCAL" />
<updated>1704526668819</updated>
</task>
<task id="LOCAL-00025" summary="added radio component">
<option name="closed" value="true" />
<created>1704577073405</created>
<option name="number" value="00025" />
<option name="presentableId" value="LOCAL-00025" />
<option name="project" value="LOCAL" />
<updated>1704577073405</updated>
</task>
<task id="LOCAL-00026" summary="added in preview page radio component">
<option name="closed" value="true" />
<created>1704577088372</created>
<option name="number" value="00026" />
<option name="presentableId" value="LOCAL-00026" />
<option name="project" value="LOCAL" />
<updated>1704577088372</updated>
</task>
<task id="LOCAL-00027" summary="I forgot, what I change">
<option name="closed" value="true" />
<created>1704577111494</created>
<option name="number" value="00027" />
<option name="presentableId" value="LOCAL-00027" />
<option name="project" value="LOCAL" />
<updated>1704577111494</updated>
</task>
<task id="LOCAL-00028" summary="I forgot, what I change">
<option name="closed" value="true" />
<created>1704577125154</created>
<option name="number" value="00028" />
<option name="presentableId" value="LOCAL-00028" />
<option name="project" value="LOCAL" />
<updated>1704577125154</updated>
</task>
<task id="LOCAL-00029" summary="added radio styles and mixins">
<option name="closed" value="true" />
<created>1704577139599</created>
<option name="number" value="00029" />
<option name="presentableId" value="LOCAL-00029" />
<option name="project" value="LOCAL" />
<updated>1704577139599</updated>
</task>
<task id="LOCAL-00030" summary="radio styles component update">
<option name="closed" value="true" />
<created>1704665181492</created>
<option name="number" value="00030" />
<option name="presentableId" value="LOCAL-00030" />
<option name="project" value="LOCAL" />
<updated>1704665181492</updated>
</task>
<task id="LOCAL-00031" summary="I forgot, what I changed">
<option name="closed" value="true" />
<created>1704665219291</created>
<option name="number" value="00031" />
<option name="presentableId" value="LOCAL-00031" />
<option name="project" value="LOCAL" />
<updated>1704665219291</updated>
</task>
<task id="LOCAL-00032" summary="Updated switch styles">
<option name="closed" value="true" />
<created>1704665235238</created>
<option name="number" value="00032" />
<option name="presentableId" value="LOCAL-00032" />
<option name="project" value="LOCAL" />
<updated>1704665235238</updated>
</task>
<task id="LOCAL-00033" summary="Updated preview page">
<option name="closed" value="true" />
<created>1704665243297</created>
<option name="number" value="00033" />
<option name="presentableId" value="LOCAL-00033" />
<option name="project" value="LOCAL" />
<updated>1704665243297</updated>
</task>
<task id="LOCAL-00034" summary="added mixins">
<option name="closed" value="true" />
<created>1704665255268</created>
<option name="number" value="00034" />
<option name="presentableId" value="LOCAL-00034" />
<option name="project" value="LOCAL" />
<updated>1704665255268</updated>
</task>
<task id="LOCAL-00035" summary="moved fonts to separated file">
<option name="closed" value="true" />
<created>1704665272238</created>
<option name="number" value="00035" />
<option name="presentableId" value="LOCAL-00035" />
<option name="project" value="LOCAL" />
<updated>1704665272238</updated>
</task>
<task id="LOCAL-00036" summary="added roboto fonts">
<option name="closed" value="true" />
<created>1704665285628</created>
<option name="number" value="00036" />
<option name="presentableId" value="LOCAL-00036" />
<option name="project" value="LOCAL" />
<updated>1704665285628</updated>
</task>
<task id="LOCAL-00037" summary="added roboto fonts, fabs and fonts style sheets after sass compiling">
<option name="closed" value="true" />
<created>1704665322221</created>
<option name="number" value="00037" />
<option name="presentableId" value="LOCAL-00037" />
<option name="project" value="LOCAL" />
<updated>1704665322221</updated>
</task>
<task id="LOCAL-00038" summary="added and updated some component (fabs, button, switch, radio, checkbox)">
<option name="closed" value="true" />
<created>1704665352879</created>
<option name="number" value="00038" />
<option name="presentableId" value="LOCAL-00038" />
<option name="project" value="LOCAL" />
<updated>1704665352879</updated>
</task>
<task id="LOCAL-00039" summary="added sass style sheet file for fabs">
<option name="closed" value="true" />
<created>1704665367142</created>
<option name="number" value="00039" />
<option name="presentableId" value="LOCAL-00039" />
<option name="project" value="LOCAL" />
<updated>1704665367142</updated>
</task>
<task id="LOCAL-00040" summary="updated button styles and renaming button component file">
<option name="closed" value="true" />
<created>1704665398936</created>
<option name="number" value="00040" />
<option name="presentableId" value="LOCAL-00040" />
<option name="project" value="LOCAL" />
<updated>1704665398936</updated>
</task>
<task id="LOCAL-00041" summary="updated checkbox styles">
<option name="closed" value="true" />
<created>1704665410733</created>
<option name="number" value="00041" />
<option name="presentableId" value="LOCAL-00041" />
<option name="project" value="LOCAL" />
<updated>1704665410733</updated>
</task>
<task id="LOCAL-00042" summary="updated styles for preview page">
<option name="closed" value="true" />
<created>1704748096828</created>
<option name="number" value="00042" />
<option name="presentableId" value="LOCAL-00042" />
<option name="project" value="LOCAL" />
<updated>1704748096828</updated>
</task>
<task id="LOCAL-00043" summary="switch styles completed">
<option name="closed" value="true" />
<created>1704748124500</created>
<option name="number" value="00043" />
<option name="presentableId" value="LOCAL-00043" />
<option name="project" value="LOCAL" />
<updated>1704748124500</updated>
</task>
<task id="LOCAL-00044" summary="updated preview page">
<option name="closed" value="true" />
<created>1704748135954</created>
<option name="number" value="00044" />
<option name="presentableId" value="LOCAL-00044" />
<option name="project" value="LOCAL" />
<updated>1704748135954</updated>
</task>
<task id="LOCAL-00045" summary="added attribute &quot;selected&quot; for icons">
<option name="closed" value="true" />
<created>1704748153364</created>
<option name="number" value="00045" />
<option name="presentableId" value="LOCAL-00045" />
<option name="project" value="LOCAL" />
<updated>1704748153364</updated>
</task>
<task id="LOCAL-00046" summary="switch styles hotfix">
<option name="closed" value="true" />
<created>1704751209333</created>
<option name="number" value="00046" />
<option name="presentableId" value="LOCAL-00046" />
<option name="project" value="LOCAL" />
<updated>1704751209333</updated>
</task>
<task id="LOCAL-00047" summary="switch styles hotfix">
<option name="closed" value="true" />
<created>1704751889114</created>
<option name="number" value="00047" />
<option name="presentableId" value="LOCAL-00047" />
<option name="project" value="LOCAL" />
<updated>1704751889114</updated>
</task>
<task id="LOCAL-00048" summary="added compiled sass styles for icon-buttons">
<option name="closed" value="true" />
<created>1704837754211</created>
<option name="number" value="00048" />
<option name="presentableId" value="LOCAL-00048" />
<option name="project" value="LOCAL" />
<updated>1704837754211</updated>
</task>
<task id="LOCAL-00049" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1704837786812</created>
<option name="number" value="00049" />
<option name="presentableId" value="LOCAL-00049" />
<option name="project" value="LOCAL" />
<updated>1704837786812</updated>
</task>
<task id="LOCAL-00050" summary="separated components previews">
<option name="closed" value="true" />
<created>1704837827996</created>
<option name="number" value="00050" />
<option name="presentableId" value="LOCAL-00050" />
<option name="project" value="LOCAL" />
<updated>1704837827996</updated>
</task>
<task id="LOCAL-00051" summary="added m3 wrapper">
<option name="closed" value="true" />
<created>1704837841727</created>
<option name="number" value="00051" />
<option name="presentableId" value="LOCAL-00051" />
<option name="project" value="LOCAL" />
<updated>1704837841727</updated>
</task>
<task id="LOCAL-00052" summary="added icon button (wip)">
<option name="closed" value="true" />
<created>1704837855501</created>
<option name="number" value="00052" />
<option name="presentableId" value="LOCAL-00052" />
<option name="project" value="LOCAL" />
<updated>1704837855501</updated>
</task>
<task id="LOCAL-00053" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837877968</created>
<option name="number" value="00053" />
<option name="presentableId" value="LOCAL-00053" />
<option name="project" value="LOCAL" />
<updated>1704837877968</updated>
</task>
<task id="LOCAL-00054" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837881086</created>
<option name="number" value="00054" />
<option name="presentableId" value="LOCAL-00054" />
<option name="project" value="LOCAL" />
<updated>1704837881086</updated>
</task>
<task id="LOCAL-00055" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837896608</created>
<option name="number" value="00055" />
<option name="presentableId" value="LOCAL-00055" />
<option name="project" value="LOCAL" />
<updated>1704837896608</updated>
</task>
<task id="LOCAL-00056" summary="updated styles">
<option name="closed" value="true" />
<created>1704837910534</created>
<option name="number" value="00056" />
<option name="presentableId" value="LOCAL-00056" />
<option name="project" value="LOCAL" />
<updated>1704837910534</updated>
</task>
<task id="LOCAL-00057" summary="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons">
<option name="closed" value="true" />
<created>1705098993824</created>
<option name="number" value="00057" />
<option name="presentableId" value="LOCAL-00057" />
<option name="project" value="LOCAL" />
<updated>1705098993824</updated>
</task>
<task id="LOCAL-00058" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187043022</created>
<option name="number" value="00058" />
<option name="presentableId" value="LOCAL-00058" />
<option name="project" value="LOCAL" />
<updated>1705187043022</updated>
</task>
<task id="LOCAL-00059" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187047711</created>
<option name="number" value="00059" />
<option name="presentableId" value="LOCAL-00059" />
<option name="project" value="LOCAL" />
<updated>1705187047711</updated>
</task>
<task id="LOCAL-00060" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187050731</created>
<option name="number" value="00060" />
<option name="presentableId" value="LOCAL-00060" />
<option name="project" value="LOCAL" />
<updated>1705187050731</updated>
</task>
<task id="LOCAL-00061" summary="added a few variation of icon button">
<option name="closed" value="true" />
<created>1705187070169</created>
<option name="number" value="00061" />
<option name="presentableId" value="LOCAL-00061" />
<option name="project" value="LOCAL" />
<updated>1705187070169</updated>
</task>
<task id="LOCAL-00062" summary="added support attribute &quot;selected&quot; for icon buttons">
<option name="closed" value="true" />
<created>1705187096566</created>
<option name="number" value="00062" />
<option name="presentableId" value="LOCAL-00062" />
<option name="project" value="LOCAL" />
<updated>1705187096567</updated>
</task>
<task id="LOCAL-00063" summary="improved file management">
<option name="closed" value="true" />
<created>1705446770845</created>
<option name="number" value="00063" />
<option name="presentableId" value="LOCAL-00063" />
<option name="project" value="LOCAL" />
<updated>1705446770846</updated>
</task>
<task id="LOCAL-00064" summary="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme">
<option name="closed" value="true" />
<created>1705788187457</created>
<option name="number" value="00064" />
<option name="presentableId" value="LOCAL-00064" />
<option name="project" value="LOCAL" />
<updated>1705788187457</updated>
</task>
<task id="LOCAL-00065" summary="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme">
<option name="closed" value="true" />
<created>1705788194219</created>
<option name="number" value="00065" />
<option name="presentableId" value="LOCAL-00065" />
<option name="project" value="LOCAL" />
<updated>1705788194219</updated>
</task>
<task id="LOCAL-00066" summary="TODO: before icon&#10;ADDED: semi-complete filled text fields">
<option name="closed" value="true" />
<created>1705877491483</created>
<option name="number" value="00066" />
<option name="presentableId" value="LOCAL-00066" />
<option name="project" value="LOCAL" />
<updated>1705877491483</updated>
</task>
<task id="LOCAL-00067" summary="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
<option name="closed" value="true" />
<created>1705955541881</created>
<option name="number" value="00067" />
<option name="presentableId" value="LOCAL-00067" />
<option name="project" value="LOCAL" />
<updated>1705955541881</updated>
</task>
<option name="localTasksCounter" value="68" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="added roboto fonts" />
<MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
<MESSAGE value="added sass style sheet file for fabs" />
<MESSAGE value="updated button styles and renaming button component file" />
<MESSAGE value="updated checkbox styles" />
<MESSAGE value="updated styles for preview page" />
<MESSAGE value="switch styles completed" />
<MESSAGE value="updated preview page" />
<MESSAGE value="added attribute &quot;selected&quot; for icons" />
<MESSAGE value="switch styles hotfix" />
<MESSAGE value="added compiled sass styles for icon-buttons" />
<MESSAGE value="separated components previews" />
<MESSAGE value="added m3 wrapper" />
<MESSAGE value="added icon button (wip)" />
<MESSAGE value="??? wtf bro" />
<MESSAGE value="updated styles" />
<MESSAGE value="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons" />
<MESSAGE value="icon button styles completed" />
<MESSAGE value="added a few variation of icon button" />
<MESSAGE value="added support attribute &quot;selected&quot; for icon buttons" />
<MESSAGE value="improved file management" />
<MESSAGE value="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme" />
<MESSAGE value="TODO: before icon&#10;ADDED: semi-complete filled text fields" />
<MESSAGE value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
<option name="LAST_COMMIT_MESSAGE" value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
</component>
</project>

62
app/components/buttons.tsx Normal file
View File

@ -0,0 +1,62 @@
"use client"
import React, {useCallback, useState} from 'react';
import {Button} from "../../src/primitive-components/material-you-components";
import axios from "axios";
export default function Buttons() {
const [state, setState] = useState(1);
const callback = useCallback(() =>
setState(prevState => prevState + 1)
, [state]);
return (
<div className={"m3 m3-wrapper"}>
<h1> Buttons </h1>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div>
<h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
<Button variant={"filled"} onClick={callback}>
Label + {state}
</Button>
<Button variant={"outlined"}>
Label
</Button>
<Button variant={"tonal"}>
Label
</Button>
<Button variant={"elevated"}>
Label
</Button>
<Button variant={"text"}>
Label
</Button>
</div>
</div>
<div>
<h2> Buttons with icon </h2>
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
<Button variant={"filled"} icon={"add"}>
Label
</Button>
<Button variant={"outlined"} icon={"add"}>
Label
</Button>
<Button variant={"tonal"} icon={"add"}>
Label
</Button>
<Button variant={"elevated"} icon={"add"}>
Label
</Button>
<Button variant={"text"} icon={"add"}>
Label
</Button>
</div>
</div>
</div>
</div>
);
}

48
app/components/checkboxes.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client"
import React from 'react';
import {Button, Checkbox } from '../../src/primitive-components/material-you-components';
export default function Checkboxes() {
return (
<div className={"m3 m3-wrapper"}>
<h1> Checkboxes </h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<Checkbox/>
<Checkbox defaultChecked/>
<Checkbox indeterminate={true}/>
</div>
</div>
<div>
<h2> Disabled </h2>
<div style={{display: "flex", gap: "2em"}}>
<Checkbox disabled/>
<Checkbox disabled defaultChecked/>
</div>
</div>
<div>
<h2> Errored </h2>
<form style={{display: "flex", gap: "2em", flexDirection: "column"}}>
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
<Checkbox required/>
<Checkbox required defaultChecked/>
<Checkbox required indeterminate={true}/>
</div>
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
<Checkbox required className={"m3-error"}/>
<Checkbox required defaultChecked className={"m3-error"}/>
<Checkbox required indeterminate={true} className={"m3-error"}/>
</div>
<Button type={"submit"}>
Send
</Button>
</form>
</div>
</div>
</div>
);
}

85
app/components/fabs.tsx Normal file
View File

@ -0,0 +1,85 @@
import React from 'react';
import {FAB} from "../../src/primitive-components/material-you-components";
export default function Fabs() {
return (
<div className={"m3 m3-wrapper"}>
<h1> FABs </h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div>
<h2> Small </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"small"}
icon={"edit"}/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB icon={"edit"}/>
<FAB variant={"primary"} icon={"edit"}/>
<FAB variant={"secondary"} icon={"edit"}/>
<FAB variant={"tertiary"} icon={"edit"}/>
</div>
</div>
<div>
<h2> Large </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"large"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"large"}
icon={"edit"}/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"primary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"secondary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"tertiary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
</div>
</div>
</div>
</div>
);
}

116
app/components/icon-buttons.tsx Normal file
View File

@ -0,0 +1,116 @@
"use client"
import React from 'react';
import {IconButton} from "../../src/primitive-components/material-you-components";
function IconButtons() {
return (
<div className={"m3 m3-wrapper"}>
<h1> Icon buttons </h1>
<div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
<div>
<h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"}/>
<IconButton icon={"settings"} variant={"filled"}/>
<IconButton icon={"settings"} variant={"tonal"}/>
<IconButton icon={"settings"} variant={"outlined"}/>
</div>
<h2> Disabled default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} disabled/>
<IconButton icon={"settings"} variant={"filled"} disabled/>
<IconButton icon={"settings"} variant={"tonal"} disabled/>
<IconButton icon={"settings"} variant={"outlined"} disabled/>
</div>
</div>
<div>
<h2> Toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
</div>
<h2> Disabled toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
</div>
<h2> Disabled selected toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
</div>
</div>
</div>
</div>
);
}
export default IconButtons;

26
app/components/radios.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { Radio } from '../../src/primitive-components/material-you-components';
export default function Radios() {
return (
<div className={"m3 m3-wrapper"}>
<h1> Radio </h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<Radio/>
<Radio defaultChecked/>
</div>
</div>
<div>
<h2> Disabled </h2>
<div style={{display: "flex", gap: "2em"}}>
<Radio disabled/>
<Radio disabled defaultChecked/>
</div>
</div>
</div>
</div>
);
}

55
app/components/switches.tsx Normal file
View File

@ -0,0 +1,55 @@
import React from 'react';
import {Switch} from "../../src/primitive-components/material-you-components";
export default function Switches() {
return (
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
<h1> Switches </h1>
<div style={{display: "flex", flexDirection: "column"}}>
<h2 style={{margin: 0}}> Without icon </h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div>
<h2> Default </h2>
<Switch/>
<Switch defaultChecked/>
</div>
<div>
<h2> Disabled </h2>
<Switch disabled/>
<Switch disabled defaultChecked/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "column"}}>
<h2 style={{margin: 0}}> With icon (both)</h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div>
<h2> Default </h2>
<Switch icon/>
<Switch defaultChecked icon/>
</div>
<div>
<h2> Disabled </h2>
<Switch disabled icon/>
<Switch disabled defaultChecked icon/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "column"}}>
<h2 style={{margin: 0}}> With icon (selected)</h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div>
<h2> Default </h2>
<Switch selected icon/>
<Switch selected defaultChecked icon/>
</div>
<div>
<h2> Disabled </h2>
<Switch selected disabled icon/>
<Switch selected disabled defaultChecked icon/>
</div>
</div>
</div>
</div>
);
}

424
app/components/text-fields.tsx Normal file
View File

@ -0,0 +1,424 @@
import React from 'react';
import {TextField} from "../../src/primitive-components/text-field/text-field";
import {Button} from "../../src/primitive-components/button/button";
export function TextFields(_props : any) {
return (
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div>
<h1> Inputs </h1>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<h2> Filled Inputs </h2>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withAfterIcon
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"} withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
<div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withBeforeIcon
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withBeforeIcon
supportingText={"Supporting text"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h1> Outlined </h1>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<h2> Filled Inputs </h2>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withAfterIcon
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"} withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
<div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withBeforeIcon
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withBeforeIcon
supportingText={"Supporting text"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

17
app/layout.tsx Normal file
View File

@ -0,0 +1,17 @@
import "../src/styles/generics.css"
import "../src/styles/button.css"
import "../src/styles/ripple.css"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
)
}

46
app/page.tsx Normal file
View File

@ -0,0 +1,46 @@
import {Fragment} from "react";
import Buttons from "./components/buttons"
import Switches from "./components/switches";
import Checkboxes from "./components/checkboxes";
import Radios from "./components/radios";
import Fabs from "./components/fabs";
import IconButtons from "./components/icon-buttons";
import {TextFields} from "./components/text-fields";
export default function Page() {
return(
<Fragment>
<div style={{
display: "flex",
flexDirection:"column",
justifyContent: "center",
alignItems: "center",
width: "100%",
gap: "0em"
}}>
<h1>Google Material You UI kit</h1>
<div style={{
display: "flex",
flexDirection:"row",
justifyContent: "center",
alignItems: "center",
gap:"20px"
}}>
{/*<div style={{*/}
{/* display: "flex",*/}
{/* flexDirection:"column",*/}
{/* gap:"20px",*/}
{/*}}>*/}
{/* <Buttons/>*/}
{/* <IconButtons/>*/}
{/*</div>*/}
{/*<Switches/>*/}
{/*<Checkboxes/>*/}
{/*<Radios/>*/}
{/*<Fabs/>*/}
<TextFields/>
</div>
</div>
</Fragment>
)
}

541
dist/output.css vendored Normal file
View File

@ -0,0 +1,541 @@
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-skeleton styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

541
dist/styles/styles.css vendored Normal file
View File

@ -0,0 +1,541 @@
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-skeleton styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

4248
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"private": true,
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start"
},
"dependencies": {
"axios": "^1.6.5",
"lodash": "^4.17.21",
"mui": "^0.0.1",
"next": "latest",
"normalize.css": "^8.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.5",
"styled-components": "^6.1.1"
},
"devDependencies": {
"@types/node": "20.8.10",
"@types/react": "18.2.33",
"@types/react-dom": "18.2.14",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.56.0",
"eslint-config-standard-with-typescript": "^43.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"postcss": "^8.4.32",
"typescript": "^5.3.3"
}
}

5
postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {},
},
}

43
src/primitive-components/button-skeleton/button-skeleton.tsx Normal file
View File

@ -0,0 +1,43 @@
"use client"
import {RippleArea} from "../ripple/ripple-area";
import React, {forwardRef, useId, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
const ButtonSkeleton = forwardRef(
function ButtonBase(props : any, ref){
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
let {
variant,
disabled,
className
} = props;
let classes = className ?
`m3 ${className} ${variant}${isActive ? " is-active" : ""}` :
`m3 ${variant}${isActive ? " is-active" : ""}`;
return (
<button {...props}
{...events}
ref={ref}
id={buttonId}
className={classes}
disabled={disabled}>
{props.children}
<RippleArea ref={ripplesRef}
callback={setIsActive}/>
</button>
)
}
)
export {ButtonSkeleton};

25
src/primitive-components/button-skeleton/button.types.ts Normal file
View File

@ -0,0 +1,25 @@
import {PropsWithChildren} from "react";
type toggleButtonType = {
selected: string,
unselected: string,
}
export interface buttonMainProps extends PropsWithChildren<any>{
disabled? : boolean,
variant? : "filled" | "outlined" | "elevated" | "tonal" | "text",
}
export interface FABMainProps extends PropsWithChildren<any>{
icon : string;
disabled? : boolean;
size? : "small" | "default" | "large" | "extended";
variant? : "surface" | "primary" | "secondary" | "tertiary";
}
export interface iconButtonMainProps extends PropsWithChildren<any>{
icon : string;
toggled? : false | toggleButtonType;
disabled? : boolean;
variant? : "default" | "filled" | "tonal" | "outlined";
}

30
src/primitive-components/button/button.tsx Normal file
View File

@ -0,0 +1,30 @@
import {forwardRef} from "react";
import {buttonMainProps} from "../button-skeleton/button.types";
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
/**
* Button component
** description
*/
export const Button = forwardRef(
(props : buttonMainProps, ref) => (
<ButtonSkeleton {...props}
ref={ref}
disabled={props.disabled}
variant={props.variant ? props.variant : "filled"}>
{
props.icon ?
<span className={"m3 m3-icon"}>
{props.icon}
</span>
: <></>
}
<span className={"label-large"}>
{props.children}
</span>
</ButtonSkeleton>
)
)

34
src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx Normal file
View File

@ -0,0 +1,34 @@
"use client"
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
export const CheckBoxSkeleton = forwardRef(
function CheckBoxBase(props : any, ref) : JSX.Element {
const checkboxRef = useRef<any>(null);
useEffect(() => {
checkboxRef.current.indeterminate = props.indeterminate === "true";
}, []);
useImperativeHandle(ref, () => checkboxRef);
let type = props.typeInput || props.type,
_props = {...props};
if(_props.indeterminate) delete _props.indeterminate;
if(_props.typeInput) delete _props.typeInput;
const classes = props.className !== undefined ?
`m3 m3-${type} ${props.className}` : `m3 m3-${type}`
return (
<input ref={checkboxRef}
{..._props}
type={props.type}
className={classes.trimEnd()}/>
);
}
);

38
src/primitive-components/checkbox/checkbox.tsx Normal file
View File

@ -0,0 +1,38 @@
import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
/**
* Checkbox component
** description
*/
export const Checkbox = forwardRef(
(props : any, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
return (
<label {...events}
className={classes}>
<CheckBoxSkeleton {...props}
ref={ref}
indeterminate={indeterminate}
type={"checkbox"}/>
<span className={"m3 m3-checkbox-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}
callback={setIsActive}/>
{props.children}
</label>
)
}
)

32
src/primitive-components/fab/fab.tsx Normal file
View File

@ -0,0 +1,32 @@
import {forwardRef} from "react";
import {FABMainProps} from "../button-skeleton/button.types";
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
/**
* FABs component
** description
*/
export const FAB = forwardRef(
(props : FABMainProps, ref) => (
<ButtonSkeleton {...props}
ref={ref}
disabled={props.disabled}
variant={props.variant ? props.variant : "surface"}
className={props.size ? `m3-fab m3-${props.size}-fab` : `m3-fab m3-default-fab`}>
<span className={"m3-icon"}>
{props.icon}
</span>
{
props.size === "extended" ? (
<span className={"label-large"}>
{props.children}
</span>
)
: <></>
}
</ButtonSkeleton>
)
);

55
src/primitive-components/icon-button/icon-button.tsx Normal file
View File

@ -0,0 +1,55 @@
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
import {iconButtonMainProps} from "../button-skeleton/button.types";
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
/**
* Icon button-skeleton component
** description
*/
export const IconButton = forwardRef(
({icon, variant, disabled, selected = false, toggled = false, ...props} : iconButtonMainProps, ref) => {
const [toggleIcon, setToggleIcon] = useState<any>({
state : selected == true ? "selected" : "unselected",
icon : toggled ? toggled.unselected : ""
});
const toggle = useCallback((classes, icon) => {
setToggleIcon(() => ({
state : classes,
icon : icon,
}))
}, [])
let buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback(() => {
if(toggled) {
if (toggleIcon.state === "selected") toggle("", toggled.unselected)
else toggle("selected", toggled.selected)
}
if(props.onClick) props.onClick();
}, [toggleIcon])
useImperativeHandle(ref, () => buttonRef);
return (
<ButtonSkeleton {...props}
ref={buttonRef}
onClick={callback}
disabled={disabled}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
variant={variant ? variant : "default"}>
<span className={"m3-icon"}>
{
toggled ? toggleIcon.icon : icon ? icon : <></>
}
</span>
</ButtonSkeleton>
)
}
)

12
src/primitive-components/material-you-components.tsx Normal file
View File

@ -0,0 +1,12 @@
"use client"
export {FAB} from "./fab/fab";
export {Radio} from "./radio/radio";
export {Switch} from "./switch/switch";
export {Button} from "./button/button";
export {Checkbox} from "./checkbox/checkbox";
export {RippleArea} from "./ripple/ripple-area";
export {Ripples, Ripple} from "./ripple/ripple";
export {TextField} from "./text-field/text-field";
export {IconButton} from "./icon-button/icon-button";
export {ButtonSkeleton} from "./button-skeleton/button-skeleton";

37
src/primitive-components/radio/radio.tsx Normal file
View File

@ -0,0 +1,37 @@
import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
/**
* Radio component
** description
*/
export const Radio = forwardRef(
(props : any, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-radio-label ${isActive === true ? "visible" : ""}`.trimEnd();
return (
<label {...events}
className={classes}>
<CheckBoxSkeleton {...props}
ref={ref}
type={"radio"}/>
<span className={"m3 m3-radio-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}
callback={setIsActive}/>
{props.children}
</label>
)
}
)

41
src/primitive-components/ripple/hooks/useRippleEffect.ts Normal file
View File

@ -0,0 +1,41 @@
import React, {useEffect, useState} from 'react';
interface RippleEventHandlers {
onBlur: React.FocusEventHandler;
onContextMenu: React.MouseEventHandler;
onDragLeave: React.DragEventHandler;
onMouseDown: React.MouseEventHandler;
onMouseLeave: React.MouseEventHandler;
onMouseUp: React.MouseEventHandler;
onTouchEnd: React.TouchEventHandler;
onTouchMove: React.TouchEventHandler;
onTouchStart: React.TouchEventHandler;
}
const UseRippleEffect = (ref, callback) : undefined | RippleEventHandlers => {
const [mounted, setMounted] = useState<boolean>(false)
useEffect(() => {
if (!mounted) setMounted(true);
})
if (!mounted) return;
const {start, stop} = ref.current;
return {
onBlur: (event) => stop(event, callback),
onContextMenu: (event) => start(event, callback),
onDragLeave: (event) => stop(event, callback),
onMouseDown: (event) => start(event, callback),
onMouseLeave: (event) => stop(event, callback),
onMouseUp: (event) => stop(event, callback),
onTouchEnd: (event) => stop(event, callback),
onTouchMove: (event) => stop(event, callback),
onTouchStart: (event) => stop(event, callback),
}
}
export default UseRippleEffect;

114
src/primitive-components/ripple/ripple-area.tsx Normal file
View File

@ -0,0 +1,114 @@
"use client"
import React, {
useId,
useRef,
useState,
forwardRef,
useCallback,
useImperativeHandle
} from 'react';
import {Ripple} from "./ripple";
import {Ripples} from "./ripple";
import {RippleAreaProps} from "./ripple.types";
const TIMEOUT : number = 550;
const rippleAreaContext = React.createContext(false);
const RippleArea = forwardRef(
function RippleArea(props : RippleAreaProps, ref) {
const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
rippleDomain = useRef<any>(null),
clicked = useRef<boolean>(false),
uniqueKey = useRef<number>(0),
uniqueId = useId();
let classes = props.className ?
`m3 m3-ripple-domain ${props.className}`.trimEnd() :
"m3 m3-ripple-domain";
const start = useCallback((event : any, cb : (state : boolean) => void) : void => {
clicked.current = true;
cb(clicked.current);
const rippleDomainChar = rippleDomain.current ? rippleDomain.current.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0,
}
let rippleX : number = event.clientX - rippleDomainChar.left,
rippleY : number = event.clientY - rippleDomainChar.top,
rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2,
rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2,
rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
setRipples((prevRipples : Array<JSX.Element>) => {
if(prevRipples.length === 0){
return [
<Ripple rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}/>
]
} else {
let old = [...prevRipples];
old.push(
<Ripple rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}/>
)
return old;
}
}
)
uniqueKey.current += 1;
}, []);
const stop = useCallback((_event : any, cb : (state : boolean) => void) => {
clicked.current = false;
cb(clicked.current);
setRipples((prevRipples : Array<JSX.Element>) => {
if(prevRipples.length > 0) {
let old = [...prevRipples];
old.shift();
return old;
}
return prevRipples
});
},[]);
useImperativeHandle(ref, () => ({
start,
stop,
}), [start, stop]);
return (
<span className={classes}
id={uniqueId}
ref={rippleDomain}>
<rippleAreaContext.Provider value={clicked.current}>
<Ripples>
{ripples}
</Ripples>
</rippleAreaContext.Provider>
</span>
);
}
)
export {rippleAreaContext, RippleArea};

84
src/primitive-components/ripple/ripple.tsx Normal file
View File

@ -0,0 +1,84 @@
"use client"
import React, {useCallback, useContext, useEffect, useRef, useState, useTransition} from 'react';
import RippleEffectBuild from "./utils/ripple-effect-builder";
import {rippleAreaContext} from "./ripple-area";
import {rippleProps} from "./ripple.types";
import isEmpty from "./utils/utils";
function Ripples(props : any){
const [ripples, setRipples] = useState({});
const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition();
const LifetimeEnd = useCallback((child) => {
if (child.props.endLifetime) {
child.props.endLifetime();
}
setRipples(state => {
let children = {...state};
delete children[child.key];
return children;
})
}, []);
useEffect(() => {
if(props.children.length > 0){
startTransition(() => {
if (firstRender.current || isEmpty(ripples)) {
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
firstRender.current = false;
} else {
setRipples(RippleEffectBuild(props.children, LifetimeEnd, ripples))
}
});
}
}, [props.children]);
return(
<>
{ Object.values(ripples) }
</>
)
}
function Ripple(props : rippleProps) {
const {
rippleX,
rippleY,
rippleS,
endLifetime,
lifetime
} = props;
const clicked = useContext<boolean>(rippleAreaContext);
const [classes, setClasses] = useState<string>("m3 ripple visible");
useEffect(() => {
if(endLifetime !== null && !clicked) {
setClasses("m3 ripple")
setTimeout(endLifetime, lifetime);
}
}, [clicked, endLifetime]);
return (
<span className={classes} style={
{
left: -(rippleS / 2) + rippleX,
top: -(rippleS / 2) + rippleY,
width: rippleS,
aspectRatio: 1,
}
}/>
);
}
export {Ripple, Ripples};

15
src/primitive-components/ripple/ripple.types.ts Normal file
View File

@ -0,0 +1,15 @@
import React, {ComponentProps, Dispatch, SetStateAction} from "react";
export interface RippleAreaProps extends ComponentProps<any> {
ref : React.ForwardedRef<any>,
callback : Dispatch<SetStateAction<boolean>>,
}
export type rippleProps = {
rippleX : number,
rippleY : number,
rippleS : number,
endLifetime? : any,
lifetime : number,
key? : number,
}

18
src/primitive-components/ripple/utils/array-convert-to-obj.ts Normal file
View File

@ -0,0 +1,18 @@
import {cloneElement, ReactElement} from "react";
export default function ArrayConvertToObj(
obj : Object,
nextChildren : ReactElement[],
callback : (child: any) => void
) : void {
Object
.values(nextChildren)
.forEach((child : JSX.Element) =>
obj[child.key] = cloneElement(child, {
...child.props,
endLifetime: callback.bind(null, child)
})
);
}

36
src/primitive-components/ripple/utils/ripple-effect-builder.ts Normal file
View File

@ -0,0 +1,36 @@
import ArrayConvertToObj from "./array-convert-to-obj";
import {cloneElement, ReactElement} from "react";
import isEmpty from "./utils";
export default function RippleEffectBuild(
nextRipples : ReactElement[],
callback : (child : any) => void,
prevRipples? : any | null
) {
let empty : boolean = isEmpty(prevRipples);
let preparedRipples : object = empty ? {} : prevRipples;
switch (empty) {
case true:
ArrayConvertToObj(preparedRipples, nextRipples, callback);
break;
case false:
let next : object = {};
ArrayConvertToObj(next, nextRipples, callback)
for(let rippleKey of Object.keys(next)){
if(preparedRipples[rippleKey] == undefined){
preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
...next[rippleKey].props,
endLifetime: callback.bind(null, next[rippleKey])
})
}
}
break;
}
return preparedRipples;
}

4
src/primitive-components/ripple/utils/utils.ts Normal file
View File

@ -0,0 +1,4 @@
export default function isEmpty(obj : Object) : boolean{
for(let _i in obj) return false;
return true;
}

24
src/primitive-components/switch/switch.tsx Normal file
View File

@ -0,0 +1,24 @@
import {forwardRef} from "react";
import {switchMainProps} from "./switch.types";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
/**
* Switch component
** description
*/
export const Switch = forwardRef(
({icon, disabled, selected = false, ...props} : switchMainProps, ref) => (
<label>
<CheckBoxSkeleton {...props}
ref={ref}
data-icon={icon}
type={"checkbox"}
disabled={disabled}
typeInput={"switch"}
data-selected={selected}/>
</label>
)
)

7
src/primitive-components/switch/switch.types.ts Normal file
View File

@ -0,0 +1,7 @@
import {PropsWithChildren} from "react";
export interface switchMainProps extends PropsWithChildren<any>{
disabled? : boolean,
icon? : boolean,
selected? : boolean
}

56
src/primitive-components/text-field/text-field.tsx Normal file
View File

@ -0,0 +1,56 @@
"use client"
import React, {PropsWithChildren, useState} from 'react';
import {bool, string} from "prop-types";
interface TextFieldInterface extends PropsWithChildren<any>{
variant: "filled" | "outlined",
withAfterIcon?: boolean,
withBeforeIcon?: boolean,
supportingText?: string,
}
export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
const [used, setUsed] = useState<boolean>(false);
const callback = (e : any) => {
if(e.type === "blur" && e.target.value.length === 0) setUsed(false);
else if(e.type === "focus") setUsed(true);
}
const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" :
withBeforeIcon ? "with-before-icon" : withAfterIcon ? "with-after-icon" : ""
return (
<span>
<div className={`m3 m3-text-field ${variant}`.trimEnd()}>
{withBeforeIcon && <span className={"m3-icon icon-before"}>{withBeforeIcon && "search"}</span>}
<input {...props}
className={`${props.className ?? ""} ${iconStyles}`.trim()}
onFocus={(event) => {
callback(event);
if(props.onFocus) props.onFocus(event)
}}
onBlur={(event) => {
callback(event)
if(props.onBlur) props.onBlur(event)
}}/>
<label className={used && "used"}> {props.children ?? "Label"} </label>
<span className={"m3-text-field-state-layer"}/>
{withAfterIcon && <span className={"m3-icon"}>{withAfterIcon && "cancel"}</span>}
</div>
{supportingText && <span className={"m3-text-field-supporting-text"}>{supportingText}</span>}
</span>
);
}
TextField.propTypes = {
children: string,
withBeforeIcon: bool,
withAfterIcon: bool,
className: string,
variant: string,
supportingText: string,
}

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/button.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/elevation.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/generics.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/ripple.sassc Normal file
View File

Binary file not shown.

127
src/styles/button.css Normal file
View File

@ -0,0 +1,127 @@
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) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 18px;
}
button:not(.m3-fab, .m3-icon-button).m3 {
contain: content;
box-sizing: border-box;
border-radius: 100px;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 24px;
border: none;
gap: 8px;
}
button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
color: var(--md-sys-color-on-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined {
border: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text {
padding: 10px 12px !important;
background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-surface-container-low);
}
button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal {
background-color: var(--md-sys-color-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
color: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button)::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
background: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
box-shadow: none !important;
}
button:not(.m3-fab, .m3-icon-button):active.elevated {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
border-color: var(--md-sys-color-primary) !important;
}
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.elevated {
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled {
pointer-events: none;
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
/*# sourceMappingURL=button.css.map */

1
src/styles/button.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECHI;EDKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECpCA;;ADuCA;ECjCA;;ADoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECnDA;;ADsDA;EChDA;;ADmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

118
src/styles/button.sass Normal file
View File

@ -0,0 +1,118 @@
@import "mixins/m3-mixins"
button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
& > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 500
font-size: 18px
line-height: 18px
&.m3
contain: content
box-sizing: border-box
border-radius: 100px
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
text-align: center
padding: 10px 24px
border: none
gap: 8px
&.filled
background-color: var(--md-sys-color-primary)
&, & > span.m3-icon
color: var(--md-sys-color-on-primary)
&.outlined
border: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000
&, & > span.m3-icon
color: var(--md-sys-color-primary)
&.text
padding: 10px 12px !important
background-color: #00000000
&, & > span.m3-icon
color: var(--md-sys-color-primary)
&.elevated
@include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)
&, & > span.m3-icon
color: var(--md-sys-color-primary)
&.tonal
background-color: var(--md-sys-color-secondary-container)
&, & > span.m3-icon
color: var(--md-sys-color-on-secondary-container)
&::before
@include state-layer
&.filled > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&:is(.outlined, .text, .elevated)
& > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
&:is(.filled, .tonal)
@include elevation-0(true)
&.elevated
@include elevation-1(true)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:focus-visible
&.outlined
border-color: var(--md-sys-color-primary) !important
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&:is(.outlined, .text, .elevated)::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:hover
&:is(.filled, .tonal)
@include elevation-1(false)
&.elevated
@include elevation-2(false)
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
&:is(.outlined, .text, .elevated)::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:disabled
pointer-events: none
&:is(.filled, .elevated, .tonal, .outlined, .text)
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:is(.filled, .elevated, .tonal)
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&.elevated
box-shadow: none
&.outlined
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important

102
src/styles/checkbox.css Normal file
View File

@ -0,0 +1,102 @@
label.m3.m3-checkbox-label {
display: flex;
position: relative;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
position: absolute;
width: 40px;
aspect-ratio: inherit;
border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
span.m3.m3-checkbox-ripple-layer {
z-index: 20;
contain: content;
border-radius: 50%;
position: absolute;
width: 40px;
height: 40px;
}
input[type=checkbox].m3.m3-checkbox {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
z-index: 10;
width: 14px;
height: 14px;
margin: 0;
border-radius: 2px;
border: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
border: 2px solid var(--md-sys-color-error);
background-color: var(--md-sys-color-error);
}
input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
border: 2px solid var(--md-sys-color-error);
}
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
border: 2px solid var(--md-sys-color-primary);
background-color: var(--md-sys-color-primary);
}
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%;
border: 2px solid var(--md-sys-color-on-surface);
}
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
opacity: 38%;
background-color: var(--md-sys-color-on-surface);
}
input[type=checkbox].m3.m3-checkbox::after {
line-height: 18px;
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--md-sys-color-on-primary);
}
input[type=checkbox].m3.m3-checkbox:checked::after {
content: "done";
}
input[type=checkbox].m3.m3-checkbox:indeterminate::after {
content: "check_indeterminate_small";
}
input[type=checkbox].m3.m3-checkbox:hover {
border: 2px solid var(--md-sys-color-on-surface);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
/*# sourceMappingURL=checkbox.css.map */

1
src/styles/checkbox.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"checkbox.css"}

92
src/styles/checkbox.sass Normal file
View File

@ -0,0 +1,92 @@
@import "mixins/m3-mixins"
label.m3.m3-checkbox-label
@include m3-label-mixin
& > span.m3.m3-checkbox-state-layer
@include m3-state-layer-mixin
span.m3.m3-checkbox-ripple-layer
z-index: 20
contain: content
border-radius: 50%
position: absolute
width: 40px
height: 40px
input[type="checkbox"].m3.m3-checkbox
appearance: none
display: flex
align-items: center
justify-content: center
box-sizing: content-box
z-index: 10
width: 14px
height: 14px
margin: 0
border-radius: 2px
border: 2px solid var(--md-sys-color-on-surface-variant)
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
border: 2px solid var(--md-sys-color-error)
background-color: var(--md-sys-color-error)
&:is(.m3.m3-error, :user-invalid)
border: 2px solid var(--md-sys-color-error)
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
border: 2px solid var(--md-sys-color-primary)
background-color: var(--md-sys-color-primary)
&:disabled
&:is(:hover, &)
opacity: 38%
border: 2px solid var(--md-sys-color-on-surface)
&:checked:is(:hover, &)
opacity: 38%
background-color: var(--md-sys-color-on-surface)
&::after
line-height: 18px
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 700
font-size: 18px
color: var(--md-sys-color-on-primary)
&:checked::after
content: "done"
&:indeterminate::after
content: "check_indeterminate_small"
&:hover
border: 2px solid var(--md-sys-color-on-surface)
&:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
& + span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
&:hover
& + span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&:active + span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)

51
src/styles/css/dark-hc.css Normal file
View File

@ -0,0 +1,51 @@
.dark-high-contrast {
--md-sys-color-primary: rgb(255 249 251);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(0 0 0);
--md-sys-color-primary-container: rgb(231 187 248);
--md-sys-color-on-primary-container: rgb(0 0 0);
--md-sys-color-secondary: rgb(255 249 251);
--md-sys-color-on-secondary: rgb(0 0 0);
--md-sys-color-secondary-container: rgb(216 196 220);
--md-sys-color-on-secondary-container: rgb(0 0 0);
--md-sys-color-tertiary: rgb(255 249 249);
--md-sys-color-on-tertiary: rgb(0 0 0);
--md-sys-color-tertiary-container: rgb(249 187 186);
--md-sys-color-on-tertiary-container: rgb(0 0 0);
--md-sys-color-error: rgb(255 249 249);
--md-sys-color-on-error: rgb(0 0 0);
--md-sys-color-error-container: rgb(255 186 177);
--md-sys-color-on-error-container: rgb(0 0 0);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(255 255 255);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(255 249 251);
--md-sys-color-outline: rgb(210 199 210);
--md-sys-color-outline-variant: rgb(210 199 210);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(0 0 0);
--md-sys-color-inverse-primary: rgb(60 27 77);
--md-sys-color-primary-fixed: rgb(248 222 255);
--md-sys-color-on-primary-fixed: rgb(0 0 0);
--md-sys-color-primary-fixed-dim: rgb(231 187 248);
--md-sys-color-on-primary-fixed-variant: rgb(39 5 56);
--md-sys-color-secondary-fixed: rgb(245 224 248);
--md-sys-color-on-secondary-fixed: rgb(0 0 0);
--md-sys-color-secondary-fixed-dim: rgb(216 196 220);
--md-sys-color-on-secondary-fixed-variant: rgb(29 18 34);
--md-sys-color-tertiary-fixed: rgb(255 224 222);
--md-sys-color-on-tertiary-fixed: rgb(0 0 0);
--md-sys-color-tertiary-fixed-dim: rgb(249 187 186);
--md-sys-color-on-tertiary-fixed-variant: rgb(44 11 13);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/dark-mc.css Normal file
View File

@ -0,0 +1,51 @@
.dark-medium-contrast {
--md-sys-color-primary: rgb(231 187 248);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(39 5 56);
--md-sys-color-primary-container: rgb(170 130 187);
--md-sys-color-on-primary-container: rgb(0 0 0);
--md-sys-color-secondary: rgb(216 196 220);
--md-sys-color-on-secondary: rgb(29 18 34);
--md-sys-color-secondary-container: rgb(156 139 161);
--md-sys-color-on-secondary-container: rgb(0 0 0);
--md-sys-color-tertiary: rgb(249 187 186);
--md-sys-color-on-tertiary: rgb(44 11 13);
--md-sys-color-tertiary-container: rgb(186 131 130);
--md-sys-color-on-tertiary-container: rgb(0 0 0);
--md-sys-color-error: rgb(255 186 177);
--md-sys-color-on-error: rgb(55 0 1);
--md-sys-color-error-container: rgb(255 84 73);
--md-sys-color-on-error-container: rgb(0 0 0);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(255 249 251);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(210 199 210);
--md-sys-color-outline: rgb(170 160 170);
--md-sys-color-outline-variant: rgb(137 128 138);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(45 40 46);
--md-sys-color-inverse-primary: rgb(93 58 109);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(33 0 50);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(74 40 90);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(24 13 29);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(63 49 68);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(37 7 8);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(83 43 43);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/dark.css Normal file
View File

@ -0,0 +1,51 @@
.dark {
--md-sys-color-primary: rgb(227 183 244);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(67 34 84);
--md-sys-color-primary-container: rgb(92 57 108);
--md-sys-color-on-primary-container: rgb(246 217 255);
--md-sys-color-secondary: rgb(212 192 216);
--md-sys-color-on-secondary: rgb(57 44 62);
--md-sys-color-secondary-container: rgb(80 66 85);
--md-sys-color-on-secondary-container: rgb(240 220 244);
--md-sys-color-tertiary: rgb(245 183 182);
--md-sys-color-on-tertiary: rgb(76 37 37);
--md-sys-color-tertiary-container: rgb(102 59 59);
--md-sys-color-on-tertiary-container: rgb(255 218 217);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(233 224 231);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(206 195 206);
--md-sys-color-outline: rgb(151 142 151);
--md-sys-color-outline-variant: rgb(76 68 77);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(52 47 52);
--md-sys-color-inverse-primary: rgb(117 80 134);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/light-hc.css Normal file
View File

@ -0,0 +1,51 @@
.light-high-contrast {
--md-sys-color-primary: rgb(52 19 69);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(87 53 104);
--md-sys-color-on-primary-container: rgb(255 255 255);
--md-sys-color-secondary: rgb(42 30 47);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(76 62 81);
--md-sys-color-on-secondary-container: rgb(255 255 255);
--md-sys-color-tertiary: rgb(59 23 24);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(98 55 55);
--md-sys-color-on-tertiary-container: rgb(255 255 255);
--md-sys-color-error: rgb(78 0 2);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(140 0 9);
--md-sys-color-on-error-container: rgb(255 255 255);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(0 0 0);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(40 34 42);
--md-sys-color-outline: rgb(72 65 73);
--md-sys-color-outline-variant: rgb(72 65 73);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(255 255 255);
--md-sys-color-inverse-primary: rgb(251 229 255);
--md-sys-color-primary-fixed: rgb(87 53 104);
--md-sys-color-on-primary-fixed: rgb(255 255 255);
--md-sys-color-primary-fixed-dim: rgb(63 30 80);
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
--md-sys-color-secondary-fixed: rgb(76 62 81);
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
--md-sys-color-secondary-fixed-dim: rgb(53 40 58);
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
--md-sys-color-tertiary-fixed: rgb(98 55 55);
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
--md-sys-color-tertiary-fixed-dim: rgb(72 33 34);
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

51
src/styles/css/light-mc.css Normal file
View File

@ -0,0 +1,51 @@
.light-medium-contrast {
--md-sys-color-primary: rgb(87 53 104);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(140 102 157);
--md-sys-color-on-primary-container: rgb(255 255 255);
--md-sys-color-secondary: rgb(76 62 81);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(127 111 132);
--md-sys-color-on-secondary-container: rgb(255 255 255);
--md-sys-color-tertiary: rgb(98 55 55);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(154 103 103);
--md-sys-color-on-tertiary-container: rgb(255 255 255);
--md-sys-color-error: rgb(140 0 9);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(218 52 46);
--md-sys-color-on-error-container: rgb(255 255 255);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(30 26 31);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(72 65 73);
--md-sys-color-outline: rgb(100 93 101);
--md-sys-color-outline-variant: rgb(129 120 129);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(248 238 246);
--md-sys-color-inverse-primary: rgb(227 183 244);
--md-sys-color-primary-fixed: rgb(140 102 157);
--md-sys-color-on-primary-fixed: rgb(255 255 255);
--md-sys-color-primary-fixed-dim: rgb(114 78 131);
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
--md-sys-color-secondary-fixed: rgb(127 111 132);
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
--md-sys-color-secondary-fixed-dim: rgb(102 87 107);
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
--md-sys-color-tertiary-fixed: rgb(154 103 103);
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
--md-sys-color-tertiary-fixed-dim: rgb(127 79 79);
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

51
src/styles/css/light.css Normal file
View File

@ -0,0 +1,51 @@
.light {
--md-sys-color-primary: rgb(117 80 134);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(246 217 255);
--md-sys-color-on-primary-container: rgb(45 11 62);
--md-sys-color-secondary: rgb(104 89 109);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(240 220 244);
--md-sys-color-on-secondary-container: rgb(35 23 40);
--md-sys-color-tertiary: rgb(129 82 81);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 218 217);
--md-sys-color-on-tertiary-container: rgb(51 17 18);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(65 0 2);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(30 26 31);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(76 68 77);
--md-sys-color-outline: rgb(125 116 126);
--md-sys-color-outline-variant: rgb(206 195 206);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(248 238 246);
--md-sys-color-inverse-primary: rgb(227 183 244);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

21
src/styles/elevation.css Normal file
View File

@ -0,0 +1,21 @@
.elevation-1 {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.elevation-2 {
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.elevation-3 {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
.elevation-4 {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
.elevation-5 {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
}
/*# sourceMappingURL=elevation.css.map */

1
src/styles/elevation.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["elevation.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"elevation.css"}

14
src/styles/elevation.sass Normal file
View File

@ -0,0 +1,14 @@
.elevation-1
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
.elevation-2
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
.elevation-3
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
.elevation-4
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
.elevation-5
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)

127
src/styles/fabs.css Normal file
View File

@ -0,0 +1,127 @@
button.m3.m3-fab {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
}
button.m3.m3-fab.m3 {
contain: content;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
border: none;
gap: 12px;
}
button.m3.m3-fab::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
background: rgba(0, 0, 0, 0);
}
button.m3.m3-fab.surface {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-surface-container-high);
}
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
color: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab.primary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-primary-container);
}
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
color: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
}
button.m3.m3-fab.secondary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-secondary-container);
}
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
color: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-fab.tertiary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
background-color: var(--md-sys-color-tertiary-container);
}
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
color: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
}
button.m3.m3-fab.m3-small-fab {
width: 40px;
height: 40px;
border-radius: 12px;
padding: 11px;
font-size: 24px;
}
button.m3.m3-fab.m3-default-fab {
width: 56px;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab.m3-large-fab {
width: 96px;
height: 96px;
border-radius: 28px;
padding: 34.5px;
font-size: 36px;
}
button.m3.m3-fab.m3-extended-fab {
width: auto;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
}
button.m3.m3-fab:hover.surface::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button.m3.m3-fab:hover.primary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
}
button.m3.m3-fab:hover.secondary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button.m3.m3-fab:hover.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
}
button.m3.m3-fab:focus-visible.surface::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab:focus-visible.primary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
}
button.m3.m3-fab:focus-visible.secondary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
}
/*# sourceMappingURL=fabs.css.map */

1
src/styles/fabs.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}

81
src/styles/fabs.sass Normal file
View File

@ -0,0 +1,81 @@
@import "mixins/m3-mixins"
button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
& > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif
&.m3
contain: content
box-sizing: border-box
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
text-align: center
border: none
gap: 12px
&::before
@include state-layer
&.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
&.primary
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
&.secondary
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
&.tertiary
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
&.m3-small-fab
@include m3-fab-default(12px, 40px, 40px, 11px)
font-size: 24px
&.m3-default-fab
@include m3-fab-default(16px, 56px, 56px, 19px)
font-size: 24px
&.m3-large-fab
@include m3-fab-default(28px, 96px, 96px, 34.5px)
font-size: 36px
&.m3-extended-fab
@include m3-fab-default(16px, auto, 56px, 19px)
font-size: 24px
&:is(.surface, .primary, .secondary, .tertiary):hover
@include elevation-4(false)
&:is(.surface, .primary, .secondary, .tertiary):active
@include elevation-3(true)
&:hover
&.surface::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.primary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
&.secondary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&.tertiary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
&:focus-visible
&.surface::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.primary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
&.secondary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.tertiary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)

2235
src/styles/font/MaterialIcons-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIcons-Regular.ttf Normal file
View File

Binary file not shown.

2195
src/styles/font/MaterialIconsOutlined-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsOutlined-Regular.otf Normal file
View File

Binary file not shown.

2200
src/styles/font/MaterialIconsRound-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsRound-Regular.otf Normal file
View File

Binary file not shown.

2200
src/styles/font/MaterialIconsSharp-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsSharp-Regular.otf Normal file
View File

Binary file not shown.

2238
src/styles/font/MaterialIconsTwoTone-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsTwoTone-Regular.otf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

28
src/styles/font/README.md Normal file
View File

@ -0,0 +1,28 @@
This is the directory for Material Icons fonts—note that the font versions of these icons have not been updated since early 2022; the newer Material Symbols fonts are more current, and can be found at [../variablefont](https://github.com/google/material-design-icons/tree/master/variablefont).
Material Icons are the non-variable classic icon fonts, while the Material Symbols variable fonts offer weight, optical size, grade and fill variations (with grade and Fill being intended also for animated effects).
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
```html
<!-- https://material.io/resources/icons/?style=baseline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=outline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=round -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=sharp -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=twotone -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
rel="stylesheet">
```

BIN
src/styles/font/Roboto-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Thin.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-ThinItalic.ttf Normal file
View File

Binary file not shown.

73
src/styles/fonts.css Normal file
View File

@ -0,0 +1,73 @@
@font-face {
font-family: Material-Icons-Regular;
src: url("./font/MaterialIcons-Regular.ttf");
}
@font-face {
font-family: Material-Icons-Outlined-Regular;
src: url("./font/MaterialIconsOutlined-Regular.otf");
}
@font-face {
font-family: Material-Icons-Round-Regular;
src: url("./font/MaterialIconsRound-Regular.otf");
}
@font-face {
font-family: Material-Icons-Sharp-Regular;
src: url("./font/MaterialIconsSharp-Regular.otf");
}
@font-face {
font-family: Material-Icons-Two-Tone-Regular;
src: url("./font/MaterialIconsTwoTone-Regular.otf");
}
@font-face {
font-family: Material-Symbols-Outlined-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face {
font-family: Material-Symbols-Round-Regular;
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face {
font-family: Material-Symbols-Sharp-Regular;
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face {
font-family: Roboto;
font-face-name: Thin;
font-weight: 100;
src: url("./font/Roboto-Thin.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Light;
font-weight: 300;
src: url("./font/Roboto-Light.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Regular;
font-weight: 400;
src: url("./font/Roboto-Regular.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Medium;
font-weight: 500;
src: url("./font/Roboto-Medium.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Bold;
font-weight: 700;
src: url("./font/Roboto-Bold.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Black;
font-weight: 900;
src: url("./font/Roboto-Black.ttf");
}
/*# sourceMappingURL=fonts.css.map */

1
src/styles/fonts.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAAA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA","file":"fonts.css"}

70
src/styles/fonts.sass Normal file
View File

@ -0,0 +1,70 @@
@font-face
font-family: Material-Icons-Regular
src: url("./font/MaterialIcons-Regular.ttf")
@font-face
font-family: Material-Icons-Outlined-Regular
src: url("./font/MaterialIconsOutlined-Regular.otf")
@font-face
font-family: Material-Icons-Round-Regular
src: url("./font/MaterialIconsRound-Regular.otf")
@font-face
font-family: Material-Icons-Sharp-Regular
src: url("./font/MaterialIconsSharp-Regular.otf")
@font-face
font-family: Material-Icons-Two-Tone-Regular
src: url("./font/MaterialIconsTwoTone-Regular.otf")
@font-face
font-family: Material-Symbols-Outlined-Regular
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Material-Symbols-Round-Regular
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Material-Symbols-Sharp-Regular
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2")
@font-face
font-family: Roboto
font-face-name: Thin
font-weight: 100
src: url("./font/Roboto-Thin.ttf")
@font-face
font-family: Roboto
font-face-name: Light
font-weight: 300
src: url("./font/Roboto-Light.ttf")
@font-face
font-family: Roboto
font-face-name: Regular
font-weight: 400
src: url("./font/Roboto-Regular.ttf")
@font-face
font-family: Roboto
font-face-name: Medium
font-weight: 500
src: url("./font/Roboto-Medium.ttf")
@font-face
font-family: Roboto
font-face-name: Bold
font-weight: 700
src: url("./font/Roboto-Bold.ttf")
@font-face
font-family: Roboto
font-face-name: Black
font-weight: 900
src: url("./font/Roboto-Black.ttf")

1669
src/styles/generics.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/styles/generics.css.map Normal file
View File

File diff suppressed because one or more lines are too long

29
src/styles/generics.sass Normal file
View File

@ -0,0 +1,29 @@
@import "fabs"
@import "radio"
@import "fonts"
@import "button"
@import "ripple"
@import "swtich"
@import "checkbox"
@import "text-field"
@import "icon-button"
@import "./themes/tokens"
@import "./themes/colors.module"
@import "./themes/typography.module"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)
html
font-family: Roboto, serif
color: var(--md-sys-color-on-surface)
.m3
user-select: none
.m3.m3-wrapper
background-color: var(--md-sys-color-surface)
border-radius: 25px
padding: 25px
width: max-content
height: min-content

151
src/styles/icon-button.css Normal file
View File

@ -0,0 +1,151 @@
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;
width: 40px;
height: 40px;
border: none;
padding: 0;
}
button.m3.m3-icon-button::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
button.m3.m3-icon-button > span.m3-icon {
z-index: 25;
font-size: 2em;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
font-family: Material-Symbols-Round-Regular, serif;
}
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
font-size: 13.49px;
font-family: Material-Icons-Regular, serif;
font-weight: 500;
}
button.m3.m3-icon-button.default {
color: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default.selected.toggled {
color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled {
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled.toggled {
color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.filled.selected.toggled {
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.tonal.toggled {
color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
}
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline);
color: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
@media (prefers-color-scheme: light) {
button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface-light);
color: var(--md-sys-color-inverse-on-surface);
}
}
@media (prefers-color-scheme: dark) {
button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
}
}
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):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);
}
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
/*# sourceMappingURL=icon-button.css.map */

1
src/styles/icon-button.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}

Some files were not shown because too many files have changed in this diff Show More