@companycam/slab-web 0.0.4 → 0.0.6

package/dist/bundle.js

@@ -21,6 +21,8 @@ var color_brand_primary = "#0967d2";
 var color_brand_secondary = "#142334";
 var color_brand_accent = "#ffd000";
 var color_brand_upgrade = "#0ce8d6";
+var color_brand_add_on_le = "#7949d1";
+var color_brand_add_on_de = "#bca4e8";
 var color_utility_destroy = "#ef4e4e";
 var color_utility_caution = "#ffd000";
 var color_utility_success = "#3ebd93";
@@ -137,6 +139,8 @@ var tokens = {
 	color_brand_secondary: color_brand_secondary,
 	color_brand_accent: color_brand_accent,
 	color_brand_upgrade: color_brand_upgrade,
+	color_brand_add_on_le: color_brand_add_on_le,
+	color_brand_add_on_de: color_brand_add_on_de,
 	color_utility_destroy: color_utility_destroy,
 	color_utility_caution: color_utility_caution,
 	color_utility_success: color_utility_success,
@@ -296,6 +300,9 @@ var tokens = {
   name: "light_environment",
   dark: false,
   color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_le
+    },
     background: {
       1: tokens.color_background_1_le,
       2: tokens.color_background_2_le,
@@ -346,6 +353,9 @@ var tokens = {
   name: "dark_environment",
   dark: true,
   color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_de
+    },
     background: {
       1: tokens.color_background_1_de,
       2: tokens.color_background_2_de,
@@ -526,6 +536,16 @@ const tokenDocs = [{
   getsLightDarkWeb: true,
   getsAlphaWeb: true,
   isThemed: false
+}, {
+  name: "color_brand_add_on",
+  value: "#7949d1",
+  category: "color",
+  type: "brand",
+  item: "add_on",
+  comment: "Used to indicate something is an add-on.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
 }, {
   name: "color_utility_destroy",
   value: "#ef4e4e",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Design System for use across CompanyCam web applications",
   "main": "web/index.js",
   "module": "dist/bundle.js",

package/shared/theming/themes/dark_environment.js

@@ -4,6 +4,9 @@ export default {
   name: "dark_environment",
   dark: true,
   color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_de,
+    },
     background: {
       1: tokens.color_background_1_de,
       2: tokens.color_background_2_de,

package/shared/theming/themes/light_environment.js

@@ -4,6 +4,9 @@ export default {
   name: "light_environment",
   dark: false,
   color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_le,
+    },
     background: {
       1: tokens.color_background_1_le,
       2: tokens.color_background_2_le,

package/shared/tokens/build/css/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Nov 2022 17:06:48 GMT
+ * Generated on Wed, 08 Feb 2023 21:44:16 GMT
  */
 
 :root, .light-environment {

package/shared/tokens/build/css/dark_environment.css

@@ -1,9 +1,28 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Nov 2022 17:06:48 GMT
+ * Generated on Wed, 08 Feb 2023 21:44:16 GMT
  */
 
 .dark-environment {
+--cc_color_brand_add_on: #bca4e8;
+  --cc_color_brand_add_on_lighten_10: #c2adea;
+  --cc_color_brand_add_on_lighten_15: #c6b1eb;
+  --cc_color_brand_add_on_lighten_85: #f4f1fb;
+  --cc_color_brand_add_on_lighten_90: #f8f5fc;
+  --cc_color_brand_add_on_lighten_95: #fbfafd;
+  --cc_color_brand_add_on_darken_10: #a993d0;
+  --cc_color_brand_add_on_darken_15: #9f8bc5;
+    
+  --cc_color_brand_add_on_alpha_90: rgba(188,164,232,0.9);
+  --cc_color_brand_add_on_alpha_80: rgba(188,164,232,0.8);
+  --cc_color_brand_add_on_alpha_70: rgba(188,164,232,0.7);
+  --cc_color_brand_add_on_alpha_60: rgba(188,164,232,0.6);
+  --cc_color_brand_add_on_alpha_50: rgba(188,164,232,0.5);
+  --cc_color_brand_add_on_alpha_40: rgba(188,164,232,0.4);
+  --cc_color_brand_add_on_alpha_30: rgba(188,164,232,0.3);
+  --cc_color_brand_add_on_alpha_20: rgba(188,164,232,0.2);
+  --cc_color_brand_add_on_alpha_10: rgba(188,164,232,0.1);
+  
 --cc_color_utility_info: #4d5a68;
   --cc_color_utility_info_lighten_10: #5e6a77;
   --cc_color_utility_info_lighten_15: #67727e;

package/shared/tokens/build/css/light_environment.css

@@ -1,9 +1,28 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Nov 2022 17:06:48 GMT
+ * Generated on Wed, 08 Feb 2023 21:44:16 GMT
  */
 
 :root, .light-environment {
+--cc_color_brand_add_on: #7949d1;
+  --cc_color_brand_add_on_lighten_10: #865bd5;
+  --cc_color_brand_add_on_lighten_15: #8d64d7;
+  --cc_color_brand_add_on_lighten_85: #eae3f8;
+  --cc_color_brand_add_on_lighten_90: #f1ecfa;
+  --cc_color_brand_add_on_lighten_95: #f8f5fc;
+  --cc_color_brand_add_on_darken_10: #6c41bc;
+  --cc_color_brand_add_on_darken_15: #663eb1;
+    
+  --cc_color_brand_add_on_alpha_90: rgba(121,73,209,0.9);
+  --cc_color_brand_add_on_alpha_80: rgba(121,73,209,0.8);
+  --cc_color_brand_add_on_alpha_70: rgba(121,73,209,0.7);
+  --cc_color_brand_add_on_alpha_60: rgba(121,73,209,0.6);
+  --cc_color_brand_add_on_alpha_50: rgba(121,73,209,0.5);
+  --cc_color_brand_add_on_alpha_40: rgba(121,73,209,0.4);
+  --cc_color_brand_add_on_alpha_30: rgba(121,73,209,0.3);
+  --cc_color_brand_add_on_alpha_20: rgba(121,73,209,0.2);
+  --cc_color_brand_add_on_alpha_10: rgba(121,73,209,0.1);
+  
 --cc_color_utility_info: #4d5a68;
   --cc_color_utility_info_lighten_10: #5e6a77;
   --cc_color_utility_info_lighten_15: #67727e;

package/shared/tokens/build/docs/token_docs.js

@@ -43,6 +43,17 @@ export const tokenDocs = [
     getsAlphaWeb: true,
     isThemed: false
   },
+  {
+    name: "color_brand_add_on",
+    value: "#7949d1",
+    category: "color",
+    type: "brand",
+    item: "add_on",
+    comment: "Used to indicate something is an add-on.",
+    getsLightDarkWeb: true,
+    getsAlphaWeb: true,
+    isThemed: true
+  },
   {
     name: "color_utility_destroy",
     value: "#ef4e4e",

package/shared/tokens/build/js/tokens.js

@@ -1,12 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Nov 2022 17:06:48 GMT
+ * Generated on Wed, 08 Feb 2023 21:44:16 GMT
  */
 
 export const color_brand_primary = "#0967d2"; // Our beloved CoCam deep blue. Use only for branding purposes.
 export const color_brand_secondary = "#142334"; // Complements our primary blue. Use only for branding purposes.
 export const color_brand_accent = "#ffd000"; // Used to indicate something is new or coming soon. When used as a background color, pair with color_text_secondary.
 export const color_brand_upgrade = "#0ce8d6"; // Used to indicate something is part of the Pro plan or part of an upgrade path. When used as a background color, pair with color_text_secondary.
+export const color_brand_add_on_le = "#7949d1"; // Used to indicate something is an add-on.
+export const color_brand_add_on_de = "#bca4e8";
 export const color_utility_destroy = "#ef4e4e"; // Use to warn the user of destructive actions or app errors.
 export const color_utility_caution = "#ffd000"; // Use to call attention to important information or warnings.
 export const color_utility_success = "#3ebd93"; // Use to confirm a successfully completed action.

package/shared/tokens/build/json/tokens.json

@@ -3,6 +3,8 @@
   "color_brand_secondary": "#142334",
   "color_brand_accent": "#ffd000",
   "color_brand_upgrade": "#0ce8d6",
+  "color_brand_add_on_le": "#7949d1",
+  "color_brand_add_on_de": "#bca4e8",
   "color_utility_destroy": "#ef4e4e",
   "color_utility_caution": "#ffd000",
   "color_utility_success": "#3ebd93",

package/shared/tokens/build/scss/tokens.scss

@@ -1,11 +1,13 @@
 
 // Do not edit directly
-// Generated on Mon, 21 Nov 2022 17:06:48 GMT
+// Generated on Wed, 08 Feb 2023 21:44:16 GMT
 
 $cc_color_brand_primary: #0967d2; // Our beloved CoCam deep blue. Use only for branding purposes.
 $cc_color_brand_secondary: #142334; // Complements our primary blue. Use only for branding purposes.
 $cc_color_brand_accent: #ffd000; // Used to indicate something is new or coming soon. When used as a background color, pair with color_text_secondary.
 $cc_color_brand_upgrade: #0ce8d6; // Used to indicate something is part of the Pro plan or part of an upgrade path. When used as a background color, pair with color_text_secondary.
+$cc_color_brand_add_on_le: #7949d1; // Used to indicate something is an add-on.
+$cc_color_brand_add_on_de: #bca4e8;
 $cc_color_utility_destroy: #ef4e4e; // Use to warn the user of destructive actions or app errors.
 $cc_color_utility_caution: #ffd000; // Use to call attention to important information or warnings.
 $cc_color_utility_success: #3ebd93; // Use to confirm a successfully completed action.

package/shared/tokens/properties/color.json

@@ -16,6 +16,15 @@
       "upgrade": {
         "value": "#0CE8D6",
         "comment": "Used to indicate something is part of the Pro plan or part of an upgrade path. When used as a background color, pair with color_text_secondary."
+      },
+      "add_on": {
+        "le": {
+          "value": "#7949D1",
+          "comment": "Used to indicate something is an add-on."
+        },
+        "de": {
+          "value": "#BCA4E8"
+        }
       }
     },
     "utility": {