q2-tecton-theme 1.15.0 → 1.15.1-alpha.0

package/dist/q2-tecton-utilities.js

@@ -0,0 +1 @@
+console.warn('This file is only meant for compilation do not use it directly');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "q2-tecton-theme",
-  "version": "1.15.0",
+  "version": "1.15.1-alpha.0",
   "description": "Default theme for tecton",
   "main": "./dist/q2-tecton-theme.css",
   "publishConfig": {
@@ -21,5 +21,5 @@
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-serve": "^1.1.0"
   },
-  "gitHead": "32b2a6a10eb9712a98cf3ecaf782c48fb6886d87"
+  "gitHead": "613b706d36edc433c14ab43cdcb962e20e6814d0"
 }

package/rollup.config.js

@@ -1,21 +1,38 @@
-import scss from "rollup-plugin-scss";
-import serve from "rollup-plugin-serve";
+import scss from 'rollup-plugin-scss';
+import serve from 'rollup-plugin-serve';
 
 const isWatching = process.env.ROLLUP_WATCH;
-export default {
-    input: "src/index.js",
-    output: {
-        dir: "dist"
+export default [
+    {
+        input: 'src/q2-tecton-theme.js',
+        output: {
+            file: './dist/q2-tecton-theme.js',
+        },
+        plugins: [
+            scss({
+                outputStyle: 'compressed',
+            }),
+            isWatching &&
+                serve({
+                    port: 2020,
+                    contentBase: 'dist',
+                }),
+        ],
     },
-    plugins: [
-        scss({
-            output: "dist/q2-tecton-theme.css",
-            outputStyle: "compressed"
-        }),
-        isWatching &&
-            serve({
-                port: 2020,
-                contentBase: "dist"
-            })
-    ]
-};
+    {
+        input: 'src/q2-tecton-utilities.js',
+        output: {
+            file: './dist/q2-tecton-utilities.js',
+        },
+        plugins: [
+            scss({
+                outputStyle: 'compressed',
+            }),
+            isWatching &&
+                serve({
+                    port: 2020,
+                    contentBase: 'dist',
+                }),
+        ],
+    },
+];

package/src/q2-tecton-theme.js

@@ -0,0 +1,2 @@
+import './styles/q2-tecton-theme.scss';
+console.warn('This file is only meant for compilation do not use it directly');

package/src/q2-tecton-utilities.js

@@ -0,0 +1,2 @@
+import './styles/q2-tecton-utilities.scss';
+console.warn('This file is only meant for compilation do not use it directly');

package/src/styles/_functions.scss

@@ -0,0 +1,41 @@
+// Returns a string to use as a class name
+// This is inspired by Elassus by keeping the naming conventions consistent
+@function build-class-name(
+    $context, 
+    $value: null, 
+    $breakpoint-name: null, 
+    $pseudo-classes: null
+) {
+    $result: #{$context};
+    
+    @if($value) {
+        $result: #{$result}\(#{$value}\);
+    }
+    
+    @if($breakpoint-name) {
+        $result: #{$result}#{$breakpoint-name};
+    }
+    
+    $pseudo-base: $result;
+    
+    @if($pseudo-classes) {
+        @for $index from 1 through length($pseudo-classes) {
+            $pseudo-class: nth($pseudo-classes, $index);
+            $alias: if((length($pseudo-class) > 0), nth($pseudo-class, 1), null);
+            $selector: if((length($pseudo-class) > 1), nth($pseudo-class, 2), null);
+            $new: $pseudo-base;
+            
+            @if ($alias) {
+                $new: '#{$new}\\:#{$alias}';
+            }
+            
+            @if ($selector) {
+                $new: '#{$new}:#{$selector}';
+            }
+            
+            $result: '#{$result}, .#{$new}';
+        }
+    }
+    
+    @return $result;
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,21 @@
+@mixin breakpoint($size) {
+    $breakpoint-xs: 480px !default;
+    $breakpoint-sm: 768px !default;
+    $breakpoint-md: 992px !default;
+    $breakpoint-lg: 1200px !default;
+    $breakpoint-xl: 1400px !default;
+
+    $min-breakpoints: (
+        xs: $breakpoint-xs,
+        sm: $breakpoint-sm,
+        md: $breakpoint-md,
+        lg: $breakpoint-lg,
+        xl: $breakpoint-xl,
+    );
+
+    $value: map-get($min-breakpoints, $size);
+
+    @media screen and (min-width: $value) {
+        @content;
+    }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,30 @@
+$type-unit: 'px' !default;
+$pseudo-classes-map: (
+    f: focus,
+    h: hover,
+    a: active,
+);
+$breakpoint-map: (xs, sm, md, lg, xl);
+
+// Aliases
+$color-alias: clr;
+$background-color-alias: bg-#{$color-alias};
+$border-alias: bd;
+$border-color-alias: #{$border-alias}-#{$color-alias};
+$fill-alias: fill;
+$stroke-alias: stroke;
+$transition-alias: trans;
+$duration-alias: #{$transition-alias}-dur;
+$border-radius-alias: #{$border-alias}-rad;
+$box-shadow-alias: box-shd;
+$margin-alias: mrg;
+$padding-alias: pad;
+$width-alias: w;
+$height-alias: h;
+$x-axis-alias: x;
+$y-axis-alias: y;
+$top-alias: t;
+$bottom-alias: b;
+$left-alias: l;
+$right-alias: r;
+$print-alias: pr;

package/src/styles/functional/_animation.scss

@@ -0,0 +1,30 @@
+// Creates a collection of transition utility classes
+// Uses $animation-map as the list of durations to create
+@mixin functionalDuration($scale, $animation) {
+    .#{build-class-name((context: $duration-alias, value: $scale)...)} {
+        transition-duration: map-get($animation, duration);
+    }
+
+    .#{build-class-name((context: $transition-alias, value: $scale)...)} {
+        transition: map-get($animation, tween);
+    }
+}
+
+$animation-map: (
+    1: (
+        duration: var(--app-duration-1, 0.2s),
+        tween: var(--app-tween-1, 0.2s ease),
+    ),
+    2: (
+        duration: var(--app-duration-2, 0.4s),
+        tween: var(--app-tween-2, 0.4s ease),
+    ),
+    3: (
+        duration: var(--app-duration-3, 0.8s),
+        tween: var(--app-tween-3, 0.8s ease),
+    ),
+);
+
+@each $scale, $animation in $animation-map {
+    @include functionalDuration($scale, $animation);
+}

package/src/styles/functional/_border-radius.scss

@@ -0,0 +1,17 @@
+// Creates a collection of border radius utility classes
+// Uses $border-radius-map as the list of border radii to create
+@mixin functionalBorderRadius($scale, $size) {
+    .#{build-class-name((context: $border-radius-alias, value: $scale)...)} {
+        border-radius: $size;
+    }
+}
+
+$border-radius-map: (
+    1: var(--app-border-radius-1, 3px),
+    2: var(--app-border-radius-2, 6px),
+    3: var(--app-border-radius-3, 12px),
+);
+
+@each $scale, $size in $border-radius-map {
+    @include functionalBorderRadius($scale, $size);
+}

package/src/styles/functional/_box-shadow.scss

@@ -0,0 +1,17 @@
+// Creates a collection of transition box shadow classes
+// Uses $box-shadow-map as the list of box shadow classes to create
+@mixin functionalBoxShadow($scale, $value) {
+    .#{build-class-name((context: $box-shadow-alias, value: $scale)...)} {
+        box-shadow: $value;
+    }
+}
+
+$box-shadow-map: (
+    1: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)),
+    2: var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3)),
+    3: var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3)),
+);
+
+@each $scale, $value in $box-shadow-map {
+    @include functionalBoxShadow($scale, $value);
+}

package/src/styles/functional/_color.scss

@@ -0,0 +1,129 @@
+// Creates a collection of color utility classes
+// Uses $color-map as the list of color groups to create
+@mixin functionalColor($name, $color) {
+    $argument-map: (
+        value: $name,
+        pseudo-classes: $pseudo-classes-map,
+    );
+
+    .#{build-class-name(map-merge((context: $color-alias), $argument-map)...)} {
+        color: $color;
+    }
+
+    .#{build-class-name(map-merge((context: $background-color-alias), $argument-map)...)} {
+        background-color: $color;
+    }
+
+    .#{build-class-name(map-merge((context: $border-color-alias), $argument-map)...)} {
+        border-color: $color;
+    }
+
+    .#{build-class-name(map-merge((context: $fill-alias), $argument-map)...)} {
+        fill: $color;
+    }
+
+    .#{build-class-name(map-merge((context: $stroke-alias), $argument-map)...)} {
+        stroke: $color;
+    }
+}
+
+$color-map: (
+    t-base: var(--t-base, #ffffff),
+    t-text: var(--t-text, #4d4d4d),
+    t-textA: var(--t-textA, rgba(77, 77, 77, 0.77)),
+    t-primary-text: var(--t-primary-text, #ffffff),
+    t-secondary-text: var(--t-secondary-text, #141414),
+    t-tertiary-text: var(--t-tertiary-text, #141414),
+    const-stoplight-info: var(--const-stoplight-info, #0079c1),
+    const-stoplight-success: var(--const-stoplight-success, #0e8a00),
+    const-stoplight-warning: var(--const-stoplight-warning, #f0b400),
+    const-stoplight-alert: var(--const-stoplight-alert, #c30000),
+    t-gray-1: var(--t-gray-1, #0d0d0d),
+    t-gray-2: var(--t-gray-2, #1a1a1a),
+    t-gray-3: var(--t-gray-3, #262626),
+    t-gray-4: var(--t-gray-4, #333333),
+    t-gray-5: var(--t-gray-5, #404040),
+    t-gray-6: var(--t-gray-6, #4d4d4d),
+    t-gray-7: var(--t-gray-7, #666666),
+    t-gray-8: var(--t-gray-8, gray),
+    t-gray-9: var(--t-gray-9, #999999),
+    t-gray-10: var(--t-gray-10, #b3b3b3),
+    t-gray-11: var(--t-gray-11, #cccccc),
+    t-gray-12: var(--t-gray-12, #d9d9d9),
+    t-gray-13: var(--t-gray-13, #e6e6e6),
+    t-gray-14: var(--t-gray-14, #f2f2f2),
+    t-primary: var(--t-primary, #0079c1),
+    t-primary-l1: var(--t-primary-l1, #008de1),
+    t-primary-d1: var(--t-primary-d1, #006dae),
+    t-primary-l2: var(--t-primary-l2, #01a0ff),
+    t-primary-d2: var(--t-primary-d2, #00619a),
+    t-primary-l3: var(--t-primary-l3, #21acff),
+    t-primary-d3: var(--t-primary-d3, #005587),
+    t-primary-l4: var(--t-primary-l4, #41b8ff),
+    t-primary-d4: var(--t-primary-d4, #004974),
+    t-primary-l5: var(--t-primary-l5, #61c4ff),
+    t-primary-d5: var(--t-primary-d5, #003d61),
+    t-secondary: var(--t-secondary, #b3c2cc),
+    t-secondary-l1: var(--t-secondary-l1, #bac9d1),
+    t-secondary-d1: var(--t-secondary-d1, #9cb0bd),
+    t-secondary-l2: var(--t-secondary-l2, #c2cfd6),
+    t-secondary-d2: var(--t-secondary-d2, #859ead),
+    t-secondary-l3: var(--t-secondary-l3, #c9d5db),
+    t-secondary-d3: var(--t-secondary-d3, #6e8c9e),
+    t-secondary-l4: var(--t-secondary-l4, #d1dbe0),
+    t-secondary-d4: var(--t-secondary-d4, #5c798a),
+    t-secondary-l5: var(--t-secondary-l5, #d9e1e6),
+    t-secondary-d5: var(--t-secondary-d5, #4d6473),
+    t-tertiary: var(--t-tertiary, #e8f5fc),
+    t-tertiary-l1: var(--t-tertiary-l1, #ebf6fc),
+    t-tertiary-d1: var(--t-tertiary-d1, #bee1f6),
+    t-tertiary-l2: var(--t-tertiary-l2, #edf7fd),
+    t-tertiary-d2: var(--t-tertiary-d2, #93cef1),
+    t-tertiary-l3: var(--t-tertiary-l3, #eff8fd),
+    t-tertiary-d3: var(--t-tertiary-d3, #68baeb),
+    t-tertiary-l4: var(--t-tertiary-l4, #f1f9fd),
+    t-tertiary-d4: var(--t-tertiary-d4, #3da7e6),
+    t-tertiary-l5: var(--t-tertiary-l5, #f4fafe),
+    t-tertiary-d5: var(--t-tertiary-d5, #1c91d6),
+    t-accent-1-l1: var(--t-accent-1-l1, #e77474),
+    t-accent-1: var(--t-accent-1, #e05252),
+    t-accent-1-d1: var(--t-accent-1-d1, #b62020),
+    t-accent-2-l1: var(--t-accent-2-l1, #e7ad74),
+    t-accent-2: var(--t-accent-2, #e09952),
+    t-accent-2-d1: var(--t-accent-2-d1, #b66b20),
+    t-accent-3-l1: var(--t-accent-3-l1, #e7e774),
+    t-accent-3: var(--t-accent-3, #e0e052),
+    t-accent-3-d1: var(--t-accent-3-d1, #b6b620),
+    t-accent-4-l1: var(--t-accent-4-l1, #ade774),
+    t-accent-4: var(--t-accent-4, #99e052),
+    t-accent-4-d1: var(--t-accent-4-d1, #6bb620),
+    t-accent-5-l1: var(--t-accent-5-l1, #74e774),
+    t-accent-5: var(--t-accent-5, #52e052),
+    t-accent-5-d1: var(--t-accent-5-d1, #20b620),
+    t-accent-6-l1: var(--t-accent-6-l1, #74e7ad),
+    t-accent-6: var(--t-accent-6, #52e099),
+    t-accent-6-d1: var(--t-accent-6-d1, #20b66b),
+    t-accent-7-l1: var(--t-accent-7-l1, #74e7e7),
+    t-accent-7: var(--t-accent-7, #52e0e0),
+    t-accent-7-d1: var(--t-accent-7-d1, #20b6b6),
+    t-accent-8-l1: var(--t-accent-8-l1, #74ade7),
+    t-accent-8: var(--t-accent-8, #5299e0),
+    t-accent-8-d1: var(--t-accent-8-d1, #206bb6),
+    t-accent-9-l1: var(--t-accent-9-l1, #7474e7),
+    t-accent-9: var(--t-accent-9, #5252e0),
+    t-accent-9-d1: var(--t-accent-9-d1, #2020b6),
+    t-accent-10-l1: var(--t-accent-10-l1, #ad74e7),
+    t-accent-10: var(--t-accent-10, #9952e0),
+    t-accent-10-d1: var(--t-accent-10-d1, #6b20b6),
+    t-accent-11-l1: var(--t-accent-11-l1, #e774e7),
+    t-accent-11: var(--t-accent-11, #e052e0),
+    t-accent-11-d1: var(--t-accent-11-d1, #b620b6),
+    t-accent-12-l1: var(--t-accent-12-l1, #e774ad),
+    t-accent-12: var(--t-accent-12, #e05299),
+    t-accent-12-d1: var(--t-accent-12-d1, #b6206b),
+    a11y-gray: var(--t-a11y-gray-color, #747474),
+);
+
+@each $name, $color in $color-map {
+    @include functionalColor($name, $color);
+}

package/src/styles/functional/_helpers.scss

@@ -0,0 +1,24 @@
+*:focus {
+    outline: none;
+    box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+}
+
+body [stencil-hydrated]:focus {
+    box-shadow: none !important;
+}
+
+.content {
+    background-color: var(--t-base, #ffffff);
+    border-color: var(--t-gray-11, #cccccc);
+    color: var(--t-text, #4d4d4d);
+}
+
+a {
+    color: var(--t-primary, #0079c1);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+        color: var(--t-primary-d4, #004974);
+    }
+}

package/src/styles/functional/_index.scss

@@ -0,0 +1,6 @@
+@import 'animation';
+@import 'border-radius';
+@import 'box-shadow';
+@import 'color';
+@import 'sizing';
+@import 'helpers';

package/src/styles/functional/_sizing.scss

@@ -0,0 +1,124 @@
+// Creates a collection of size utility classes
+// Uses $sizing-map as the list of size groups to create
+@mixin functionalSizing($name, $size, $breakpoint: null) {
+    $argument-map: (
+        value: $name,
+        breakpoint-name: $breakpoint,
+    );
+
+    // Margin
+    .#{build-class-name(map-merge((context: $margin-alias), $argument-map)...)} {
+        margin: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$y-axis-alias}), $argument-map)...)} {
+        margin-top: $size;
+        margin-bottom: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$x-axis-alias}), $argument-map)...)} {
+        margin-left: $size;
+        margin-right: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$top-alias}), $argument-map)...)} {
+        margin-top: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$bottom-alias}), $argument-map)...)} {
+        margin-bottom: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$left-alias}), $argument-map)...)} {
+        margin-left: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$margin-alias}-#{$right-alias}), $argument-map)...)} {
+        margin-right: $size;
+    }
+
+    // Padding
+    .#{build-class-name(map-merge((context: $padding-alias), $argument-map)...)} {
+        padding: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$y-axis-alias}), $argument-map)...)} {
+        padding-top: $size;
+        padding-bottom: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$x-axis-alias}), $argument-map)...)} {
+        padding-left: $size;
+        padding-right: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$top-alias}), $argument-map)...)} {
+        padding-top: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$bottom-alias}), $argument-map)...)} {
+        padding-bottom: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$left-alias}), $argument-map)...)} {
+        padding-left: $size;
+    }
+
+    .#{build-class-name(map-merge((context: #{$padding-alias}-#{$right-alias}), $argument-map)...)} {
+        padding-right: $size;
+    }
+
+    // Dimension
+    .#{build-class-name(map-merge((context: $width-alias), $argument-map)...)} {
+        width: $size;
+    }
+
+    .#{build-class-name(map-merge((context: $height-alias), $argument-map)...)} {
+        height: $size;
+    }
+}
+
+$sizing-map: (
+    a: auto,
+    // TODO: Start Remove for 2.0
+    0: var(--app-scale-0, 0),
+    1: var(--app-scale-1, 5px),
+    2: var(--app-scale-2, 10px),
+    3: var(--app-scale-3, 15px),
+    4: var(--app-scale-4, 20px),
+    5: var(--app-scale-5, 45px),
+    // TODO: End Remove for 2.0
+    '0x': var(--app-scale-0x, 0px),
+    '1x': var(--app-scale-1x, 5px),
+    '2x': var(--app-scale-2x, 10px),
+    '3x': var(--app-scale-3x, 15px),
+    '4x': var(--app-scale-4x, 20px),
+    '5x': var(--app-scale-5x, 25px),
+    '6x': var(--app-scale-6x, 30px),
+    '7x': var(--app-scale-7x, 35px),
+    '8x': var(--app-scale-8x, 40px),
+    '9x': var(--app-scale-9x, 45px),
+    '10x': var(--app-scale-10x, 50px),
+    '11x': var(--app-scale-11x, 55px),
+    '12x': var(--app-scale-12x, 60px),
+);
+
+@each $scale, $size in $sizing-map {
+    @include functionalSizing($scale, $size);
+}
+
+// Screen media queries
+@each $breakpoint in $breakpoint-map {
+    @include breakpoint($breakpoint) {
+        @each $scale, $size in $sizing-map {
+            @include functionalSizing($scale, $size, $breakpoint);
+        }
+    }
+}
+
+// Print media query
+@media print {
+    @each $scale, $size in $sizing-map {
+        @include functionalSizing($scale, $size, $print-alias);
+    }
+}

package/src/styles/q2-tecton-theme.scss

@@ -0,0 +1,134 @@
+:root {
+    --const-stoplight-info: #0079c1;
+    --const-stoplight-success: #0e8a00;
+    --const-stoplight-warning: #f0b400;
+    --const-stoplight-alert: #c30000;
+    --const-global-focus: 0 0 0 2px #33b4ff;
+    --app-white: #ffffff;
+    --app-black: #000000;
+    --app-font-size: 14px;
+    --app-font-size-small: 12px;
+    --app-scale-0x: 0px;
+    --app-scale-1x: 5px;
+    --app-scale-2x: 10px;
+    --app-scale-3x: 15px;
+    --app-scale-4x: 20px;
+    --app-scale-5x: 25px;
+    --app-scale-6x: 30px;
+    --app-scale-7x: 35px;
+    --app-scale-8x: 40px;
+    --app-scale-9x: 45px;
+    --app-scale-10x: 50px;
+    --app-scale-11x: 55px;
+    --app-scale-12x: 60px;
+    --app-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --app-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.3);
+    --app-shadow-3: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --app-border-radius-1: 3px;
+    --app-border-radius-2: 6px;
+    --app-border-radius-3: 12px;
+    --app-tween-1: 0.2s ease;
+    --app-tween-2: 0.4s ease;
+    --app-tween-3: 0.8s ease;
+    --app-duration-1: 0.2s;
+    --app-duration-2: 0.4s;
+    --app-duration-3: 0.8s;
+    --app-disabled-opacity: 0.4;
+    --t-base: #ffffff;
+    --t-text: #4d4d4d;
+    --t-textA: rgba(77, 77, 77, 0.77);
+    --t-primary-text: #ffffff;
+    --t-secondary-text: #141414;
+    --t-tertiary-text: #141414;
+    --t-gray-1: #0d0d0d;
+    --t-gray-2: #1a1a1a;
+    --t-gray-3: #262626;
+    --t-gray-4: #333333;
+    --t-gray-5: #404040;
+    --t-gray-6: #4d4d4d;
+    --t-gray-7: #666666;
+    --t-gray-8: gray;
+    --t-gray-9: #999999;
+    --t-gray-10: #b3b3b3;
+    --t-gray-11: #cccccc;
+    --t-gray-12: #d9d9d9;
+    --t-gray-13: #e6e6e6;
+    --t-gray-14: #f2f2f2;
+    --t-base-a0: rgba(255, 255, 255, 0);
+    --t-base-a1: rgba(255, 255, 255, 0.25);
+    --t-base-a2: rgba(255, 255, 255, 0.5);
+    --t-base-a3: rgba(255, 255, 255, 0.75);
+    --t-top-a0: rgba(13, 13, 13, 0);
+    --t-top-a1: rgba(13, 13, 13, 0.35);
+    --t-top-a2: rgba(13, 13, 13, 0.6);
+    --t-top-a3: rgba(13, 13, 13, 0.85);
+    --t-primary: #0079c1;
+    --t-primary-l1: #008de1;
+    --t-primary-d1: #006dae;
+    --t-primary-l2: #01a0ff;
+    --t-primary-d2: #00619a;
+    --t-primary-l3: #21acff;
+    --t-primary-d3: #005587;
+    --t-primary-l4: #41b8ff;
+    --t-primary-d4: #004974;
+    --t-primary-l5: #61c4ff;
+    --t-primary-d5: #003d61;
+    --t-secondary: #b3c2cc;
+    --t-secondary-l1: #bac9d1;
+    --t-secondary-d1: #9cb0bd;
+    --t-secondary-l2: #c2cfd6;
+    --t-secondary-d2: #859ead;
+    --t-secondary-l3: #c9d5db;
+    --t-secondary-d3: #6e8c9e;
+    --t-secondary-l4: #d1dbe0;
+    --t-secondary-d4: #5c798a;
+    --t-secondary-l5: #d9e1e6;
+    --t-secondary-d5: #4d6473;
+    --t-tertiary: #e8f5fc;
+    --t-tertiary-l1: #ebf6fc;
+    --t-tertiary-d1: #bee1f6;
+    --t-tertiary-l2: #edf7fd;
+    --t-tertiary-d2: #93cef1;
+    --t-tertiary-l3: #eff8fd;
+    --t-tertiary-d3: #68baeb;
+    --t-tertiary-l4: #f1f9fd;
+    --t-tertiary-d4: #3da7e6;
+    --t-tertiary-l5: #f4fafe;
+    --t-tertiary-d5: #1c91d6;
+    --t-accent-1-l1: #e77474;
+    --t-accent-1: #e05252;
+    --t-accent-1-d1: #b62020;
+    --t-accent-2-l1: #e7ad74;
+    --t-accent-2: #e09952;
+    --t-accent-2-d1: #b66b20;
+    --t-accent-3-l1: #e7e774;
+    --t-accent-3: #e0e052;
+    --t-accent-3-d1: #b6b620;
+    --t-accent-4-l1: #ade774;
+    --t-accent-4: #99e052;
+    --t-accent-4-d1: #6bb620;
+    --t-accent-5-l1: #74e774;
+    --t-accent-5: #52e052;
+    --t-accent-5-d1: #20b620;
+    --t-accent-6-l1: #74e7ad;
+    --t-accent-6: #52e099;
+    --t-accent-6-d1: #20b66b;
+    --t-accent-7-l1: #74e7e7;
+    --t-accent-7: #52e0e0;
+    --t-accent-7-d1: #20b6b6;
+    --t-accent-8-l1: #74ade7;
+    --t-accent-8: #5299e0;
+    --t-accent-8-d1: #206bb6;
+    --t-accent-9-l1: #7474e7;
+    --t-accent-9: #5252e0;
+    --t-accent-9-d1: #2020b6;
+    --t-accent-10-l1: #ad74e7;
+    --t-accent-10: #9952e0;
+    --t-accent-10-d1: #6b20b6;
+    --t-accent-11-l1: #e774e7;
+    --t-accent-11: #e052e0;
+    --t-accent-11-d1: #b620b6;
+    --t-accent-12-l1: #e774ad;
+    --t-accent-12: #e05299;
+    --t-accent-12-d1: #b6206b;
+}

package/src/styles/q2-tecton-utilities.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+@import 'functions';
+@import 'mixins';
+
+[data-tecton-module] {
+    @import 'utils/index';
+    @import 'functional/index';
+}