@penskemediacorp/larva-tokens 1.22.1 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- :root{--border-color-grey-lightest: rgb(237, 235, 235);--border-color-brand-secondary-light: rgb(0, 0, 0);--border-color-grey-light: rgb(213, 213, 213);--border-color-grey-dark: rgb(76, 81, 103);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(18, 118, 181);--border-color-grey: rgb(130, 137, 161);--border-color-brand-primary-light: rgb(236, 28, 36);--border-color-white: rgb(255, 255, 255);--border-color-brand-primary-dark: rgb(236, 28, 36);--border-color-brand-primary: rgb(0, 158, 218);--background-color-grey-light: rgb(213, 213, 213);--background-color-grey-lightest: rgb(237, 235, 235);--background-color-brand-secondary-dark: rgb(0, 0, 0);--background-color-brand-secondary-light: rgb(0, 0, 0);--background-color-grey-dark: rgb(76, 81, 103);--background-color-grey: rgb(130, 137, 161);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(18, 118, 181);--background-color-black: rgb(16, 17, 25);--background-color-brand-primary-light: rgb(236, 28, 36);--background-color-brand-primary-dark: rgb(236, 28, 36);--background-color-white: rgb(255, 255, 255);--background-color-brand-primary: rgb(0, 158, 218);--background-color-grey-darkest: rgb(43, 46, 60);--color-brand-secondary: rgb(18, 118, 181);--color-black: rgb(16, 17, 25);--color-brand-primary-light: rgb(236, 28, 36);--color-brand-primary-dark: rgb(236, 28, 36);--color-white: rgb(255, 255, 255);--color-brand-primary: rgb(0, 158, 218);--color-grey-light: rgb(213, 213, 213);--color-brand-secondary-dark: rgb(0, 0, 0);--color-brand-secondary-light: rgb(0, 0, 0);--color-grey-dark: rgb(76, 81, 103);--color-grey: rgb(130, 137, 161);--font-family-primary-fancy: "neue-haas-grotesk-display", "Arial Narrow", Arial, sans-serif;--font-family-primary: "Arial Narrow", Arial, sans-serif;--font-family-secondary-fancy: "neue-haas-grotesk-display";--font-family-secondary: Arial, serif;--font-family-body: Helvetica, Arial, sans-serif;--font-family-basic: Helvetica, Arial, sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-small: 1.1;--line-height-normal: 1.35;--line-height-copy: 1.5;--line-height-large: 1.85;--spacing-00: 0;--spacing-025: 0.25rem;--spacing-050: 0.5rem;--spacing-075: 0.75rem;--spacing-1: 1rem;--spacing-125: 1.25rem;--spacing-150: 1.5rem;--spacing-2: 2rem;--background-color-brand-accent-red: rgb(239, 132, 26);--color-brand-accent-green: rgb(0, 221, 161);--border-color-brand-accent-red: rgb(239, 132, 26);--border-color-brand-accent-blue: rgb(248, 201, 154);--background-color-brand-accent-blue: rgb(248, 201, 154);--color-grey-darkest: rgb(43, 46, 60);--background-color-brand-accent: rgb(239, 132, 26);--border-color-black: rgb(16, 17, 25);--color-brand-accent-red: rgb(239, 132, 26);--border-color-brand-accent: rgb(239, 132, 26);--background-color-brand-accent-green: rgb(0, 221, 161);--color-grey-lightest: rgb(237, 235, 235);--border-color-brand-accent-green: rgb(0, 221, 161);--font-family-accent: "Arial Narrow", Arial, sans-serif;--color-brand-accent-blue: rgb(248, 201, 154);--color-brand-accent: rgb(239, 132, 26);--border-color-grey-darkest: rgb(43, 46, 60);--font-family-accent-fancy: "acumin-pro-condensed"}
1
+ :root{--border-color-grey-lightest: rgb(237, 235, 235);--border-color-brand-secondary-light: rgb(0, 0, 0);--border-color-grey-light: rgb(213, 213, 213);--border-color-grey-dark: rgb(76, 81, 103);--border-color-brand-secondary-dark: rgb(0, 0, 0);--border-color-brand-secondary: rgb(18, 118, 181);--border-color-grey: rgb(130, 137, 161);--border-color-brand-primary-light: rgb(236, 28, 36);--border-color-white: rgb(255, 255, 255);--border-color-brand-primary-dark: rgb(236, 28, 36);--border-color-brand-primary: rgb(0, 158, 218);--background-color-grey-light: rgb(213, 213, 213);--background-color-grey-lightest: rgb(237, 235, 235);--background-color-brand-secondary-dark: rgb(0, 0, 0);--background-color-brand-secondary-light: rgb(0, 0, 0);--background-color-grey-dark: rgb(76, 81, 103);--background-color-grey: rgb(130, 137, 161);--background-color-body: rgb(255, 255, 255);--background-color-brand-secondary: rgb(18, 118, 181);--background-color-black: rgb(16, 17, 25);--background-color-brand-primary-light: rgb(236, 28, 36);--background-color-brand-primary-dark: rgb(236, 28, 36);--background-color-white: rgb(255, 255, 255);--background-color-brand-primary: rgb(0, 158, 218);--background-color-grey-darkest: rgb(43, 46, 60);--color-brand-secondary: rgb(18, 118, 181);--color-black: rgb(16, 17, 25);--color-brand-primary-light: rgb(236, 28, 36);--color-brand-primary-dark: rgb(236, 28, 36);--color-white: rgb(255, 255, 255);--color-brand-primary: rgb(0, 158, 218);--color-grey-light: rgb(213, 213, 213);--color-brand-secondary-dark: rgb(0, 0, 0);--color-brand-secondary-light: rgb(0, 0, 0);--color-grey-dark: rgb(76, 81, 103);--color-grey: rgb(130, 137, 161);--font-family-primary-fancy: "neue-haas-grotesk-display", "Arial Narrow", Arial, sans-serif;--font-family-primary: "Arial Narrow", Arial, sans-serif;--font-family-secondary-fancy: "neue-haas-grotesk-display";--font-family-secondary: Arial, serif;--font-family-body: Helvetica, Arial, sans-serif;--font-family-basic: Helvetica, Arial, sans-serif;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--line-height-small: 1.1;--line-height-normal: 1.35;--line-height-copy: 1.5;--line-height-large: 1.85;--spacing-00: 0;--spacing-025: 0.25rem;--spacing-050: 0.5rem;--spacing-075: 0.75rem;--spacing-1: 1rem;--spacing-125: 1.25rem;--spacing-150: 1.5rem;--spacing-2: 2rem;--color-brand-accent-green: rgb(0, 221, 161);--border-color-brand-accent-light-orange: rgb(248, 201, 154);--background-color-brand-accent-light-orange: rgb(248, 201, 154);--color-grey-darkest: rgb(43, 46, 60);--color-brand-accent-orange: rgb(239, 132, 26);--border-color-black: rgb(16, 17, 25);--background-color-brand-accent-green: rgb(0, 221, 161);--color-grey-lightest: rgb(237, 235, 235);--border-color-brand-accent-green: rgb(0, 221, 161);--font-family-accent: "Arial Narrow", Arial, sans-serif;--color-brand-accent-light-orange: rgb(248, 201, 154);--border-color-brand-accent-orange: rgb(239, 132, 26);--background-color-brand-accent-orange: rgb(239, 132, 26);--border-color-grey-darkest: rgb(43, 46, 60);--font-family-accent-fancy: "acumin-pro-condensed"}
package/build/bbesp.json CHANGED
@@ -56,22 +56,19 @@
56
56
  "SPACING_125": "1.25rem",
57
57
  "SPACING_150": "1.5rem",
58
58
  "SPACING_2": "2rem",
59
- "BACKGROUND_COLOR_BRAND_ACCENT_RED": "rgb(239, 132, 26)",
60
59
  "COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
61
- "BORDER_COLOR_BRAND_ACCENT_RED": "rgb(239, 132, 26)",
62
- "BORDER_COLOR_BRAND_ACCENT_BLUE": "rgb(248, 201, 154)",
63
- "BACKGROUND_COLOR_BRAND_ACCENT_BLUE": "rgb(248, 201, 154)",
60
+ "BORDER_COLOR_BRAND_ACCENT_LIGHT_ORANGE": "rgb(248, 201, 154)",
61
+ "BACKGROUND_COLOR_BRAND_ACCENT_LIGHT_ORANGE": "rgb(248, 201, 154)",
64
62
  "COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
65
- "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
63
+ "COLOR_BRAND_ACCENT_ORANGE": "rgb(239, 132, 26)",
66
64
  "BORDER_COLOR_BLACK": "rgb(16, 17, 25)",
67
- "COLOR_BRAND_ACCENT_RED": "rgb(239, 132, 26)",
68
- "BORDER_COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
69
65
  "BACKGROUND_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
70
66
  "COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
71
67
  "BORDER_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
72
68
  "FONT_FAMILY_ACCENT": "'Arial Narrow', Arial, sans-serif",
73
- "COLOR_BRAND_ACCENT_BLUE": "rgb(248, 201, 154)",
74
- "COLOR_BRAND_ACCENT": "rgb(239, 132, 26)",
69
+ "COLOR_BRAND_ACCENT_LIGHT_ORANGE": "rgb(248, 201, 154)",
70
+ "BORDER_COLOR_BRAND_ACCENT_ORANGE": "rgb(239, 132, 26)",
71
+ "BACKGROUND_COLOR_BRAND_ACCENT_ORANGE": "rgb(239, 132, 26)",
75
72
  "BORDER_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
76
73
  "FONT_FAMILY_ACCENT_FANCY": "'acumin-pro-condensed'"
77
74
  }
@@ -70,23 +70,20 @@ $bbesp-map: (
70
70
  'spacing-150': (1.5rem),
71
71
  /* Used for margins and padding only. */
72
72
  'spacing-2': (2rem),
73
- 'background-color-brand-accent-red': (rgb(239, 132, 26)),
74
73
  'color-brand-accent-green': (rgb(0, 221, 161)),
75
- 'border-color-brand-accent-red': (rgb(239, 132, 26)),
76
- 'border-color-brand-accent-blue': (rgb(248, 201, 154)),
77
- 'background-color-brand-accent-blue': (rgb(248, 201, 154)),
74
+ 'border-color-brand-accent-light-orange': (rgb(248, 201, 154)),
75
+ 'background-color-brand-accent-light-orange': (rgb(248, 201, 154)),
78
76
  'color-grey-darkest': (rgb(43, 46, 60)),
79
- 'background-color-brand-accent': (rgb(239, 132, 26)),
77
+ 'color-brand-accent-orange': (rgb(239, 132, 26)),
80
78
  'border-color-black': (rgb(16, 17, 25)),
81
- 'color-brand-accent-red': (rgb(239, 132, 26)),
82
- 'border-color-brand-accent': (rgb(239, 132, 26)),
83
79
  'background-color-brand-accent-green': (rgb(0, 221, 161)),
84
80
  'color-grey-lightest': (rgb(237, 235, 235)),
85
81
  'border-color-brand-accent-green': (rgb(0, 221, 161)),
86
82
  /* The fallback for the accent font */
87
83
  'font-family-accent': ('Arial Narrow', Arial, sans-serif),
88
- 'color-brand-accent-blue': (rgb(248, 201, 154)),
89
- 'color-brand-accent': (rgb(239, 132, 26)),
84
+ 'color-brand-accent-light-orange': (rgb(248, 201, 154)),
85
+ 'border-color-brand-accent-orange': (rgb(239, 132, 26)),
86
+ 'background-color-brand-accent-orange': (rgb(239, 132, 26)),
90
87
  'border-color-grey-darkest': (rgb(43, 46, 60)),
91
88
  /* The accent webfont, loaded async */
92
89
  'font-family-accent-fancy': ('acumin-pro-condensed'),
@@ -636,13 +636,6 @@
636
636
  "originalValue": "2rem",
637
637
  "name": "SPACING_2"
638
638
  },
639
- "BACKGROUND_COLOR_BRAND_ACCENT_RED": {
640
- "value": "rgb(239, 132, 26)",
641
- "type": "color",
642
- "category": "background-color",
643
- "originalValue": "#EF841A",
644
- "name": "BACKGROUND_COLOR_BRAND_ACCENT_RED"
645
- },
646
639
  "COLOR_BRAND_ACCENT_GREEN": {
647
640
  "value": "rgb(0, 221, 161)",
648
641
  "type": "color",
@@ -650,26 +643,19 @@
650
643
  "originalValue": "#00DDA1",
651
644
  "name": "COLOR_BRAND_ACCENT_GREEN"
652
645
  },
653
- "BORDER_COLOR_BRAND_ACCENT_RED": {
654
- "value": "rgb(239, 132, 26)",
655
- "type": "color",
656
- "category": "hr-color",
657
- "originalValue": "#EF841A",
658
- "name": "BORDER_COLOR_BRAND_ACCENT_RED"
659
- },
660
- "BORDER_COLOR_BRAND_ACCENT_BLUE": {
646
+ "BORDER_COLOR_BRAND_ACCENT_LIGHT_ORANGE": {
661
647
  "value": "rgb(248, 201, 154)",
662
648
  "type": "color",
663
649
  "category": "hr-color",
664
650
  "originalValue": "#F8C99A",
665
- "name": "BORDER_COLOR_BRAND_ACCENT_BLUE"
651
+ "name": "BORDER_COLOR_BRAND_ACCENT_LIGHT_ORANGE"
666
652
  },
667
- "BACKGROUND_COLOR_BRAND_ACCENT_BLUE": {
653
+ "BACKGROUND_COLOR_BRAND_ACCENT_LIGHT_ORANGE": {
668
654
  "value": "rgb(248, 201, 154)",
669
655
  "type": "color",
670
656
  "category": "background-color",
671
657
  "originalValue": "#F8C99A",
672
- "name": "BACKGROUND_COLOR_BRAND_ACCENT_BLUE"
658
+ "name": "BACKGROUND_COLOR_BRAND_ACCENT_LIGHT_ORANGE"
673
659
  },
674
660
  "COLOR_GREY_DARKEST": {
675
661
  "value": "rgb(43, 46, 60)",
@@ -678,12 +664,12 @@
678
664
  "originalValue": "#2B2E3C",
679
665
  "name": "COLOR_GREY_DARKEST"
680
666
  },
681
- "BACKGROUND_COLOR_BRAND_ACCENT": {
667
+ "COLOR_BRAND_ACCENT_ORANGE": {
682
668
  "value": "rgb(239, 132, 26)",
683
669
  "type": "color",
684
- "category": "background-color",
670
+ "category": "text-color",
685
671
  "originalValue": "#EF841A",
686
- "name": "BACKGROUND_COLOR_BRAND_ACCENT"
672
+ "name": "COLOR_BRAND_ACCENT_ORANGE"
687
673
  },
688
674
  "BORDER_COLOR_BLACK": {
689
675
  "value": "rgb(16, 17, 25)",
@@ -692,20 +678,6 @@
692
678
  "originalValue": "#101119",
693
679
  "name": "BORDER_COLOR_BLACK"
694
680
  },
695
- "COLOR_BRAND_ACCENT_RED": {
696
- "value": "rgb(239, 132, 26)",
697
- "type": "color",
698
- "category": "text-color",
699
- "originalValue": "#EF841A",
700
- "name": "COLOR_BRAND_ACCENT_RED"
701
- },
702
- "BORDER_COLOR_BRAND_ACCENT": {
703
- "value": "rgb(239, 132, 26)",
704
- "type": "color",
705
- "category": "hr-color",
706
- "originalValue": "#EF841A",
707
- "name": "BORDER_COLOR_BRAND_ACCENT"
708
- },
709
681
  "BACKGROUND_COLOR_BRAND_ACCENT_GREEN": {
710
682
  "value": "rgb(0, 221, 161)",
711
683
  "type": "color",
@@ -735,19 +707,26 @@
735
707
  "originalValue": "'Arial Narrow', Arial, sans-serif",
736
708
  "name": "FONT_FAMILY_ACCENT"
737
709
  },
738
- "COLOR_BRAND_ACCENT_BLUE": {
710
+ "COLOR_BRAND_ACCENT_LIGHT_ORANGE": {
739
711
  "value": "rgb(248, 201, 154)",
740
712
  "type": "color",
741
713
  "category": "text-color",
742
714
  "originalValue": "#F8C99A",
743
- "name": "COLOR_BRAND_ACCENT_BLUE"
715
+ "name": "COLOR_BRAND_ACCENT_LIGHT_ORANGE"
744
716
  },
745
- "COLOR_BRAND_ACCENT": {
717
+ "BORDER_COLOR_BRAND_ACCENT_ORANGE": {
746
718
  "value": "rgb(239, 132, 26)",
747
719
  "type": "color",
748
- "category": "text-color",
720
+ "category": "hr-color",
721
+ "originalValue": "#EF841A",
722
+ "name": "BORDER_COLOR_BRAND_ACCENT_ORANGE"
723
+ },
724
+ "BACKGROUND_COLOR_BRAND_ACCENT_ORANGE": {
725
+ "value": "rgb(239, 132, 26)",
726
+ "type": "color",
727
+ "category": "background-color",
749
728
  "originalValue": "#EF841A",
750
- "name": "COLOR_BRAND_ACCENT"
729
+ "name": "BACKGROUND_COLOR_BRAND_ACCENT_ORANGE"
751
730
  },
752
731
  "BORDER_COLOR_GREY_DARKEST": {
753
732
  "value": "rgb(43, 46, 60)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@penskemediacorp/larva-tokens",
3
- "version": "1.22.1",
3
+ "version": "1.26.0",
4
4
  "description": "Design tokens",
5
5
  "author": "laras126 <laras126@gmail.com>",
6
6
  "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -34,5 +34,5 @@
34
34
  "plugin-error": "^1.0.1",
35
35
  "sass": "^1.54.0"
36
36
  },
37
- "gitHead": "707d53abbabec9dbb55645e25e40c8051d48fbfb"
37
+ "gitHead": "b9202e08f96e47041512b3b1a743c58f89b39152"
38
38
  }
@@ -757,22 +757,7 @@
757
757
 
758
758
  <tr>
759
759
  <th scope="row">
760
- <code>border-color-brand-accent-red</code>
761
- </th>
762
- <td>
763
- <code>rgb(239, 132, 26)</code>
764
- </td>
765
-
766
- <td>
767
- <hr style="border-top-color: rgb(239, 132, 26);" />
768
- </td>
769
-
770
- <td></td>
771
- </tr>
772
-
773
- <tr>
774
- <th scope="row">
775
- <code>border-color-brand-accent-blue</code>
760
+ <code>border-color-brand-accent-light-orange</code>
776
761
  </th>
777
762
  <td>
778
763
  <code>rgb(248, 201, 154)</code>
@@ -802,14 +787,14 @@
802
787
 
803
788
  <tr>
804
789
  <th scope="row">
805
- <code>border-color-brand-accent</code>
790
+ <code>border-color-brand-accent-green</code>
806
791
  </th>
807
792
  <td>
808
- <code>rgb(239, 132, 26)</code>
793
+ <code>rgb(0, 221, 161)</code>
809
794
  </td>
810
795
 
811
796
  <td>
812
- <hr style="border-top-color: rgb(239, 132, 26);" />
797
+ <hr style="border-top-color: rgb(0, 221, 161);" />
813
798
  </td>
814
799
 
815
800
  <td></td>
@@ -817,14 +802,14 @@
817
802
 
818
803
  <tr>
819
804
  <th scope="row">
820
- <code>border-color-brand-accent-green</code>
805
+ <code>border-color-brand-accent-orange</code>
821
806
  </th>
822
807
  <td>
823
- <code>rgb(0, 221, 161)</code>
808
+ <code>rgb(239, 132, 26)</code>
824
809
  </td>
825
810
 
826
811
  <td>
827
- <hr style="border-top-color: rgb(0, 221, 161);" />
812
+ <hr style="border-top-color: rgb(239, 132, 26);" />
828
813
  </td>
829
814
 
830
815
  <td></td>
@@ -1019,18 +1004,7 @@
1019
1004
 
1020
1005
  <tr>
1021
1006
  <th scope="row">
1022
- <code>background-color-brand-accent-red</code>
1023
- </th>
1024
- <td>
1025
- <code>rgb(239, 132, 26)</code>
1026
- </td>
1027
- <td style="background-color: rgb(239, 132, 26); border: 1px solid #f6f6f6;"></td>
1028
- <td></td>
1029
- </tr>
1030
-
1031
- <tr>
1032
- <th scope="row">
1033
- <code>background-color-brand-accent-blue</code>
1007
+ <code>background-color-brand-accent-light-orange</code>
1034
1008
  </th>
1035
1009
  <td>
1036
1010
  <code>rgb(248, 201, 154)</code>
@@ -1041,23 +1015,23 @@
1041
1015
 
1042
1016
  <tr>
1043
1017
  <th scope="row">
1044
- <code>background-color-brand-accent</code>
1018
+ <code>background-color-brand-accent-green</code>
1045
1019
  </th>
1046
1020
  <td>
1047
- <code>rgb(239, 132, 26)</code>
1021
+ <code>rgb(0, 221, 161)</code>
1048
1022
  </td>
1049
- <td style="background-color: rgb(239, 132, 26); border: 1px solid #f6f6f6;"></td>
1023
+ <td style="background-color: rgb(0, 221, 161); border: 1px solid #f6f6f6;"></td>
1050
1024
  <td></td>
1051
1025
  </tr>
1052
1026
 
1053
1027
  <tr>
1054
1028
  <th scope="row">
1055
- <code>background-color-brand-accent-green</code>
1029
+ <code>background-color-brand-accent-orange</code>
1056
1030
  </th>
1057
1031
  <td>
1058
- <code>rgb(0, 221, 161)</code>
1032
+ <code>rgb(239, 132, 26)</code>
1059
1033
  </td>
1060
- <td style="background-color: rgb(0, 221, 161); border: 1px solid #f6f6f6;"></td>
1034
+ <td style="background-color: rgb(239, 132, 26); border: 1px solid #f6f6f6;"></td>
1061
1035
  <td></td>
1062
1036
  </tr>
1063
1037
  </tbody>
@@ -1281,7 +1255,7 @@
1281
1255
 
1282
1256
  <tr>
1283
1257
  <th scope="row">
1284
- <code>color-brand-accent-red</code>
1258
+ <code>color-brand-accent-orange</code>
1285
1259
  </th>
1286
1260
  <td>
1287
1261
  <code>rgb(239, 132, 26)</code>
@@ -1311,7 +1285,7 @@
1311
1285
 
1312
1286
  <tr>
1313
1287
  <th scope="row">
1314
- <code>color-brand-accent-blue</code>
1288
+ <code>color-brand-accent-light-orange</code>
1315
1289
  </th>
1316
1290
  <td>
1317
1291
  <code>rgb(248, 201, 154)</code>
@@ -1321,21 +1295,6 @@
1321
1295
  The quick brown fox jumps over the lazy dog.
1322
1296
  </td>
1323
1297
 
1324
- <td></td>
1325
- </tr>
1326
-
1327
- <tr>
1328
- <th scope="row">
1329
- <code>color-brand-accent</code>
1330
- </th>
1331
- <td>
1332
- <code>rgb(239, 132, 26)</code>
1333
- </td>
1334
-
1335
- <td style="background-color: #f6f6f6; color: rgb(239, 132, 26);">
1336
- The quick brown fox jumps over the lazy dog.
1337
- </td>
1338
-
1339
1298
  <td></td>
1340
1299
  </tr>
1341
1300
  </tbody>