[merge] pull request #44 from akrck02/feature/material

Feature/material
akrck02 · Feb 22, 2024 · 7511f5e · 7511f5e
2 parents d732f36 + 3fed3af
commit 7511f5e
Show file tree

Hide file tree

Showing 32 changed files with 756 additions and 493 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,3 @@
 /out/
 /node_modules/
-/test/
-/dist/
-*.html
+/dist/
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
 > We know layouts in CSS framework are insanely opinionated,<br>
 > so we give you freedom to choose layouts with box based system. 
 
-## Modular framework, how does this works?
+## Modular framework, how does this work?
 > Bubble was build to be scalable and our first choise <br>
 > was to make it modular to easy develop new components  <br>
 > and ony import that ones u need. <br>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bubble_ui",
   "version": "2.0.1",
-  "description": "<img src='./Bubble_banner.png' style='width:80%;max-width:400px;'/>",
+  "description": "The modern UI engine",
   "main": "index.js",
   "directories": {
     "test": "test"

diff --git a/src/css/core/boxes.css b/src/css/core/boxes.css
@@ -44,7 +44,7 @@
     align-items: flex-end;
 }   
 
-.box-warp{
+.box-wrap{
     display: flex;
     flex-wrap: wrap;
 }

diff --git a/src/css/core/colors.css b/src/css/core/colors.css
@@ -1,50 +1,80 @@
-
-.text-accent {
-    color: var(--accent-color);
-}
-.text-success {
-    color: var(--success-color);
-}
-.text-error {
-    color: var(--error-color);
+.primary {
+    background: var(--primary-color);
+    color: var(--on-primary-color);
 }
-.text-info {
-    color: var(--info-color);
+
+.primary-container {
+    border-radius: 1rem;
+    background: var(--primary-container-color);
+    color: var(--on-primary-container-color);
 }
-.text-warning {
-    color: var(--warning-color);
+
+.secondary {
+    background: var(--secondary-color);
+    color: var(--on-secondary-color);
 }
-.text-disabled {
-    color: var(--disabled-color);
+
+.secondary-container {
+    border-radius: 1rem;
+    background: var(--secondary-container-color);
+    color: var(--on-secondary-container-color);
 }
-.text-light {
-    color: var(--light-color);
+
+.tertiary {
+    background: var(--tertiary-color);
+    color: var(--on-tertiary-color);
 }
-.text-dark {
-    color: var(--dark-color);
+
+.tertiary-container {
+    border-radius: 1rem;
+    background: var(--tertiary-container-color);
+    color: var(--on-tertiary-container-color);
 }
 
-.background-accent {
-    background: var(--accent-color);
+.error {
+    background: var(--error-color);
+    color: var(--on-error-color);
 }
-.background-success {
-    background: var(--success-color);
+
+.error-container {
+    border-radius: 1rem;
+    background: var(--error-container-color);
+    color: var(--on-error-container-color);
 }
-.background-error {
-    background: var(--error-color);
+
+.surface-1 {
+    background: var(--surface-1);
+    color: var(--on-surface-1);
+    border-radius: 1rem;
 }
-.background-info {
-    background: var(--info-color);
+
+.surface-2 {
+    background: var(--surface-2);
+    color: var(--on-surface-3);
+    border-radius: 1rem;
 }
-.background-warning {
-    background: var(--warning-color);
+
+.surface-3 {
+    background: var(--surface-3);
+    color: var(--on-surface-3);
+    border-radius: 1rem;
 }
-.background-disabled {
-    background: var(--disabled-color);
+
+.surface-4 {
+    background: var(--surface-4);
+    color: var(--on-surface-4);
+    border-radius: 1rem;
 }
-.background-light {
-    background: var(--light-color);
+
+.surface-5 {
+    background: var(--surface-5);
+    color: var(--on-surface-5);
+    border-radius: 1rem;
 }
-.backgorund-dark {
-    background: var(--dark-color);
+
+.surface-6 {
+    background: var(--surface-6);
+    color: var(--on-surface-6);
+    border-radius: 1rem;
 }
+
diff --git a/src/css/core/fonts.css b/src/css/core/fonts.css
@@ -1,2 +1,2 @@
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu+Mono&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); */
diff --git a/src/css/core/reset.css b/src/css/core/reset.css
@@ -21,6 +21,7 @@ time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
+	border: none;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
@@ -64,4 +65,8 @@ table {
 *[disabled]{
     transition: none;
     animation:  none;
+}
+
+button, input, select, textarea {
+	border: none;
 }
diff --git a/src/css/core/variables.css b/src/css/core/variables.css
@@ -2,85 +2,138 @@
     General variables of the framework
 */
 :root {
-
-    --font:                 'Roboto light', sans-serif;
-    --font-light:           'Roboto thin', sans-serif;
-    --font-title:           'Roboto', sans-serif;
+    
+    --font:                 'Open Sans', sans-serif;
+    --font-light:           'Open Sans light', sans-serif;
+    --font-title:           'Open Sans', sans-serif;
     --font-console:         'Ubuntu Mono', monospace;
 
-    --RGB-background:               250, 250, 250;
-    --RGB-background-alternative:   247, 247, 247;
-    --RGB-menu:                     255, 255, 255;
-    --RGB-contrast:                 241, 241, 241;
-
-    --RGB-accent-color:     30, 144, 255;
-    --RGB-text-color:       64, 64, 64;
-    --RGB-error-color:      235, 87, 87;
-    --RGB-success-color:    0, 200, 81;
-    --RGB-warning-color:    255, 187, 51;
-    --RGB-info-color:       91, 192, 222;
-    --RGB-disabled-color:   170, 170, 170;
-    --RGB-light-color:      250, 250, 250;
-    --RGB-dark-color:       16, 16, 16;
-
-    --background:               rgb(var(--RGB-background));
-    --background-alternative:   rgb(var(--RGB-background-alternative));
-    --menu:                     rgb(var(--RGB-menu));
-    --contrast:                 rgb(var(--RGB-contrast));
-    --accent-color:             rgb(var(--RGB-accent-color));
-    --text-color:               rgb(var(--RGB-text-color));
-    --error-color:              rgb(var(--RGB-error-color));
-    --success-color:            rgb(var(--RGB-success-color));
-    --warning-color:            rgb(var(--RGB-warning-color));
-    --info-color:               rgb(var(--RGB-info-color));
-    --disabled-color:           rgb(var(--RGB-disabled-color));
-    --dark-color:               rgb(var(--RGB-dark-color));
-    --light-color:              rgb(var(--RGB-light-color));
-
-    --default-box-shadow:       0px 2px 4px rgba(0, 0, 0, .15);
-    --default-border-radius:    .35rem;
-    --default_padding:          10px;
-    --default-margin:           10px;
-    --default-outline:          .5px solid lightgray;
-
-    --fast:         .25s;
-    --medium:       .5s;
-    --slow:         .75s;
-    --super-slow:   1s;
+    --animation-fast:         .25s;
+    --animation-medium:       .5s;
+    --animation-slow:         .75s;
+    --animation-super-slow:   1s;
+
+    --surface-1: #d9d9d9;
+    --on-surface-1: #000000;
+
+    --surface-2: #cccccc;
+    --on-surface-2: #000000;
+
+    --surface-3: #bfbfbf;
+    --on-surface-3: #000000;
+
+    --surface-4: #b3b3b3;
+    --on-surface-4: #000000;
+
+    --surface-5: #a6a6a6;
+    --on-surface-5: #000000;
+
+    --surface-6: #999999;
+    --on-surface-6: #000000;
+
+    --background: #e6e6e6;
+    --on-background: #000000;
+
+
+    --primary-color:                #4A5C92;
+    --on-primary-color:             #FFFFFF;
+    --primary-container-color:      #DBE1FF;
+    --on-primary-container-color:   #00174B;
+
+    --secondary-color:              #585E72;
+    --on-secondary-color:           #FFFFFF;
+    --secondary-container-color:    #EEEDF4;
+    --on-secondary-container-color: #161B2C;
+
+    --tertiary-color:               #745471;
+    --on-tertiary-color:            #FFFFFF;
+    --tertiary-container-color:     #E3E2E9;
+    --on-tertiary-container-color:  #2B122B;
+
+    --error-color:                  #BA1A1A;
+    --on-error-color:               #FFFFFF;
+    --error-container-color:        #FFDAD6;
+    --on-error-container-color:     #410002;
 
     margin:     0;
     padding:    0;
     overflow-x: hidden;
     -webkit-tap-highlight-color: transparent;
 }
 
-/*
-    Dark Theme override
-*/
-@media(prefers-color-scheme: dark) {
-    :root {
-        --RGB-background:               32, 32, 32;
-        --RGB-background-alternative:   21, 21, 21;
-        --RGB-menu:                     36, 36, 36;
-        --RGB-contrast:                 48, 48, 48;
-        --RGB-text-color:               234, 234, 234;
-        --RGB-disabled-color:           16, 16, 16;
-
-        --default-box-shadow:       0px 2px 4px rgba(0, 0, 0, .15);
-        --default-outline:          .5px solid #161616;
-    }
+:root[data-theme=light-you]{
+
+    --surface-1: #bcd6f5;
+    --on-surface-1: #000000;
+
+    --surface-2: #a6c8f2;
+    --on-surface-2: #000000;
+
+    --surface-3: #90baef;
+    --on-surface-3: #000000;
+
+    --surface-4: #79adec;
+    --on-surface-4: #000000;
+
+    --surface-5: #639fe8;
+    --on-surface-5: #000000;
+
+    --surface-6: #4d91e5;
+    --on-surface-6: #000000;
+
+    --background: #d2e4f9;
+    --on-background: #000000
+
 }
 
-:root[data-theme="dark"] {
-    --RGB-background:               32, 32, 32;
-    --RGB-background-alternative:   21, 21, 21;
-    --RGB-menu:                     36, 36, 36;
-    --RGB-contrast:                 48, 48, 48;
-    --RGB-text-color:               234, 234, 234;
-    --RGB-disabled-color:           16, 16, 16;
+:root[data-theme=dark-you]{
+
+    --surface-1: #0a2343;
+    --on-surface-1: #ffffff;
+
+    --surface-2: #0d2f59;
+    --on-surface-2: #ffffff;
+
+    --surface-3: #103b6f;
+    --on-surface-3: #ffffff;
+
+    --surface-4: #134786;
+    --on-surface-4: #ffffff;
+
+    --surface-5: #17529c;
+    --on-surface-5: #ffffff;
+
+    --surface-6: #1a5eb2;
+    --on-surface-6: #ffffff;
+
+    --background: #06182d;
+    --on-background: #ffffff;
 
-    --default-box-shadow:       0px 2px 4px rgba(0, 0, 0, .15);
-    --default-outline:          .5px solid #161616;
+}
+
+:root[data-theme=dark] {
+
+    --surface-1: #262626;
+    --on-surface-1: #ffffff;
+
+    --surface-2: #333333;
+    --on-surface-2: #ffffff;
+
+    --surface-3: #404040;
+    --on-surface-3: #ffffff;
+
+    --surface-4: #4d4d4d;
+    --on-surface-4: #ffffff;
+
+    --surface-5: #595959;
+    --on-surface-5: #ffffff;
+
+    --surface-6: #666666;
+    --on-surface-6: #ffffff;
+
+    --background: #1a1a1a;
+    --on-background: #ffffff
+
 }
 
 /*