@knapsack/sandbox-tokens 4.53.1--canary.3986.c6043f8.0

package/dist/design-tokens.nested.json

@@ -0,0 +1,176 @@
+{
+  "ungrouped-token": "Im Not Part of Any Group",
+  "border": {
+    "1": "red dotted 2px"
+  },
+  "breakpoint": {
+    "large": "1.5rem",
+    "medium": "480px",
+    "small": "330px",
+    "xlarge": "992px",
+    "xxlarge": "1240px",
+    "xxxlarge": "1440px"
+  },
+  "collections": {
+    "brands": {
+      "color": {
+        "color": {
+          "brandADark": "#000000",
+          "brandALight": "#000000",
+          "brandBDark": "#000000",
+          "brandBLight": "#000000"
+        },
+        "color 1": {
+          "brandADark": "#000000",
+          "brandALight": "#000000",
+          "brandBDark": "#000000",
+          "brandBLight": "#000000"
+        },
+        "primary": {
+          "brandADark": "#0a13f7",
+          "brandALight": "#3ed93f",
+          "brandBDark": "#710D55",
+          "brandBLight": "#F37491"
+        },
+        "secondary": {
+          "brandADark": "#EC487D",
+          "brandALight": "#EC487D",
+          "brandBDark": "#6A4CEC",
+          "brandBLight": "#6A4CEC"
+        }
+      },
+      "foo": {
+        "bar": {
+          "brandADark": "1px",
+          "brandALight": "1px",
+          "brandBDark": "1px",
+          "brandBLight": "1px"
+        }
+      },
+      "test": {
+        "dimension": {
+          "brandALight": "2px"
+        },
+        "primary": {
+          "brandADark": "4px",
+          "brandALight": "40px"
+        },
+        "secondary": {
+          "brandADark": "#cc2020",
+          "brandALight": "#cc2020",
+          "brandBDark": "#ACAAB6",
+          "brandBLight": "#EDECEF"
+        }
+      }
+    },
+    "density": {
+      "spacing": {
+        "large": {
+          "comfortable": "40px",
+          "compact": "16px"
+        },
+        "medium": {
+          "comfortable": "24px",
+          "compact": "16px"
+        },
+        "small": {
+          "comfortable": "8px",
+          "compact": "4px"
+        }
+      }
+    }
+  },
+  "color": {
+    "black": "#191335",
+    "white": "#ffffff",
+    "neutral": {
+      "100": "#FAFAFB",
+      "200": "#F6F6F7",
+      "300": "#EDECEF",
+      "400": "#dedce2",
+      "500": "#BFBDC6",
+      "600": "#ACAAB6",
+      "700": "#878496",
+      "800": "#191335"
+    },
+    "pink": {
+      "100": "#FFDDDB",
+      "200": "#FCB6B8",
+      "300": "#FA919F",
+      "400": "#F37491",
+      "500": "#EC487D",
+      "600": "#CA3473",
+      "700": "#AA2469",
+      "800": "#710D55"
+    },
+    "purple": {
+      "100": "#E5DBFE",
+      "200": "#C9B8FE",
+      "300": "#AA94F9",
+      "400": "#9076F3",
+      "500": "#6A4CEC",
+      "600": "#5036CB",
+      "700": "#3925AA",
+      "800": "#190F72"
+    },
+    "text": {
+      "default": "#191335",
+      "disabled": "#dedce2",
+      "muted": "#ACAAB6",
+      "white": "#ffffff"
+    }
+  },
+  "cypress": {
+    "large": "1.5rem",
+    "medium": "1rem",
+    "small": "0.5rem"
+  },
+  "media": {
+    "query": {
+      "large": "screen and (min-width: 1.5rem)",
+      "medium": "screen and (min-width: 480px)",
+      "small": "screen and (min-width: 330px)"
+    }
+  },
+  "misc": {
+    "boolean": true,
+    "duration": "100ms",
+    "isAwesome": true,
+    "isAwesome2": true,
+    "magic number": 42,
+    "shadow": "1px 1px 1px 1px #000000",
+    "some text": "Hello world"
+  },
+  "radius": {
+    "large": "1.5rem",
+    "medium": "8px",
+    "round": "160px",
+    "small": "4px"
+  },
+  "shadow": {
+    "1": "0px 5px 10px 0px #000000",
+    "2": "0px 10px 20px 0px #000000",
+    "3": "0px 15px 25px 0px #000000",
+    "4": "0px 20px 40px 0px #000000",
+    "color": "#000000"
+  },
+  "spacing scale": {
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "10": "64px",
+    "11": "80px",
+    "12": "96px",
+    "13": "160px"
+  },
+  "transition": {
+    "a": "250ms cubic-bezier(0,0,1,1) 100ms",
+    "b": "500ms cubic-bezier(0.1,1,0.3,1) 10ms"
+  }
+}

package/dist/design-tokens.scss

@@ -0,0 +1,293 @@
+$ungrouped-token: Im Not Part of Any Group;
+$border-1: red dotted 2px;
+$cypress-large: 1.5rem;
+$radius-large: $cypress-large;
+$breakpoint-large: $radius-large;
+$breakpoint-medium: 480px;
+$breakpoint-small: 330px;
+$breakpoint-xlarge: 992px;
+$breakpoint-xxlarge: 1240px;
+$breakpoint-xxxlarge: 1440px;
+$collections-brands-color-color-brand-a-dark: #000000;
+$collections-brands-color-color-brand-a-light: #000000;
+$collections-brands-color-color-brand-b-dark: #000000;
+$collections-brands-color-color-brand-b-light: #000000;
+$collections-brands-color-color-1-brand-a-dark: #000000;
+$collections-brands-color-color-1-brand-a-light: #000000;
+$collections-brands-color-color-1-brand-b-dark: #000000;
+$collections-brands-color-color-1-brand-b-light: #000000;
+$collections-brands-color-primary-brand-a-dark: #0a13f7;
+$collections-brands-color-primary-brand-a-light: #3ed93f;
+$color-pink-800: #710d55;
+$collections-brands-color-primary-brand-b-dark: $color-pink-800;
+$color-pink-400: #f37491;
+$collections-brands-color-primary-brand-b-light: $color-pink-400;
+$color-pink-500: #ec487d;
+$collections-brands-color-secondary-brand-a-dark: $color-pink-500;
+$collections-brands-color-secondary-brand-a-light: $color-pink-500;
+$color-purple-500: #6a4cec;
+$collections-brands-color-secondary-brand-b-dark: $color-purple-500;
+$collections-brands-color-secondary-brand-b-light: $color-purple-500;
+$collections-brands-foo-bar-brand-a-dark: 1px;
+$collections-brands-foo-bar-brand-a-light: 1px;
+$collections-brands-foo-bar-brand-b-dark: 1px;
+$collections-brands-foo-bar-brand-b-light: 1px;
+$collections-brands-test-dimension-brand-a-light: 2px;
+$spacing-scale-2: 4px;
+$collections-density-spacing-small-compact: $spacing-scale-2;
+$collections-brands-test-primary-brand-a-dark: $collections-density-spacing-small-compact;
+$spacing-scale-8: 40px;
+$collections-brands-test-primary-brand-a-light: $spacing-scale-8;
+$collections-brands-test-secondary-brand-a-dark: #cc2020;
+$collections-brands-test-secondary-brand-a-light: #cc2020;
+$color-neutral-600: #acaab6;
+$collections-brands-test-secondary-brand-b-dark: $color-neutral-600;
+$color-neutral-300: #edecef;
+$collections-brands-test-secondary-brand-b-light: $color-neutral-300;
+$collections-density-spacing-large-comfortable: $spacing-scale-8;
+$spacing-scale-5: 16px;
+$collections-density-spacing-large-compact: $spacing-scale-5;
+$spacing-scale-6: 24px;
+$collections-density-spacing-medium-comfortable: $spacing-scale-6;
+$collections-density-spacing-medium-compact: $spacing-scale-5;
+$spacing-scale-3: 8px;
+$collections-density-spacing-small-comfortable: $spacing-scale-3;
+$color-neutral-800: #191335;
+$color-black: $color-neutral-800;
+$color-white: #ffffff;
+$color-neutral-100: #fafafb;
+$color-neutral-200: #f6f6f7;
+$color-neutral-400: #dedce2;
+$color-neutral-500: #bfbdc6;
+$color-neutral-700: #878496;
+$color-pink-100: #ffdddb;
+$color-pink-200: #fcb6b8;
+$color-pink-300: #fa919f;
+$color-pink-600: #ca3473;
+$color-pink-700: #aa2469;
+$color-purple-100: #e5dbfe;
+$color-purple-200: #c9b8fe;
+$color-purple-300: #aa94f9;
+$color-purple-400: #9076f3;
+$color-purple-600: #5036cb;
+$color-purple-700: #3925aa;
+$color-purple-800: #190f72;
+$color-text-default: $color-neutral-800;
+$color-text-disabled: $color-neutral-400;
+$color-text-muted: $color-neutral-600;
+$color-text-white: $color-white;
+$cypress-medium: 1rem;
+$cypress-small: 0.5rem;
+$media-query-large: screen and
+  (
+    min-width: $breakpoint-large,
+  );
+$media-query-medium: screen and
+  (
+    min-width: $breakpoint-medium,
+  );
+$media-query-small: screen and
+  (
+    min-width: $breakpoint-small,
+  );
+$misc-boolean: true;
+$misc-duration: 100ms;
+$misc-is-awesome: true;
+$misc-is-awesome2: $misc-is-awesome;
+$misc-magic-number: 42;
+$misc-shadow: 1px 1px 1px 1px #000000;
+$misc-some-text: Hello world;
+$radius-medium: 8px;
+$radius-round: 160px;
+$radius-small: 4px;
+$shadow-1: 0px 5px 10px 0px #000000;
+$shadow-2: 0px 10px 20px 0px #000000;
+$shadow-3: 0px 15px 25px 0px #000000;
+$shadow-4: 0px 20px 40px 0px #000000;
+$shadow-color: #000000;
+$spacing-scale-1: 2px;
+$spacing-scale-4: 12px;
+$spacing-scale-7: 32px;
+$spacing-scale-9: 48px;
+$spacing-scale-10: 64px;
+$spacing-scale-11: 80px;
+$spacing-scale-12: 96px;
+$spacing-scale-13: 160px;
+$transition-a: 250ms cubic-bezier(0, 0, 1, 1) 100ms;
+$transition-b: 500ms cubic-bezier(0.1, 1, 0.3, 1) 10ms;
+$tokens: (
+  'ungrouped-token': $ungrouped-token,
+  'border': (
+    '1': $border-1,
+  ),
+  'breakpoint': (
+    'large': $breakpoint-large,
+    'medium': $breakpoint-medium,
+    'small': $breakpoint-small,
+    'xlarge': $breakpoint-xlarge,
+    'xxlarge': $breakpoint-xxlarge,
+    'xxxlarge': $breakpoint-xxxlarge,
+  ),
+  'collections': (
+    'brands': (
+      'color': (
+        'color': (
+          'brandADark': $collections-brands-color-color-brand-a-dark,
+          'brandALight': $collections-brands-color-color-brand-a-light,
+          'brandBDark': $collections-brands-color-color-brand-b-dark,
+          'brandBLight': $collections-brands-color-color-brand-b-light,
+        ),
+        'color 1': (
+          'brandADark': $collections-brands-color-color-1-brand-a-dark,
+          'brandALight': $collections-brands-color-color-1-brand-a-light,
+          'brandBDark': $collections-brands-color-color-1-brand-b-dark,
+          'brandBLight': $collections-brands-color-color-1-brand-b-light,
+        ),
+        'primary': (
+          'brandADark': $collections-brands-color-primary-brand-a-dark,
+          'brandALight': $collections-brands-color-primary-brand-a-light,
+          'brandBDark': $collections-brands-color-primary-brand-b-dark,
+          'brandBLight': $collections-brands-color-primary-brand-b-light,
+        ),
+        'secondary': (
+          'brandADark': $collections-brands-color-secondary-brand-a-dark,
+          'brandALight': $collections-brands-color-secondary-brand-a-light,
+          'brandBDark': $collections-brands-color-secondary-brand-b-dark,
+          'brandBLight': $collections-brands-color-secondary-brand-b-light,
+        ),
+      ),
+      'foo': (
+        'bar': (
+          'brandADark': $collections-brands-foo-bar-brand-a-dark,
+          'brandALight': $collections-brands-foo-bar-brand-a-light,
+          'brandBDark': $collections-brands-foo-bar-brand-b-dark,
+          'brandBLight': $collections-brands-foo-bar-brand-b-light,
+        ),
+      ),
+      'test': (
+        'dimension': (
+          'brandALight': $collections-brands-test-dimension-brand-a-light,
+        ),
+        'primary': (
+          'brandADark': $collections-brands-test-primary-brand-a-dark,
+          'brandALight': $collections-brands-test-primary-brand-a-light,
+        ),
+        'secondary': (
+          'brandADark': $collections-brands-test-secondary-brand-a-dark,
+          'brandALight': $collections-brands-test-secondary-brand-a-light,
+          'brandBDark': $collections-brands-test-secondary-brand-b-dark,
+          'brandBLight': $collections-brands-test-secondary-brand-b-light,
+        ),
+      ),
+    ),
+    'density': (
+      'spacing': (
+        'large': (
+          'comfortable': $collections-density-spacing-large-comfortable,
+          'compact': $collections-density-spacing-large-compact,
+        ),
+        'medium': (
+          'comfortable': $collections-density-spacing-medium-comfortable,
+          'compact': $collections-density-spacing-medium-compact,
+        ),
+        'small': (
+          'comfortable': $collections-density-spacing-small-comfortable,
+          'compact': $collections-density-spacing-small-compact,
+        ),
+      ),
+    ),
+  ),
+  'color': (
+    'black': $color-black,
+    'white': $color-white,
+    'neutral': (
+      '100': $color-neutral-100,
+      '200': $color-neutral-200,
+      '300': $color-neutral-300,
+      '400': $color-neutral-400,
+      '500': $color-neutral-500,
+      '600': $color-neutral-600,
+      '700': $color-neutral-700,
+      '800': $color-neutral-800,
+    ),
+    'pink': (
+      '100': $color-pink-100,
+      '200': $color-pink-200,
+      '300': $color-pink-300,
+      '400': $color-pink-400,
+      '500': $color-pink-500,
+      '600': $color-pink-600,
+      '700': $color-pink-700,
+      '800': $color-pink-800,
+    ),
+    'purple': (
+      '100': $color-purple-100,
+      '200': $color-purple-200,
+      '300': $color-purple-300,
+      '400': $color-purple-400,
+      '500': $color-purple-500,
+      '600': $color-purple-600,
+      '700': $color-purple-700,
+      '800': $color-purple-800,
+    ),
+    'text': (
+      'default': $color-text-default,
+      'disabled': $color-text-disabled,
+      'muted': $color-text-muted,
+      'white': $color-text-white,
+    ),
+  ),
+  'cypress': (
+    'large': $cypress-large,
+    'medium': $cypress-medium,
+    'small': $cypress-small,
+  ),
+  'media': (
+    'query': (
+      'large': $media-query-large,
+      'medium': $media-query-medium,
+      'small': $media-query-small,
+    ),
+  ),
+  'misc': (
+    'boolean': $misc-boolean,
+    'duration': $misc-duration,
+    'isAwesome': $misc-is-awesome,
+    'isAwesome2': $misc-is-awesome2,
+    'magic number': $misc-magic-number,
+    'shadow': $misc-shadow,
+    'some text': $misc-some-text,
+  ),
+  'radius': (
+    'large': $radius-large,
+    'medium': $radius-medium,
+    'round': $radius-round,
+    'small': $radius-small,
+  ),
+  'shadow': (
+    '1': $shadow-1,
+    '2': $shadow-2,
+    '3': $shadow-3,
+    '4': $shadow-4,
+    'color': $shadow-color,
+  ),
+  'spacing scale': (
+    '1': $spacing-scale-1,
+    '2': $spacing-scale-2,
+    '3': $spacing-scale-3,
+    '4': $spacing-scale-4,
+    '5': $spacing-scale-5,
+    '6': $spacing-scale-6,
+    '7': $spacing-scale-7,
+    '8': $spacing-scale-8,
+    '9': $spacing-scale-9,
+    '10': $spacing-scale-10,
+    '11': $spacing-scale-11,
+    '12': $spacing-scale-12,
+    '13': $spacing-scale-13,
+  ),
+  'transition': (
+    'a': $transition-a,
+    'b': $transition-b,
+  ),
+);