@everchron/ec-shards 0.8.31 → 1.0.2

package/src/stories/tabs/tabs.stories.js

@@ -2,139 +2,36 @@ import EcsTabs from '@components/tabs/tabs';
 import EcsTab from '@components/tab/tab';
 import EcsTabBar from '@components/tab-bar/tab-bar';
 import EcsTabButton from '@components/tab-button/tab-button';
-import EcsModalHeader from '@components/modal-header/modal-header';
 
 export default {
-  title: 'Navigation/Tabs',
-  component: EcsTabs
+  title: 'Navigation/Tabs/Tabs',
+  component: EcsTabs,
+  parameters: {
+    docs: {
+      description: {
+        component: '`EcsTabs` is the wrapper component of all `EcsTab` components.',
+      },
+    },
+  }
 };
 
-export const standardRow = () => ({
+export const tabs = () => ({
   components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
+  data() {
+    return {
+      tabIndex: 1
+    }
+  },
   template: `<div>
               <ecs-tab-bar>
-                <ecs-tab-button show>Settings</ecs-tab-button>
-                <ecs-tab-button badge>Calendar</ecs-tab-button>
-                <ecs-tab-button>Versions</ecs-tab-button>
+                <ecs-tab-button @click="tabIndex = 1" :show="tabIndex == 1">Settings</ecs-tab-button>
+                <ecs-tab-button @click="tabIndex = 2" :show="tabIndex == 2">Calendar</ecs-tab-button>
+                <ecs-tab-button @click="tabIndex = 3" :show="tabIndex == 3">Versions</ecs-tab-button>
               </ecs-tab-bar>
               <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const standardRowIcons = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tab-bar>
-                <ecs-tab-button sticker="success" show icon="settings">Settings</ecs-tab-button>
-                <ecs-tab-button sticker="warning" icon="calendar" badge>Calendar</ecs-tab-button>
-                <ecs-tab-button sticker="error" icon="evidence">Versions</ecs-tab-button>
-              </ecs-tab-bar>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const standardColumn = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tab-bar direction="column">
-                <ecs-tab-button show>Settings</ecs-tab-button>
-                <ecs-tab-button badge>Calendar</ecs-tab-button>
-                <ecs-tab-button>Versions</ecs-tab-button>
-              </ecs-tab-bar>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const standardColumnIconsSubtabs = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tab-bar direction="column">
-                <ecs-tab-button show icon="settings">Settings</ecs-tab-button>
-                <ecs-tab-button icon="calendar" badge>Calendar</ecs-tab-button>
-                <ecs-tab-button subtab>Calendar Settings</ecs-tab-button>
-              </ecs-tab-bar>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const segmentTabs = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tab-bar type="segment">
-                <ecs-tab-button show icon="settings">Settings</ecs-tab-button>
-                <ecs-tab-button badge>Calendar</ecs-tab-button>
-                <ecs-tab-button>Versions</ecs-tab-button>
-              </ecs-tab-bar>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const sheetTabs = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-              <ecs-tab-bar type="sheet">
-                <ecs-tab-button show>Settings</ecs-tab-button>
-                <ecs-tab-button>Calendar</ecs-tab-button>
-                <ecs-tab-button>Versions</ecs-tab-button>
-              </ecs-tab-bar>
-            </div>`,
-});
-
-export const modalTabs = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton, EcsModalHeader },
-  template: `<div>
-              <ecs-modal-header type="tabs">
-              <ecs-tab-bar type="modal">
-                <ecs-tab-button show shortcut="⌘N">Settings</ecs-tab-button>
-                <ecs-tab-button shortcut="⌘F">Calendar</ecs-tab-button>
-                <ecs-tab-button shortcut="⌘E">Versions</ecs-tab-button>
-              </ecs-tab-bar>
-              </ecs-modal-header><div>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
-              </ecs-tabs>
-            </div>`,
-});
-
-export const sidebarTabs = () => ({
-  components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
-  template: `<div>
-              <ecs-tab-bar type="sidebar">
-                <ecs-tab-button show icon="settings" title="Settings"></ecs-tab-button>
-                <ecs-tab-button icon="calendar" title="Calendar" badge></ecs-tab-button>
-                <ecs-tab-button icon="evidence" title="Versions"></ecs-tab-button>
-              </ecs-tab-bar>
-              <ecs-tabs>
-                <ecs-tab show>First Tab</ecs-tab>
-                <ecs-tab>Second Tab</ecs-tab>
-                <ecs-tab>Third Tab</ecs-tab>
+                <ecs-tab :show="tabIndex == 1">First Tab</ecs-tab>
+                <ecs-tab :show="tabIndex == 2">Second Tab</ecs-tab>
+                <ecs-tab :show="tabIndex == 3">Third Tab</ecs-tab>
               </ecs-tabs>
             </div>`,
 });

package/src/stories/tag/tag.stories.js

@@ -1,7 +1,7 @@
 import EcsTag from '@components/tag/tag';
 
 export default {
-  title: 'Elements/Tag',
+  title: 'Data/Tag',
   component: EcsTag
 };
 

package/src/stories/tag-cloud/tag-cloud.stories.js

@@ -2,8 +2,8 @@ import EcsTagCloud from '@components/tag-cloud/tag-cloud';
 import EcsTag from '@components/tag/tag';
 
 export default {
-  title: 'Elements/Tag Cloud',
-  component: EcsTag
+  title: 'Data/Tag Cloud',
+  component: EcsTagCloud
 };
 
 export const tagCloud = () => ({

package/src/stories/text/text.stories.js

@@ -0,0 +1,43 @@
+import EcsText from '@components/text/text';
+
+export default {
+  title: 'Typography/Text',
+  component: EcsText
+};
+
+export const headlines = () => ({
+  components: { EcsText },
+  template: `<div>
+              <ecs-text type="headline" size="1">Headline 1</ecs-text>
+              <ecs-text type="headline" size="2">Headline 2</ecs-text>
+              <ecs-text type="headline" size="3">Headline 3</ecs-text>
+              <ecs-text type="headline" size="4">Headline 4</ecs-text>
+              <ecs-text type="headline" size="5">Headline 5</ecs-text>
+              <ecs-text type="headline" size="6">Headline 6</ecs-text>
+            </div>`,
+});
+
+export const labels = () => ({
+  components: { EcsText },
+  template: `<div style="display:flex;flex-direction:column;">
+              <ecs-text type="label" size="1">Label 1</ecs-text>
+              <ecs-text type="label" size="2">Label 2</ecs-text>
+              <ecs-text type="label" size="1" emphasized>Label 1 Emphasized</ecs-text>
+              <ecs-text type="label" size="2" emphasized>Label 2 Emphasized</ecs-text>
+            </div>`,
+});
+
+export const sublines = () => ({
+  components: { EcsText },
+  template: `<div>
+              <ecs-text type="subline">Subline 1</ecs-text>
+            </div>`,
+});
+
+export const formText = () => ({
+  components: { EcsText },
+  template: `<div>
+              <ecs-text type="form">Default Form Text</ecs-text>
+              <ecs-text type="form" color="negative">Error Form Text</ecs-text>
+            </div>`,
+});

package/src/stories/toast/toast.stories.js

@@ -8,21 +8,21 @@ export default {
 
 export const toast = () => ({
   components: { EcsToast, EcsToasts },
-  template: `<ecs-toast message="This is a toast message." button="View" :key="1" />`,
+  template: `<ecs-toast button="View" :key="1">This is a toast message.</ecs-toast>`,
 });
 
 export const toastList = () => ({
   components: { EcsToast, EcsToasts },
   template: `<ecs-toasts>
-                <ecs-toast message="This is a toast message." :key="1" />
-                <ecs-toast message="This is another a toast message." button="View" :key="2" />
+                <ecs-toast :key="1">This is a toast message.</ecs-toast>
+                <ecs-toast button="View" :key="2">This is another a toast message.</ecs-toast>
               </ecs-toasts>`,
 });
 
 export const toastVariants = () => ({
   components: { EcsToast, EcsToasts },
   template: `<ecs-toasts>
-                <ecs-toast theme="success" message="This is a toast message." button="View" :key="1" />
-                <ecs-toast theme="error" message="This is another a toast message." button="View" :key="2" />
+                <ecs-toast theme="success" button="View" :key="1">This is a toast message.</ecs-toast>
+                <ecs-toast theme="error" button="View" :key="2">This is another a toast message.</ecs-toast>
               </ecs-toasts>`,
 });

package/src/stories/tree-list/tree-list.stories.js

@@ -2,7 +2,7 @@ import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
 import EcsTreeList from '@components/tree-list/tree-list'
 
 export default {
-  title: 'Content Structures/Tree List',
+  title: 'Data/Tree List/Tree List',
   component: EcsTreeList
 };
 

package/src/stories/tree-list-item/tree-list-item.stories.js

@@ -4,7 +4,7 @@ import EcsButton from '@components/button/button'
 import EcsCheckbox from '@components/checkbox/checkbox'
 
 export default {
-  title: 'Content Structures/Tree List Item',
+  title: 'Data/Tree List/Tree List Item',
   component: EcsTreeListItem
 };
 
@@ -101,13 +101,13 @@ export const treeListItemActions = () => ({
                 <ecs-tree-list-item state="hover">
                   Actions (always visible)
                   <template slot="actions">
-                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                    <ecs-button size="sml" icon="link-remove" icon-only />
                   </template>
                 </ecs-tree-list-item>
                 <ecs-tree-list-item state="hover" actions-on-hover>
                   Actions (on hover)
                   <template slot="actions">
-                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                    <ecs-button size="sml" icon="link-remove" icon-only />
                   </template>
                 </ecs-tree-list-item>
               </ecs-tree-list>`,

package/src/stories/video/video.stories.js

@@ -1,7 +1,7 @@
 import EcsVideo from '@components/video/video';
 
 export default {
-  title: 'Elements/Video',
+  title: 'Data/Video',
   component: EcsVideo
 };
 

package/src/tokens/README.md

@@ -0,0 +1,83 @@
+# Basic Style Dictionary
+
+This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
+```bash
+style-dictionary build
+```
+
+You should see something like this output:
+```
+Copying starter files...
+
+Source style dictionary starter files created!
+
+Running `style-dictionary build` for the first time to generate build artifacts.
+
+
+scss
+✔︎  build/scss/_variables.scss
+
+android
+✔︎  build/android/font_dimens.xml
+✔︎  build/android/colors.xml
+
+compose
+✔︎ build/compose/StyleDictionaryColor.kt
+✔︎ build/compose/StyleDictionarySize.kt
+
+ios
+✔︎  build/ios/StyleDictionaryColor.h
+✔︎  build/ios/StyleDictionaryColor.m
+✔︎  build/ios/StyleDictionarySize.h
+✔︎  build/ios/StyleDictionarySize.m
+
+ios-swift
+✔︎  build/ios-swift/StyleDictionary.swift
+
+ios-swift-separate-enums
+✔︎  build/ios-swift/StyleDictionaryColor.swift
+✔︎  build/ios-swift/StyleDictionarySize.swift
+```
+
+Good for you! You have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:
+```
+├── README.md
+├── config.json
+├── tokens/
+│   ├── color/
+│       ├── base.json
+│       ├── font.json
+│   ├── size/
+│       ├── font.json
+├── build/
+│   ├── android/
+│      ├── font_dimens.xml
+│      ├── colors.xml
+│   ├── compose/
+│      ├── StyleDictionaryColor.kt
+│      ├── StyleDictionarySize.kt
+│   ├── scss/
+│      ├── _variables.scss
+│   ├── ios/
+│      ├── StyleDictionaryColor.h
+│      ├── StyleDictionaryColor.m
+│      ├── StyleDictionarySize.h
+│      ├── StyleDictionarySize.m
+│   ├── ios-swift/
+│      ├── StyleDictionary.swift
+│      ├── StyleDictionaryColor.swift
+│      ├── StyleDictionarySize.swift
+```
+
+If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built.
+
+Pretty nifty! This shows a few things happening:
+1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config.json`. This allows you to split up the token JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
+1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.
+1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.
+
+Now let's make a change and see how that affects things. Open up `tokens/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
+
+**Huzzah!**
+
+Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).

package/src/tokens/build/css/tokens.css

@@ -0,0 +1,129 @@
+:root {
+  --type-scale-6-line-height: 32px;
+  --type-scale-6-font-size: 24px;
+  --type-scale-5-line-height: 28px;
+  --type-scale-5-font-size: 20px;
+  --type-scale-4-line-height: 24px;
+  --type-scale-4-font-size: 16px;
+  --type-scale-3-line-height: 20px;
+  --type-scale-3-font-size: 14px;
+  --type-scale-2-line-height: 16px;
+  --type-scale-2-font-size: 12px;
+  --type-scale-1-line-height: 14px;
+  --type-scale-1-font-size: 10px;
+  --font-weight-bold: bold;
+  --font-weight-medium: 500;
+  --font-weight-normal: normal;
+  --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", "Menlo", "Courier", monospace;
+  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --spacing-80: 64px;
+  --spacing-70: 56px;
+  --spacing-60: 48px;
+  --spacing-50: 40px;
+  --spacing-40: 32px;
+  --spacing-30: 24px;
+  --spacing-25: 20px;
+  --spacing-20: 16px;
+  --spacing-15: 12px;
+  --spacing-10: 8px;
+  --spacing-5: 4px;
+  --layout-actionbar-height: 41px;
+  --layout-toolbar-height: 60px;
+  --layout-header-height: 41px;
+  --color-party-court-content: rgb(192,112,1);
+  --color-party-court-icon: rgb(215,139,33);
+  --color-party-court-background: rgb(253,228,192);
+  --color-party-other-content: rgb(124,126,130);
+  --color-party-other-icon: rgb(149,152,156);
+  --color-party-other-background: rgb(228,233,238);
+  --color-party-joint-content: rgb(129,113,91);
+  --color-party-joint-icon: rgb(164,146,122);
+  --color-party-joint-background: rgb(238,233,229);
+  --color-party-opposing-content: rgb(61,115,1);
+  --color-party-opposing-icon: rgb(93,175,0);
+  --color-party-opposing-background: rgb(198,234,165);
+  --color-party-client-content: rgb(15,92,162);
+  --color-party-client-icon: rgb(34,127,211);
+  --color-party-client-background: rgb(196,223,247);
+  --color-green-15: rgb(0,26,13);
+  --color-green-14: rgb(0,51,26);
+  --color-green-13: rgb(0,73,37);
+  --color-green-12: rgb(0,100,50);
+  --color-green-11: rgb(1,144,73);
+  --color-green-10: rgb(8,175,92);
+  --color-green-9: rgb(14,186,101);
+  --color-green-8: rgb(25,204,116);
+  --color-green-7: rgb(74,211,144);
+  --color-green-6: rgb(118,226,173);
+  --color-green-5: rgb(172,237,205);
+  --color-green-4: rgb(211,244,228);
+  --color-green-3: rgb(224,251,238);
+  --color-green-2: rgb(236,253,245);
+  --color-green-1: rgb(245,253,249);
+  --color-yellow-15: rgb(49,40,36);
+  --color-yellow-14: rgb(68,54,38);
+  --color-yellow-13: rgb(102,75,41);
+  --color-yellow-12: rgb(131,93,42);
+  --color-yellow-11: rgb(162,114,45);
+  --color-yellow-10: rgb(193,134,47);
+  --color-yellow-9: rgb(233,160,50);
+  --color-yellow-8: rgb(241,178,81);
+  --color-yellow-7: rgb(244,191,110);
+  --color-yellow-6: rgb(246,205,144);
+  --color-yellow-5: rgb(245,218,174);
+  --color-yellow-4: rgb(246,227,199);
+  --color-yellow-3: rgb(255,246,213);
+  --color-yellow-2: rgb(255,249,228);
+  --color-yellow-1: rgb(255,252,242);
+  --color-red-15: rgb(69,0,10);
+  --color-red-14: rgb(101,0,14);
+  --color-red-13: rgb(148,0,20);
+  --color-red-12: rgb(179,5,28);
+  --color-red-11: rgb(209,17,42);
+  --color-red-10: rgb(237,34,60);
+  --color-red-9: rgb(255,55,80);
+  --color-red-8: rgb(255,75,98);
+  --color-red-7: rgb(255,111,129);
+  --color-red-6: rgb(255,153,166);
+  --color-red-5: rgb(255,190,198);
+  --color-red-4: rgb(255,218,223);
+  --color-red-3: rgb(255,233,236);
+  --color-red-2: rgb(255,243,245);
+  --color-red-1: rgb(255,247,249);
+  --color-blue-15: rgb(0,29,75);
+  --color-blue-14: rgb(0,44,113);
+  --color-blue-13: rgb(0,57,146);
+  --color-blue-12: rgb(0,69,178);
+  --color-blue-11: rgb(0,80,206);
+  --color-blue-10: rgb(9,97,235);
+  --color-blue-9: rgb(11,113,235);
+  --color-blue-8: rgb(21,126,251);
+  --color-blue-7: rgb(56,147,255);
+  --color-blue-6: rgb(107,175,255);
+  --color-blue-5: rgb(167,207,255);
+  --color-blue-4: rgb(203,227,255);
+  --color-blue-3: rgb(223,238,255);
+  --color-blue-2: rgb(233,243,255);
+  --color-blue-1: rgb(244,249,255);
+  --color-gray-15: rgb(32,33,39);
+  --color-gray-14: rgb(29,31,40);
+  --color-gray-13: rgb(42,45,61);
+  --color-gray-12: rgb(60,64,81);
+  --color-gray-11: rgb(71,75,96);
+  --color-gray-10: rgb(101,104,122);
+  --color-gray-9: rgb(117,121,143);
+  --color-gray-8: rgb(133,142,158);
+  --color-gray-7: rgb(146,154,169);
+  --color-gray-6: rgb(161,166,176);
+  --color-gray-5: rgb(185,188,194);
+  --color-gray-4: rgb(215,218,225);
+  --color-gray-3: rgb(236,237,242);
+  --color-gray-2: rgb(243,244,247);
+  --color-gray-1: rgb(249,250,252);
+  --color-white: #FFFFFF;
+  --border-radius-x-large: 12px;
+  --border-radius-large: 8px;
+  --border-radius-medium: 6px;
+  --border-radius-small: 4px;
+  --border-radius-x-small: 2px;
+}

package/src/tokens/build/json/tokens.json

@@ -0,0 +1,129 @@
+{
+  "BorderRadiusXSmall": "2px",
+  "BorderRadiusSmall": "4px",
+  "BorderRadiusMedium": "6px",
+  "BorderRadiusLarge": "8px",
+  "BorderRadiusXLarge": "12px",
+  "ColorWhite": "#FFFFFF",
+  "ColorGray1": "rgb(249,250,252)",
+  "ColorGray2": "rgb(243,244,247)",
+  "ColorGray3": "rgb(236,237,242)",
+  "ColorGray4": "rgb(215,218,225)",
+  "ColorGray5": "rgb(185,188,194)",
+  "ColorGray6": "rgb(161,166,176)",
+  "ColorGray7": "rgb(146,154,169)",
+  "ColorGray8": "rgb(133,142,158)",
+  "ColorGray9": "rgb(117,121,143)",
+  "ColorGray10": "rgb(101,104,122)",
+  "ColorGray11": "rgb(71,75,96)",
+  "ColorGray12": "rgb(60,64,81)",
+  "ColorGray13": "rgb(42,45,61)",
+  "ColorGray14": "rgb(29,31,40)",
+  "ColorGray15": "rgb(32,33,39)",
+  "ColorBlue1": "rgb(244,249,255)",
+  "ColorBlue2": "rgb(233,243,255)",
+  "ColorBlue3": "rgb(223,238,255)",
+  "ColorBlue4": "rgb(203,227,255)",
+  "ColorBlue5": "rgb(167,207,255)",
+  "ColorBlue6": "rgb(107,175,255)",
+  "ColorBlue7": "rgb(56,147,255)",
+  "ColorBlue8": "rgb(21,126,251)",
+  "ColorBlue9": "rgb(11,113,235)",
+  "ColorBlue10": "rgb(9,97,235)",
+  "ColorBlue11": "rgb(0,80,206)",
+  "ColorBlue12": "rgb(0,69,178)",
+  "ColorBlue13": "rgb(0,57,146)",
+  "ColorBlue14": "rgb(0,44,113)",
+  "ColorBlue15": "rgb(0,29,75)",
+  "ColorRed1": "rgb(255,247,249)",
+  "ColorRed2": "rgb(255,243,245)",
+  "ColorRed3": "rgb(255,233,236)",
+  "ColorRed4": "rgb(255,218,223)",
+  "ColorRed5": "rgb(255,190,198)",
+  "ColorRed6": "rgb(255,153,166)",
+  "ColorRed7": "rgb(255,111,129)",
+  "ColorRed8": "rgb(255,75,98)",
+  "ColorRed9": "rgb(255,55,80)",
+  "ColorRed10": "rgb(237,34,60)",
+  "ColorRed11": "rgb(209,17,42)",
+  "ColorRed12": "rgb(179,5,28)",
+  "ColorRed13": "rgb(148,0,20)",
+  "ColorRed14": "rgb(101,0,14)",
+  "ColorRed15": "rgb(69,0,10)",
+  "ColorYellow1": "rgb(255,252,242)",
+  "ColorYellow2": "rgb(255,249,228)",
+  "ColorYellow3": "rgb(255,246,213)",
+  "ColorYellow4": "rgb(246,227,199)",
+  "ColorYellow5": "rgb(245,218,174)",
+  "ColorYellow6": "rgb(246,205,144)",
+  "ColorYellow7": "rgb(244,191,110)",
+  "ColorYellow8": "rgb(241,178,81)",
+  "ColorYellow9": "rgb(233,160,50)",
+  "ColorYellow10": "rgb(193,134,47)",
+  "ColorYellow11": "rgb(162,114,45)",
+  "ColorYellow12": "rgb(131,93,42)",
+  "ColorYellow13": "rgb(102,75,41)",
+  "ColorYellow14": "rgb(68,54,38)",
+  "ColorYellow15": "rgb(49,40,36)",
+  "ColorGreen1": "rgb(245,253,249)",
+  "ColorGreen2": "rgb(236,253,245)",
+  "ColorGreen3": "rgb(224,251,238)",
+  "ColorGreen4": "rgb(211,244,228)",
+  "ColorGreen5": "rgb(172,237,205)",
+  "ColorGreen6": "rgb(118,226,173)",
+  "ColorGreen7": "rgb(74,211,144)",
+  "ColorGreen8": "rgb(25,204,116)",
+  "ColorGreen9": "rgb(14,186,101)",
+  "ColorGreen10": "rgb(8,175,92)",
+  "ColorGreen11": "rgb(1,144,73)",
+  "ColorGreen12": "rgb(0,100,50)",
+  "ColorGreen13": "rgb(0,73,37)",
+  "ColorGreen14": "rgb(0,51,26)",
+  "ColorGreen15": "rgb(0,26,13)",
+  "ColorPartyClientBackground": "rgb(196,223,247)",
+  "ColorPartyClientIcon": "rgb(34,127,211)",
+  "ColorPartyClientContent": "rgb(15,92,162)",
+  "ColorPartyOpposingBackground": "rgb(198,234,165)",
+  "ColorPartyOpposingIcon": "rgb(93,175,0)",
+  "ColorPartyOpposingContent": "rgb(61,115,1)",
+  "ColorPartyJointBackground": "rgb(238,233,229)",
+  "ColorPartyJointIcon": "rgb(164,146,122)",
+  "ColorPartyJointContent": "rgb(129,113,91)",
+  "ColorPartyOtherBackground": "rgb(228,233,238)",
+  "ColorPartyOtherIcon": "rgb(149,152,156)",
+  "ColorPartyOtherContent": "rgb(124,126,130)",
+  "ColorPartyCourtBackground": "rgb(253,228,192)",
+  "ColorPartyCourtIcon": "rgb(215,139,33)",
+  "ColorPartyCourtContent": "rgb(192,112,1)",
+  "LayoutHeaderHeight": "41px",
+  "LayoutToolbarHeight": "60px",
+  "LayoutActionbarHeight": "41px",
+  "Spacing5": "4px",
+  "Spacing10": "8px",
+  "Spacing15": "12px",
+  "Spacing20": "16px",
+  "Spacing25": "20px",
+  "Spacing30": "24px",
+  "Spacing40": "32px",
+  "Spacing50": "40px",
+  "Spacing60": "48px",
+  "Spacing70": "56px",
+  "Spacing80": "64px",
+  "FontFamilySystem": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+  "FontFamilyMonospace": "\"SFMono-Regular\", Consolas, \"Liberation Mono\", \"Menlo\", \"Courier\", monospace",
+  "FontWeightNormal": "normal",
+  "FontWeightMedium": 500,
+  "FontWeightBold": "bold",
+  "TypeScale1FontSize": "10px",
+  "TypeScale1LineHeight": "14px",
+  "TypeScale2FontSize": "12px",
+  "TypeScale2LineHeight": "16px",
+  "TypeScale3FontSize": "14px",
+  "TypeScale3LineHeight": "20px",
+  "TypeScale4FontSize": "16px",
+  "TypeScale4LineHeight": "24px",
+  "TypeScale5FontSize": "20px",
+  "TypeScale5LineHeight": "28px",
+  "TypeScale6FontSize": "24px",
+  "TypeScale6LineHeight": "32px"
+}