@pluralsight/design-tokens - npm Package Compare versions

Comparing version 0.0.0-experimental-6ed447-20220211 to 0.0.0-experimental-710523-20220321

build/index.js

 /**
  * Do not edit directly
- * Generated on Fri, 11 Feb 2022 19:35:42 GMT
+ * Generated on Mon, 21 Mar 2022 14:01:44 GMT
  */
 
-export const ColorFontBase = "#ff0000";
-export const ColorFontSecondary = "#00ff00";
-export const ColorFontTertiary = "#cccccc";
+export const psBackground = "hsl(249deg 63% 51% / 100%)";
+export const psBackgroundActive = "hsl(249deg 63% 34% / 100%)";
+export const psBackgroundHover = "hsl(249deg 63% 43% / 100%)";
+export const psBackgroundWeak = "hsl(249deg 63% 25% / 100%)";
+export const psBackgroundWeakActive = "hsl(249deg 63% 25% / 100%)";
+export const psBackgroundWeakHover = "hsl(248deg 63% 34% / 100%)";
+export const psBorder = "hsl(249deg 63% 59% / 100%)";
+export const psDangerBackground = "hsl(336deg 100% 36% / 100%)";
+export const psDangerBackgroundActive = "hsl(335deg 100% 18% / 100%)";
+export const psDangerBackgroundHover = "hsl(336deg 100% 27% / 100%)";
+export const psDangerBackgroundWeak = "hsl(335deg 100% 18% / 100%)";
+export const psDangerBorder = "hsl(336deg 100% 54% / 100%)";
+export const psDangerText = "hsl(336deg 100% 97% / 100%)";
+export const psDangerTextWeak = "hsl(335deg 100% 82% / 100%)";
+export const psDangerTextMedium = "hsl(336deg 100% 73% / 100%)";
+export const psInfoBackground = "hsl(202deg 100% 33% / 100%)";
+export const psInfoBackgroundActive = "hsl(202deg 100% 17% / 100%)";
+export const psInfoBackgroundHover = "hsl(202deg 100% 25% / 100%)";
+export const psInfoBackgroundWeak = "hsl(202deg 100% 17% / 100%)";
+export const psInfoBorder = "hsl(202deg 100% 50% / 100%)";
+export const psInfoText = "hsl(201deg 100% 92% / 100%)";
+export const psInfoTextWeak = "hsl(202deg 100% 75% / 100%)";
+export const psInfoTextMedium = "hsl(202deg 100% 58% / 100%)";
+export const psNeutralBackground = "hsl(238deg 30% 32% / 100%)";
+export const psNeutralBackgroundActive = "hsl(240deg 31% 25% / 100%)";
+export const psNeutralBackgroundHover = "hsl(237deg 30% 36% / 100%)";
+export const psNeutralBorder = "hsl(237deg 30% 36% / 100%)";
+export const psNeutralBorderWeak = "hsl(240deg 31% 25% / 100%)";
+export const psNeutralBorderStrong = "hsl(234deg 30% 49% / 100%)";
+export const psNeutralSurface = "hsl(251deg 42% 10% / 100%)";
+export const psNeutralSurfaceWeak = "hsl(246deg 37% 15% / 100%)";
+export const psNeutralSurfaceMedium = "hsl(245deg 35% 20% / 100%)";
+export const psNeutralSurfaceStrong = "hsl(244deg 36% 24% / 100%)";
+export const psNeutralText = "hsl(0deg 0% 100% / 100%)";
+export const psNeutralTextWeak = "hsl(235deg 30% 78% / 100%)";
+export const psNeutralTextMedium = "hsl(234deg 30% 66% / 100%)";
+export const psSuccessBackground = "hsl(156deg 99% 29% / 100%)";
+export const psSuccessBackgroundActive = "hsl(156deg 97% 15% / 100%)";
+export const psSuccessBackgroundHover = "hsl(156deg 98% 22% / 100%)";
+export const psSuccessBackgroundWeak = "hsl(156deg 97% 15% / 100%)";
+export const psSuccessBorder = "hsl(156deg 98% 44% / 100%)";
+export const psSuccessText = "hsl(156deg 100% 91% / 100%)";
+export const psSuccessTextWeak = "hsl(156deg 98% 63% / 100%)";
+export const psSuccessTextMedium = "hsl(156deg 98% 37% / 100%)";
+export const psText = "hsl(249deg 62% 92% / 100%)";
+export const psTextWeak = "hsl(248deg 63% 75% / 100%)";
+export const psTextMedium = "hsl(249deg 63% 67% / 100%)";
+export const psWarningBackground = "hsl(43deg 100% 42% / 100%)";
+export const psWarningBackgroundActive = "hsl(43deg 100% 21% / 100%)";
+export const psWarningBackgroundHover = "hsl(43deg 100% 32% / 100%)";
+export const psWarningBackgroundWeak = "hsl(43deg 100% 21% / 100%)";
+export const psWarningBorder = "hsl(43deg 100% 53% / 100%)";
+export const psWarningText = "hsl(43deg 100% 94% / 100%)";
+export const psWarningTextWeak = "hsl(43deg 100% 82% / 100%)";
+export const psWarningTextMedium = "hsl(43deg 100% 69% / 100%)";
+export const psLightBackground = "hsl(249deg 63% 43% / 100%)";
+export const psLightBackgroundActive = "hsl(249deg 63% 25% / 100%)";
+export const psLightBackgroundHover = "hsl(249deg 63% 34% / 100%)";
+export const psLightBackgroundWeak = "hsl(249deg 62% 92% / 100%)";
+export const psLightBackgroundWeakActive = "hsl(248deg 63% 75% / 100%)";
+export const psLightBackgroundWeakHover = "hsl(249deg 64% 84% / 100%)";
+export const psLightBorder = "hsl(249deg 63% 59% / 100%)";
+export const psLightDangerBackground = "hsl(336deg 100% 36% / 100%)";
+export const psLightDangerBackgroundActive = "hsl(335deg 100% 18% / 100%)";
+export const psLightDangerBackgroundHover = "hsl(336deg 100% 27% / 100%)";
+export const psLightDangerBackgroundWeak = "hsl(336deg 100% 91% / 100%)";
+export const psLightDangerBorder = "hsl(335deg 100% 64% / 100%)";
+export const psLightDangerText = "hsl(335deg 100% 18% / 100%)";
+export const psLightDangerTextWeak = "hsl(336deg 100% 36% / 100%)";
+export const psLightDangerTextMedium = "hsl(335deg 100% 64% / 100%)";
+export const psLightInfoBackground = "hsl(202deg 100% 42% / 100%)";
+export const psLightInfoBackgroundActive = "hsl(202deg 100% 25% / 100%)";
+export const psLightInfoBackgroundHover = "hsl(202deg 100% 33% / 100%)";
+export const psLightInfoBackgroundWeak = "hsl(202deg 100% 83% / 100%)";
+export const psLightInfoBorder = "hsl(202deg 100% 50% / 100%)";
+export const psLightInfoText = "hsl(202deg 100% 17% / 100%)";
+export const psLightInfoTextWeak = "hsl(202deg 100% 25% / 100%)";
+export const psLightInfoTextMedium = "hsl(202deg 100% 42% / 100%)";
+export const psLightNeutralBackground = "hsl(214deg 48% 83% / 60%)";
+export const psLightNeutralBackgroundActive = "hsl(214deg 48% 83% / 70%)";
+export const psLightNeutralBackgroundHover = "hsl(214deg 36% 66% / 30%)";
+export const psLightNeutralBorder = "hsl(214deg 36% 66% / 50%)";
+export const psLightNeutralBorderWeak = "hsl(214deg 36% 66% / 30%)";
+export const psLightNeutralBorderStrong = "hsl(214deg 35% 66% / 100%)";
+export const psLightNeutralSurface = "hsl(210deg 38% 97% / 100%)";
+export const psLightNeutralSurfaceWeak = "hsl(0deg 0% 100% / 100%)";
+export const psLightNeutralSurfaceMedium = "hsl(210deg 40% 97% / 100%)";
+export const psLightNeutralSurfaceStrong = "hsl(214deg 32% 94% / 100%)";
+export const psLightNeutralText = "hsl(214deg 36% 16% / 100%)";
+export const psLightNeutralTextWeak = "hsl(214deg 30% 35% / 100%)";
+export const psLightNeutralTextMedium = "hsl(214deg 25% 41% / 100%)";
+export const psLightSuccessBackground = "hsl(156deg 99% 29% / 100%)";
+export const psLightSuccessBackgroundActive = "hsl(156deg 97% 15% / 100%)";
+export const psLightSuccessBackgroundHover = "hsl(156deg 98% 22% / 100%)";
+export const psLightSuccessBackgroundWeak = "hsl(156deg 98% 81% / 100%)";
+export const psLightSuccessBorder = "hsl(156deg 98% 37% / 100%)";
+export const psLightSuccessText = "hsl(157deg 100% 7% / 100%)";
+export const psLightSuccessTextWeak = "hsl(156deg 98% 22% / 100%)";
+export const psLightSuccessTextMedium = "hsl(156deg 99% 29% / 100%)";
+export const psLightText = "hsl(249deg 63% 8% / 100%)";
+export const psLightTextWeak = "hsl(249deg 63% 25% / 100%)";
+export const psLightTextMedium = "hsl(249deg 63% 43% / 100%)";
+export const psLightWarningBackground = "hsl(43deg 100% 42% / 100%)";
+export const psLightWarningBackgroundActive = "hsl(43deg 100% 21% / 100%)";
+export const psLightWarningBackgroundHover = "hsl(43deg 100% 32% / 100%)";
+export const psLightWarningBackgroundWeak = "hsl(43deg 100% 88% / 100%)";
+export const psLightWarningBorder = "hsl(43deg 100% 53% / 100%)";
+export const psLightWarningText = "hsl(43deg 100% 10% / 100%)";
+export const psLightWarningTextWeak = "hsl(43deg 100% 32% / 100%)";
+export const psLightWarningTextMedium = "hsl(43deg 100% 42% / 100%)";

package.json

 {
   "name": "@pluralsight/design-tokens",
-  "version": "0.0.0-experimental-6ed447-20220211",
+  "version": "0.0.0-experimental-710523-20220321",
   "description": "Design tokens for Pluralsight.",
-  "main": "build/index.js",
+  "main": "build/common/index.js",
+  "module": "build/index.js",
   "files": [
-    "build/**/*"
+    "build/css/variables.css",
+    "build/scss/_variables.scss",
+    "build/common/index.js",
+    "build/index.js",
+    "build/index.d.ts",
+    "normalize.css",
+    "fonts.css"
   ],
+  "sideEffects": [
+    "build/css/*.css",
+    "build/scss/*.scss"
+  ],
   "scripts": {
@@ -16,3 +27,5 @@ "build": "style-dictionary build",
   "devDependencies": {
-    "style-dictionary": "^3.1.1"
+    "@types/yaml": "^1",
+    "style-dictionary": "^3.7.0",
+    "yaml": "^1.10.2"
   },
@@ -39,3 +52,4 @@ "keywords": [
   },
-  "license": "Apache 2.0"
+  "license": "Apache 2.0",
+  "packageManager": "yarn@3.1.0"
 }

README.md

@@ -1,189 +0,82 @@
-# Basic Style Dictionary
+# Design Tokens
 
-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:
+A project that creates the public tokens available for all platforms which is
+built using [style dictionary](https://amzn.github.io/style-dictionary/#/).
 
-```bash
-style-dictionary build
-```
+## Quick Start
 
-You should see something like this output:
+To get the project up an running, all you need to do is make sure your deps are installed for this workspace.
 
+In the **project root** (not this workspace), run
+
+```bash
+yarn install
 ```
-Copying starter files...
 
-Source style dictionary starter files created!
+This will setup all workspaces in this repo in addition to install all the deps
+needed to successfully use this workspace.
 
-Running `style-dictionary build` for the first time to generate build artifacts.
+### There is no dev environment
 
+With style-dictionary, you are just creating static Yaml files, so there is no dev server or anything to run while adding tokens. However, we _highly recommend_ you make sure all extensions
+that are [recommended]('../../.vsode/extensions.json) are installed in order to prevent triggering errors in our CI process.
 
-scss
-✔︎  build/scss/_variables.scss
+## Project Structure
 
-android
-✔︎  build/android/font_dimens.xml
-✔︎  build/android/colors.xml
+There are two types of tokens to create: private or public.
 
-compose
-✔︎ build/compose/StyleDictionaryColor.kt
-✔︎ build/compose/StyleDictionarySize.kt
+### Creating private tokens
 
-ios
-✔︎  build/ios/StyleDictionaryColor.h
-✔︎  build/ios/StyleDictionaryColor.m
-✔︎  build/ios/StyleDictionarySize.h
-✔︎  build/ios/StyleDictionarySize.m
+To create a new private token, simply add the token to the **base** directory. Everything inside here will get filtered out during the build process. Private tokens are only meant to be used as reference items for public tokens.
 
-ios-swift
-✔︎  build/ios-swift/StyleDictionary.swift
+### Creating public tokens
 
-ios-swift-separate-enums
-✔︎  build/ios-swift/StyleDictionaryColor.swift
-✔︎  build/ios-swift/StyleDictionarySize.swift
-```
+Public tokens are the [semantic tokens](https://design.pluralsight.com/development/packages/tokens/intro#naming-convention) we ship to each team/product within Pluralsight. Therefore, it should rarely be updated or added to unless there is a new branding **color** change.
 
-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:
+This is to help keep all of our teams apps as performant as possible since the quanity and _usage_ of tokens **can make a negative impact** in browsers.
 
-```
-├── 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
-```
+## Testing your updates
 
-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. The files built should look like these:
+To test your updates, run the build command for this workspace in the project root (not this workspace).
 
-**Android**
-
-```xml
-<!-- font_dimens.xml -->
-<resources>
-  <dimen name="size_font_small">12.00sp</dimen>
-  <dimen name="size_font_medium">16.00sp</dimen>
-  <dimen name="size_font_large">32.00sp</dimen>
-  <dimen name="size_font_base">16.00sp</dimen>
-</resources>
-
-<!-- colors.xml -->
-<resources>
-  <color name="color_base_gray_light">#ffcccccc</color>
-  <color name="color_base_gray_medium">#ff999999</color>
-  <color name="color_base_gray_dark">#ff111111</color>
-  <color name="color_base_red">#ffff0000</color>
-  <color name="color_base_green">#ff00ff00</color>
-  <color name="color_font_base">#ffff0000</color>
-  <color name="color_font_secondary">#ff00ff00</color>
-  <color name="color_font_tertiary">#ffcccccc</color>
-</resources>
+```bash
+yarn workspace @pluralsight/design-tokens run build
 ```
 
-**Compose**
+You should see something like this output:
 
-```kotlin
-object StyleDictionaryColor {
-  val colorBaseGrayDark = Color(0xff111111)
-  val colorBaseGrayLight = Color(0xffcccccc)
-  val colorBaseGrayMedium = Color(0xff999999)
-  val colorBaseGreen = Color(0xff00ff00)
-  val colorBaseRed = Color(0xffff0000)
-  val colorFontBase = Color(0xffff0000)
-  val colorFontSecondary = Color(0xff00ff00)
-  val colorFontTertiary = Color(0xffcccccc)
-}
-
-object StyleDictionarySize {
-  /** the base size of the font */
-  val sizeFontBase = 16.00.sp
-  /** the large size of the font */
-  val sizeFontLarge = 32.00.sp
-  /** the medium size of the font */
-  val sizeFontMedium = 16.00.sp
-  /** the small size of the font */
-  val sizeFontSmall = 12.00.sp
-}
 ```
+Copying files...
 
-**SCSS**
+Source style dictionary files created!
 
-```scss
-// variables.scss
-$color-base-gray-light: #cccccc;
-$color-base-gray-medium: #999999;
-$color-base-gray-dark: #111111;
-$color-base-red: #ff0000;
-$color-base-green: #00ff00;
-$color-font-base: #ff0000;
-$color-font-secondary: #00ff00;
-$color-font-tertiary: #cccccc;
-$size-font-small: 0.75rem;
-$size-font-medium: 1rem;
-$size-font-large: 2rem;
-$size-font-base: 1rem;
-```
+Running `style-dictionary build` to generate build artifacts.
 
-**iOS**
+js
+✔︎ build/index.js
 
-```objc
-#import "StyleDictionaryColor.h"
+css
+✔︎ build/css/variables.css
 
-@implementation StyleDictionaryColor
+scss
+✔︎ build/scss/_variables.scss
 
-+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
-  return [[self values] objectAtIndex:colorEnum];
-}
+android
+✔︎ build/android/font_dimens.xml
+✔︎ build/android/colors.xml
 
-+ (NSArray *)values {
-  static NSArray* colorArray;
-  static dispatch_once_t onceToken;
+ios
+✔︎ build/ios/StyleDictionaryColor.h
+✔︎ build/ios/StyleDictionaryColor.m
+No properties for StyleDictionarySize.h. File not created.
+No properties for StyleDictionarySize.m. File not created.
 
-  dispatch_once(&onceToken, ^{
-    colorArray = @[
-[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
-[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
-[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],
-[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]
-    ];
-  });
+ios-swift
+✔︎ build/ios-swift/StyleDictionary.swift
 
-  return colorArray;
-}
-
-@end
+ios-swift-separate-enums
+✔︎ build/ios-swift/StyleDictionaryColor.swift
+No properties for StyleDictionarySize.swift. File not created.
 ```
 
-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).
+Depending on which platform you are testing, just reference the build file created.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34008

increased by197.61%

Lines of code

598

increased by3886.67%

Worsened metrics

Dev dependency count

3

increased by200%

Number of package files

9

decreased by-18.18%

Number of lines in readme file

83

decreased by-56.32%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes