@everchron/ec-shards 0.0.12

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

@@ -0,0 +1,126 @@
+import EcsTreeListItem from '@components/tree-list/tree-list-item'
+import EcsTreeList from '@components/tree-list/tree-list'
+import EcsButton from '@components/button/button'
+import EcsCheckbox from '@components/checkbox/checkbox'
+
+export default {
+  title: 'Data/Tree List/Tree List Item',
+  component: EcsTreeListItem
+};
+
+export const treeListItem = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item :after-label="13">
+                  List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13">
+                  List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemIcon = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
+                  List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
+                  List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemSizes = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item state="active" :after-label="13" class="mb-1">
+                  List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item state="active" :after-label="13" large>
+                  Large List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemStates = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item :after-label="13" class="mb-1">
+                  Default
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" state="hover" class="mb-1">
+                  Hover
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" selectable class="mb-1">
+                  Selectable
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" selectable state="selected" class="mb-1">
+                  Selected
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" state="active" class="mb-1">
+                  Active
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" state="add" class="mb-1">
+                  Add
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13" state="shadow">
+                  Shadow
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemSelectable = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item selectable :after-label="13">
+                  Selectable List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :after-label="13">
+                  List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemDraggable = () => ({
+  components: { EcsTreeListItem, EcsTreeList },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item draggable :after-label="13">
+                  Draggable List Item
+                </ecs-tree-list-item>
+                <ecs-tree-list-item draggable :after-label="13">
+                  Draggable List Item
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemActions = () => ({
+  components: { EcsTreeListItem, EcsTreeList, EcsButton },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item state="hover">
+                  Actions (always visible)
+                  <template slot="actions">
+                    <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="sml" icon="link-remove" icon-only />
+                  </template>
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});
+
+export const treeListItemControl = () => ({
+  components: { EcsTreeListItem, EcsTreeList, EcsCheckbox },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item large selectable>
+                  Selectable
+                  <template slot="control">
+                    <ecs-checkbox />
+                  </template>
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});

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

@@ -0,0 +1,14 @@
+import EcsVideo from '@components/video/video';
+
+export default {
+  title: 'Data/Video',
+  component: EcsVideo
+};
+
+export const player = () => ({
+  components: { EcsVideo },
+  template: `<ecs-video 
+              mp4-source="https://www.w3schools.com/html/mov_bbb.mp4"
+              ogv-source="https://www.w3schools.com/html/mov_bbb.ogg"
+             />`,
+});

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"
+}

package/src/tokens/build/scss/tokens.scss

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

package/src/tokens/config.json

@@ -0,0 +1,56 @@
+{
+  "source": [
+    "src/tokens/src/**/*.json"
+  ],
+  "platforms": {
+    "scss": {
+      "transforms": [
+        "attribute/cti",
+        "name/cti/kebab"
+      ],
+      "buildPath": "src/tokens/build/scss/",
+      "files": [
+        {
+          "destination": "tokens.scss",
+          "format": "scss/variables",
+          "options": {
+            "showFileHeader": false
+          }
+        }
+      ]
+    },
+    "css": {
+      "transforms": [
+        "attribute/cti",
+        "name/cti/kebab"
+      ],
+      "buildPath": "src/tokens/build/css/",
+      "files": [
+        {
+          "destination": "tokens.css",
+          "format": "css/variables",
+          "options": {
+            "showFileHeader": false,
+            "outputReferences": true
+          }
+        }
+      ]
+    },
+    "json": {
+      "transforms": [
+        "attribute/cti",
+        "name/cti/pascal"
+      ],
+      "buildPath": "src/tokens/build/json/",
+      "files": [
+        {
+          "destination": "tokens.json",
+          "format": "json/flat",
+          "options": {
+            "showFileHeader": false
+          }
+        }
+      ]
+    }
+  }
+}

package/src/tokens/src/border-radius.json

@@ -0,0 +1,19 @@
+{
+  "border-radius": {
+    "x-small": {
+      "value": "2px"
+    },
+    "small": {
+      "value": "4px"
+    },
+    "medium": {
+      "value": "6px"
+    },
+    "large": {
+      "value": "8px"
+    },
+    "x-large": {
+      "value": "12px"
+    }
+  }
+}