kemet-ui 1.4.0 → 2.0.1

package/dist/styles/core/attributes.scss

@@ -1,5 +1,5 @@
-@use 'config' as *;
-@use 'helpers' as *;
+@use '../shared/config' as *;
+@use '../shared/helpers' as *;
 
 @include makeBreakpoints();
 @include makeGutters();

package/dist/styles/core/layout.scss

@@ -1,5 +1,5 @@
-@use 'config' as *;
-@use 'helpers' as *;
+@use '../shared/config' as *;
+@use '../shared/helpers' as *;
 
 %flexitem {
   flex: 1;

package/dist/styles/kemet.base.css

@@ -0,0 +1,107 @@
+*,
+*::after,
+*::before {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+:root {
+  --kemet-color-white: rgb(255, 255, 255);
+  --kemet-color-white-10: rgba(255, 255, 255, 0.1);
+  --kemet-color-white-20: rgba(255, 255, 255, 0.2);
+  --kemet-color-white-30: rgba(255, 255, 255, 0.3);
+  --kemet-color-white-40: rgba(255, 255, 255, 0.4);
+  --kemet-color-white-50: rgba(255, 255, 255, 0.5);
+  --kemet-color-white-60: rgba(255, 255, 255, 0.6);
+  --kemet-color-white-70: rgba(255, 255, 255, 0.7);
+  --kemet-color-white-80: rgba(255, 255, 255, 0.8);
+  --kemet-color-white-90: rgba(255, 255, 255, 0.9);
+  --kemet-color-white-rich: rgb(242, 242, 242);
+  --kemet-color-black: rgb(0, 0, 0);
+  --kemet-color-black-10: rgba(0, 0, 0, 0.1);
+  --kemet-color-black-20: rgba(0, 0, 0, 0.2);
+  --kemet-color-black-30: rgba(0, 0, 0, 0.3);
+  --kemet-color-black-40: rgba(0, 0, 0, 0.4);
+  --kemet-color-black-50: rgba(0, 0, 0, 0.5);
+  --kemet-color-black-60: rgba(0, 0, 0, 0.6);
+  --kemet-color-black-70: rgba(0, 0, 0, 0.7);
+  --kemet-color-black-80: rgba(0, 0, 0, 0.8);
+  --kemet-color-black-90: rgba(0, 0, 0, 0.9);
+  --kemet-color-gray1: #eff2f1;
+  --kemet-color-gray2: #d7d7d7;
+  --kemet-color-gray3: #bebebe;
+  --kemet-color-gray4: #a4a4a4;
+  --kemet-color-gray5: #8b8b8b;
+  --kemet-color-gray6: #727270;
+  --kemet-color-gray7: #585858;
+  --kemet-color-gray8: #3f3f3f;
+  --kemet-color-gray9: #262626;
+  --kemet-color-gray10: #0c0c0c;
+  --kemet-color-primary: rgb(12, 74, 110);
+  --kemet-color-primary-10: rgba(12, 74, 110, 0.1);
+  --kemet-color-primary-20: rgba(12, 74, 110, 0.2);
+  --kemet-color-primary-30: rgba(12, 74, 110, 0.3);
+  --kemet-color-primary-40: rgba(12, 74, 110, 0.4);
+  --kemet-color-primary-50: rgba(12, 74, 110, 0.5);
+  --kemet-color-primary-60: rgba(12, 74, 110, 0.6);
+  --kemet-color-primary-70: rgba(12, 74, 110, 0.7);
+  --kemet-color-primary-80: rgba(12, 74, 110, 0.8);
+  --kemet-color-primary-90: rgba(12, 74, 110, 0.9);
+  --kemet-color-error: rgb(197, 48, 48);
+  --kemet-color-success: rgb(22, 163, 74);
+  --kemet-color-neutral: rgb(82, 82, 91);
+  --kemet-color-warning: rgb(217, 119, 6);
+  --kemet-color-text: var(--kemet-color-gray9);
+  --kemet-color-foreground: var(--kemet-color-white);
+  --kemet-color-background: var(--kemet-color-primary);
+  --kemet-color-white-to-black: var(--kemet-color-white);
+  --kemet-color-white-to-primary: var(--kemet-color-white);
+  --kemet-color-gray1-to-transparent: var(--kemet-color-gray1);
+  --kemet-color-primary-to-transparent: var(--kemet-color-primary);
+  --kemet-border-radius-small: 3px;
+  --kemet-border-radius-medium: 6px;
+  --kemet-border-radius-large: 12px;
+  --kemet-elevation-none: 0 0 rgba(0, 0, 0, 0);
+  --kemet-elevation-layer1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --kemet-elevation-layer2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --kemet-elevation-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --kemet-spacer-none: 0;
+  --kemet-spacer-auto: auto;
+  --kemet-spacer-small: 1.5rem;
+  --kemet-spacer-smaller: 1rem;
+  --kemet-spacer-smallest: 0.5rem;
+  --kemet-spacer-normal: 2rem;
+  --kemet-spacer-large: 2.5rem;
+  --kemet-spacer-larger: 3rem;
+  --kemet-spacer-largest: 3.5rem;
+  --kemet-upload-margin: 1rem;
+}
+
+html {
+  color: var(--kemet-color-text);
+}
+
+[theme=dark] {
+  --kemet-color-text: var(--kemet-color-white);
+  --kemet-color-foreground: var(--kemet-color-primary);
+  --kemet-color-background: var(--kemet-color-white);
+  --kemet-color-white-to-black: var(--kemet-color-black);
+  --kemet-color-white-to-primary: var(--kemet-color-primary);
+  --kemet-color-gray1-to-transparent: transparent;
+  --kemet-color-primary-to-transparent: transparent;
+  --kemet-upload-margin: 0;
+  --kemet-elevation-none: none;
+  --kemet-elevation-layer1: none;
+  --kemet-elevation-layer2: none;
+  --kemet-elevation-layer3: none;
+  --kemet-elevation-layer4: none;
+  --kemet-elevation-layer5: none;
+  --kemet-elevation-layer6: none;
+  --kemet-elevation-inner: none;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMva2VtZXQuYmFzZS5zY3NzIiwia2VtZXQuYmFzZS5jc3MiLCIuLi8uLi9zcmMvc3R5bGVzL3NoYXJlZC9faGVscGVycy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBOzs7RUFHRSw4QkFBQTtVQUFBLHNCQUFBO0FDREY7O0FDd2FFO0VBR0ksdUNBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSw0Q0FBQTtFQUFBLGlDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNkJBQUE7RUFBQSx1Q0FBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLHFDQUFBO0VBQUEsdUNBQUE7RUFBQSxzQ0FBQTtFQUFBLHVDQUFBO0VBQUEsNENBQUE7RUFBQSxrREFBQTtFQUFBLG9EQUFBO0VBR0Ysc0RBQUE7RUFDQSx3REFBQTtFQUNBLDREQUFBO0VBQ0EsZ0VBQUE7RUFJRSxnQ0FBQTtFQUFBLGlDQUFBO0VBQUEsaUNBQUE7RUFLQSw0Q0FBQTtFQUFBLHlEQUFBO0VBQUEsMkZBQUE7RUFBQSw4RkFBQTtFQUFBLGdHQUFBO0VBQUEsaUdBQUE7RUFBQSwrREFBQTtFQUFBLDhEQUFBO0VBS0Esc0JBQUE7RUFBQSx5QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSwrQkFBQTtFQUFBLDJCQUFBO0VBQUEsNEJBQUE7RUFBQSwyQkFBQTtFQUFBLDhCQUFBO0VBSUYsMkJBQUE7QUR2WEo7O0FEdEVBO0VBQ0UsOEJBQUE7QUN5RUY7O0FEdEVBO0VBRUUsNENBQUE7RUFDQSxvREFBQTtFQUNBLGtEQUFBO0VBQ0Esc0RBQUE7RUFDQSwwREFBQTtFQUNBLCtDQUFBO0VBQ0EsaURBQUE7RUFFQSx3QkFBQTtFRWlVRSw0QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDZCQUFBO0FEbFBKIiwiZmlsZSI6ImtlbWV0LmJhc2UuY3NzIn0= */

package/dist/styles/kemet.base.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styles/kemet.base.scss","../../src/styles/shared/_helpers.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;EAGE;;;ACuaA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGF;EACA;EACA;EACA;EAIE;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIF;;;AD7bJ;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;ECiUE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"kemet.base.css"}

package/dist/styles/kemet.base.scss

@@ -0,0 +1,28 @@
+@use './shared/helpers' as *;
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+@include makeRoot;
+
+html {
+  color: var(--kemet-color-text);
+}
+
+[theme='dark'] {
+  // colors
+  --kemet-color-text: var(--kemet-color-white);
+  --kemet-color-foreground: var(--kemet-color-primary);
+  --kemet-color-background: var(--kemet-color-white);
+  --kemet-color-white-to-black: var(--kemet-color-black);
+  --kemet-color-white-to-primary: var(--kemet-color-primary);
+  --kemet-color-gray1-to-transparent: transparent;
+  --kemet-color-primary-to-transparent: transparent;
+  // component specific
+  --kemet-upload-margin: 0;
+
+  @include makeElevationDark;
+}