@cfx-dev/ui-components 1.0.1 → 1.1.0

package/dist/styles-scss/assets/images/checkered_light.svg

@@ -1,7 +1,7 @@
-<svg width="2" height="2" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="1" width="1" height="1" style="fill: #ffffff" />
-  <rect x="1" y="0" width="1" height="1" style="fill: #ffffff" />
-  <rect x="0" y="0" width="1" height="1" style="fill: #ffffff" />
-
-  <rect x="1" y="1" width="1" height="1" style="fill: rgba(255, 255, 255, .05)" />
-</svg>
+<svg width="2" height="2" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="1" width="1" height="1" style="fill: #ffffff" />
+  <rect x="1" y="0" width="1" height="1" style="fill: #ffffff" />
+  <rect x="0" y="0" width="1" height="1" style="fill: #ffffff" />
+
+  <rect x="1" y="1" width="1" height="1" style="fill: rgba(255, 255, 255, .05)" />
+</svg>

package/dist/styles-scss/global.scss

@@ -1,75 +1,73 @@
-@import "tokens";
-@import "~@fontsource/montserrat/variable.css";
-@import "~@fontsource/montserrat/variable-italic.css";
-@import "~@fontsource/rubik/variable.css";
-@import "~@fontsource/rubik/variable-italic.css";
-
-body {
-  @include color-tokens;
-
-  @include ui.def('control-height-xxsmall', ui.q(1.5));
-  @include ui.def('control-height-xsmall', ui.q(3));
-  @include ui.def('control-height-small', ui.q(4));
-  @include ui.def('control-height-normal', ui.q(6));
-  @include ui.def('control-height-large', ui.q(7));
-
-  @include ui.def('offset-none', 0px);
-  @include ui.def('offset-hairthin', 1px);
-  @include ui.def('offset-thin', 2px);
-  @include ui.def('offset-xsmall', ui.q(.5));
-  @include ui.def('offset-small', ui.q(1));
-  @include ui.def('offset-normal', ui.q(2));
-  @include ui.def('offset-large', ui.q(4));
-  @include ui.def('offset-xlarge', ui.q(6));
-
-  @include ui.def('offset-safezone', ui.q(8));
-
-	@include ui.def('font-size-xsmall', 0.7rem);
-	@include ui.def('font-size-small', 0.8rem);
-	@include ui.def('font-size-normal', 1rem);
-	@include ui.def('font-size-large', 1.25rem);
-	@include ui.def('font-size-xlarge', 1.5rem);
-	@include ui.def('font-size-xxlarge', 1.75rem);
-	@include ui.def('font-size-xxxlarge', 2rem);
-
-  @include ui.def('font-weight-thin', 100);
-  @include ui.def('font-weight-normal', 300);
-  @include ui.def('font-weight-bold', 400);
-  @include ui.def('font-weight-bolder', 600);
-  @include ui.def('font-weight-boldest', 900);
-
-  @include ui.def('font-family-primary', 'RubikVariable');
-  @include ui.def('font-family-secondary', 'MontserratVariable');
-  @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
-
-  @include ui.def('border-radius-none', 0);
-  @include ui.def('border-radius-xxsmall', ui.q(.25));
-  @include ui.def('border-radius-xsmall', ui.q(.5));
-  @include ui.def('border-radius-small', ui.q(.75));
-  @include ui.def('border-radius-normal', ui.q(1.5));
-
-  @include ui.font-color('text');
-  @include ui.font-family('primary');
-  @include ui.font-weight('normal');
-}
-
-// Utilities
-.util-full-height {
-  height: 100%;
-}
-.util-full-width {
-  width: 100%;
-}
-.util-z-index-9000 {
-  z-index: 9000;
-}
-.util-text-selectable,
-.util-text-selectable * {
-  user-select: text !important;
-}
-.util-flex-grow {
-  flex-grow: 1;
-}
-.util-flex-no-shrink {
-  flex-shrink: 0;
-}
+@import "tokens";
+@import "~@fontsource/rubik/variable.css";
+@import "~@fontsource/rubik/variable-italic.css";
+
+body {
+  @include color-tokens;
+
+  @include ui.def('control-height-xxsmall', ui.q(1.5));
+  @include ui.def('control-height-xsmall', ui.q(3));
+  @include ui.def('control-height-small', ui.q(4));
+  @include ui.def('control-height-normal', ui.q(6));
+  @include ui.def('control-height-large', ui.q(7));
+
+  @include ui.def('offset-none', 0px);
+  @include ui.def('offset-hairthin', 1px);
+  @include ui.def('offset-thin', 2px);
+  @include ui.def('offset-xsmall', ui.q(.5));
+  @include ui.def('offset-small', ui.q(1));
+  @include ui.def('offset-normal', ui.q(2));
+  @include ui.def('offset-medium', ui.q(3));
+  @include ui.def('offset-large', ui.q(4));
+  @include ui.def('offset-xlarge', ui.q(6));
+
+  @include ui.def('offset-safezone', ui.q(8));
+
+	@include ui.def('font-size-xsmall', 0.7rem);
+	@include ui.def('font-size-small', 0.8rem);
+	@include ui.def('font-size-normal', 1rem);
+	@include ui.def('font-size-large', 1.25rem);
+	@include ui.def('font-size-xlarge', 1.5rem);
+	@include ui.def('font-size-xxlarge', 1.75rem);
+	@include ui.def('font-size-xxxlarge', 2rem);
+
+  @include ui.def('font-weight-thin', 100);
+  @include ui.def('font-weight-normal', 300);
+  @include ui.def('font-weight-bold', 400);
+  @include ui.def('font-weight-bolder', 600);
+  @include ui.def('font-weight-boldest', 900);
+
+  @include ui.def('font-family-primary', 'RubikVariable');
+  @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
+
+  @include ui.def('border-radius-none', 0);
+  @include ui.def('border-radius-xxsmall', ui.q(.25));
+  @include ui.def('border-radius-xsmall', ui.q(.5));
+  @include ui.def('border-radius-small', ui.q(.75));
+  @include ui.def('border-radius-normal', ui.q(1.5));
+
+  @include ui.font-color('text');
+  @include ui.font-family('primary');
+  @include ui.font-weight('normal');
+}
+
+// Utilities
+.util-full-height {
+  height: 100%;
+}
+.util-full-width {
+  width: 100%;
+}
+.util-z-index-9000 {
+  z-index: 9000;
+}
+.util-text-selectable,
+.util-text-selectable * {
+  user-select: text !important;
+}
+.util-flex-grow {
+  flex-grow: 1;
+}
+.util-flex-no-shrink {
+  flex-shrink: 0;
+}

package/dist/styles-scss/theme_dark.scss

@@ -1,24 +1,24 @@
-@use "ui";
-
-$fg: #fffff0;
-$bg: #161923;
-
-.cfxui-theme-dark {
-  @include ui.define-main-colors($bg, $fg, (
-    'primary': darken(#f50551, 10%)
-  ));
-
-  .color-1 { color: lighten(#F44336, 30%);	}
-	.color-2 { color: lighten(#4CAF50, 30%);	}
-	.color-3 { color: lighten(#FFEB3B, 30%);	}
-	.color-4 { color: lighten(#42A5F5, 30%);	}
-	.color-5 { color: lighten(#03A9F4, 30%);	}
-	.color-6 { color: lighten(#9C27B0, 30%);	}
-	.color-8 { color: lighten(#FF5722, 30%);	}
-	.color-9 { color: lighten(#9E9E9E, 30%);	}
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}
+@use "ui";
+
+$fg: #fffff0;
+$bg: #161923;
+
+.cfxui-theme-dark {
+  @include ui.define-main-colors($bg, $fg, (
+    'primary': darken(#f50551, 10%)
+  ));
+
+  .color-1 { color: lighten(#F44336, 30%);	}
+	.color-2 { color: lighten(#4CAF50, 30%);	}
+	.color-3 { color: lighten(#FFEB3B, 30%);	}
+	.color-4 { color: lighten(#42A5F5, 30%);	}
+	.color-5 { color: lighten(#03A9F4, 30%);	}
+	.color-6 { color: lighten(#9C27B0, 30%);	}
+	.color-8 { color: lighten(#FF5722, 30%);	}
+	.color-9 { color: lighten(#9E9E9E, 30%);	}
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

package/dist/styles-scss/theme_light.scss

@@ -1,54 +1,54 @@
-@use "ui";
-
-$fg: #161923;
-$bg: #ffffff;
-
-.cfxui-theme-light {
-  @include ui.define-main-colors($bg, $fg);
-
-  // Asset overrides
-  @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
-
-  // Color overrides
-  @include ui.def               ('text-opacity-10',                .20);
-  @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
-  @include ui.def               ('text-opacity-25',                .35);
-  @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
-  @include ui.def               ('text-opacity-50',                .60);
-  @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
-  @include ui.def               ('text-opacity-75',                .85);
-  @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
-
-  @include ui.define-color-token('text-warning', ui.color('warning', 700));
-
-  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
-  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
-
-  @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
-  @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
-
-  @include ui.define-color-token('button-primary-text', ui.color('main'));
-  @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
-  @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
-
-  @include ui.define-color-token('premium-badge-text', ui.color('main'));
-  @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
-
-  @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
-  @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
-
-
-  .color-1 { color: darken(#F44336, 30%);	}
-	.color-2 { color: darken(#4CAF50, 30%);	}
-	.color-3 { color: darken(#FFEB3B, 30%);	}
-	.color-4 { color: darken(#42A5F5, 30%);	}
-	.color-5 { color: darken(#03A9F4, 30%);	}
-	.color-6 { color: darken(#9C27B0, 30%);	}
-	.color-8 { color: darken(#FF5722, 30%);	}
-	.color-9 { color: darken(#9E9E9E, 30%);	}
-
-  // Too thin otherwise
-  --font-weight-normal: 400;
-  --font-weight-bold: 500;
-  --font-weight-bolder: 600;
-}
+@use "ui";
+
+$fg: #161923;
+$bg: #ffffff;
+
+.cfxui-theme-light {
+  @include ui.define-main-colors($bg, $fg);
+
+  // Asset overrides
+  @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
+
+  // Color overrides
+  @include ui.def               ('text-opacity-10',                .20);
+  @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
+  @include ui.def               ('text-opacity-25',                .35);
+  @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
+  @include ui.def               ('text-opacity-50',                .60);
+  @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
+  @include ui.def               ('text-opacity-75',                .85);
+  @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
+
+  @include ui.define-color-token('text-warning', ui.color('warning', 700));
+
+  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
+  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
+
+  @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
+  @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
+
+  @include ui.define-color-token('button-primary-text', ui.color('main'));
+  @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
+  @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
+
+  @include ui.define-color-token('premium-badge-text', ui.color('main'));
+  @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
+
+  @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
+  @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
+
+
+  .color-1 { color: darken(#F44336, 30%);	}
+	.color-2 { color: darken(#4CAF50, 30%);	}
+	.color-3 { color: darken(#FFEB3B, 30%);	}
+	.color-4 { color: darken(#42A5F5, 30%);	}
+	.color-5 { color: darken(#03A9F4, 30%);	}
+	.color-6 { color: darken(#9C27B0, 30%);	}
+	.color-8 { color: darken(#FF5722, 30%);	}
+	.color-9 { color: darken(#9E9E9E, 30%);	}
+
+  // Too thin otherwise
+  --font-weight-normal: 400;
+  --font-weight-bold: 500;
+  --font-weight-bolder: 600;
+}

package/dist/styles-scss/themes.scss

@@ -1,2 +1,2 @@
-@import "theme_dark.scss";
-@import "theme_light.scss";
+@import "theme_dark.scss";
+@import "theme_light.scss";