Skip to content

Commit

Permalink
feat(vars): build color-mod (#953)
Browse files Browse the repository at this point in the history
  • Loading branch information
@reme3d2y
reme3d2y authored Jan 21, 2022
1 parent 2d916c1 commit aa64366
Show file tree
Hide file tree
Showing 5 changed files with 271 additions and 265 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"start:quick": "RDTL=off yarn start",
"build-storybook": "build-storybook -o build -s ./.storybook/public --quiet",
"serve-storybook": "http-server build -p 9009",
"update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix",
"update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix && prettier --write \"./packages/{themes,vars}/**/*.css\"",
"update-typography": "node ./tools/update-typography.js",
"lint": "yarn lint:css && yarn lint:js",
"lint:css": "stylelint ./packages/**/*.css",
Expand Down
14 changes: 7 additions & 7 deletions packages/vars/src/colors-addons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,11 @@
--color-static-status-purple: #673ab7;
--color-static-status-red: #d91d0b;
--color-static-status-teal: #219187;
--color-static-status-blue-alpha-10: color-mod(#007aff alpha(10%));
--color-static-status-green-alpha-10: color-mod(#13a463 alpha(10%));
--color-static-status-grey-alpha-10: color-mod(#6d7986 alpha(10%));
--color-static-status-orange-alpha-10: color-mod(#de6a00 alpha(10%));
--color-static-status-purple-alpha-10: color-mod(#673ab7 alpha(10%));
--color-static-status-red-alpha-10: color-mod(#d91d0b alpha(10%));
--color-static-status-teal-alpha-10: color-mod(#219187 alpha(10%));
--color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
--color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
--color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
--color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
--color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
--color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
--color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
}
240 changes: 120 additions & 120 deletions packages/vars/src/colors-bluetint.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,124 +127,124 @@
--color-static-text-tertiary-dark-transparent: rgba(60, 60, 67, 0.3);
--color-static-text-tertiary-light: #464649;
--color-static-text-tertiary-light-transparent: rgba(235, 235, 245, 0.3);
--color-dark-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
--color-dark-bg-accent-tint-7: color-mod(#ef3124 tint(7%));
--color-dark-bg-accent-tint-10: color-mod(#ef3124 tint(10%));
--color-dark-bg-accent-tint-15: color-mod(#ef3124 tint(15%));
--color-dark-bg-accent-tint-30: color-mod(#ef3124 tint(30%));
--color-dark-bg-neutral-alpha-30: color-mod(#3a3a3c alpha(30%));
--color-dark-bg-neutral-tint-7: color-mod(#3a3a3c tint(7%));
--color-dark-bg-neutral-tint-10: color-mod(#3a3a3c tint(10%));
--color-dark-bg-neutral-tint-15: color-mod(#3a3a3c tint(15%));
--color-dark-bg-neutral-tint-30: color-mod(#3a3a3c tint(30%));
--color-dark-bg-neutral-shade-15: color-mod(#3a3a3c shade(15%));
--color-dark-bg-primary-alpha-8: color-mod(#121212 alpha(8%));
--color-dark-bg-primary-inverted-alpha-3: color-mod(#fff alpha(3%));
--color-dark-bg-primary-inverted-alpha-7: color-mod(#fff alpha(7%));
--color-dark-bg-primary-inverted-alpha-10: color-mod(#fff alpha(10%));
--color-dark-bg-primary-inverted-alpha-15: color-mod(#fff alpha(15%));
--color-dark-bg-primary-inverted-alpha-20: color-mod(#fff alpha(20%));
--color-dark-bg-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
--color-dark-bg-primary-inverted-alpha-50: color-mod(#fff alpha(50%));
--color-dark-bg-secondary-inverted-alpha-7: color-mod(#f3f4f5 alpha(7%));
--color-dark-bg-secondary-inverted-alpha-15: color-mod(#f3f4f5 alpha(15%));
--color-dark-bg-tertiary-tint-7: color-mod(#2c2c2e tint(7%));
--color-dark-border-tertiary-inverted-alpha-30: color-mod(#f3f4f5 alpha(30%));
--color-dark-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
--color-dark-graphic-accent-tint-10: color-mod(#ef3124 tint(10%));
--color-dark-graphic-accent-tint-30: color-mod(#ef3124 tint(30%));
--color-dark-graphic-negative-shade-30: color-mod(#d91d0b shade(30%));
--color-dark-graphic-negative-shade-50: color-mod(#d91d0b shade(50%));
--color-dark-graphic-neutral-tint-10: color-mod(#2a2a2c tint(10%));
--color-dark-graphic-positive-tint-10: color-mod(#2fc26e tint(10%));
--color-dark-graphic-positive-tint-30: color-mod(#2fc26e tint(30%));
--color-dark-graphic-primary-alpha-30: color-mod(#fff alpha(30%));
--color-dark-graphic-primary-alpha-40: color-mod(#fff alpha(40%));
--color-dark-graphic-primary-alpha-50: color-mod(#fff alpha(50%));
--color-dark-graphic-primary-shade-30: color-mod(#fff shade(30%));
--color-dark-graphic-primary-shade-50: color-mod(#fff shade(50%));
--color-dark-graphic-primary-tint-10: color-mod(#fff tint(10%));
--color-dark-graphic-primary-tint-30: color-mod(#fff tint(30%));
--color-dark-graphic-secondary-alpha-30: color-mod(#8d8d93 alpha(30%));
--color-dark-graphic-secondary-tint-30: color-mod(#8d8d93 tint(30%));
--color-dark-graphic-secondary-tint-50: color-mod(#8d8d93 tint(50%));
--color-dark-text-link-shade-30: color-mod(#0072ef shade(30%));
--color-dark-text-link-shade-50: color-mod(#0072ef shade(50%));
--color-dark-text-link-tint-20: color-mod(#0072ef tint(20%));
--color-dark-text-link-tint-40: color-mod(#0072ef tint(40%));
--color-dark-text-primary-alpha-30: color-mod(#fff alpha(30%));
--color-dark-text-primary-shade-30: color-mod(#fff shade(30%));
--color-dark-text-primary-shade-50: color-mod(#fff shade(50%));
--color-dark-text-primary-tint-20: color-mod(#fff tint(20%));
--color-dark-text-primary-tint-40: color-mod(#fff tint(40%));
--color-dark-text-primary-inverted-alpha-40: color-mod(#000 alpha(40%));
--color-dark-text-primary-inverted-shade-30: color-mod(#000 shade(30%));
--color-dark-text-primary-inverted-shade-50: color-mod(#000 shade(50%));
--color-dark-text-secondary-shade-30: color-mod(#8d8d93 shade(30%));
--color-dark-text-secondary-shade-50: color-mod(#8d8d93 shade(50%));
--color-dark-text-secondary-tint-20: color-mod(#8d8d93 tint(20%));
--color-dark-text-secondary-tint-40: color-mod(#8d8d93 tint(40%));
--color-dark-text-secondary-inverted-shade-30: color-mod(#8a8a8e shade(30%));
--color-dark-text-secondary-inverted-shade-50: color-mod(#8a8a8e shade(50%));
--color-light-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
--color-light-bg-accent-shade-7: color-mod(#ef3124 shade(7%));
--color-light-bg-accent-shade-10: color-mod(#ef3124 shade(10%));
--color-light-bg-accent-shade-15: color-mod(#ef3124 shade(15%));
--color-light-bg-accent-shade-30: color-mod(#ef3124 shade(30%));
--color-light-bg-neutral-alpha-30: color-mod(#dcdcdd alpha(30%));
--color-light-bg-neutral-shade-7: color-mod(#dcdcdd shade(7%));
--color-light-bg-neutral-shade-10: color-mod(#dcdcdd shade(10%));
--color-light-bg-neutral-shade-15: color-mod(#dcdcdd shade(15%));
--color-light-bg-neutral-shade-30: color-mod(#dcdcdd shade(30%));
--color-light-bg-neutral-tint-15: color-mod(#dcdcdd tint(15%));
--color-light-bg-primary-alpha-8: color-mod(#fff alpha(8%));
--color-light-bg-primary-inverted-alpha-3: color-mod(#121212 alpha(3%));
--color-light-bg-primary-inverted-alpha-7: color-mod(#121212 alpha(7%));
--color-light-bg-primary-inverted-alpha-10: color-mod(#121212 alpha(10%));
--color-light-bg-primary-inverted-alpha-15: color-mod(#121212 alpha(15%));
--color-light-bg-primary-inverted-alpha-20: color-mod(#121212 alpha(20%));
--color-light-bg-primary-inverted-alpha-40: color-mod(#121212 alpha(40%));
--color-light-bg-primary-inverted-alpha-50: color-mod(#121212 alpha(50%));
--color-light-bg-secondary-inverted-alpha-7: color-mod(#202022 alpha(7%));
--color-light-bg-secondary-inverted-alpha-15: color-mod(#202022 alpha(15%));
--color-light-bg-tertiary-shade-7: color-mod(#e9e9eb shade(7%));
--color-light-border-tertiary-inverted-alpha-30: color-mod(#1c1c1e alpha(30%));
--color-light-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
--color-light-graphic-accent-shade-10: color-mod(#ef3124 shade(10%));
--color-light-graphic-accent-shade-30: color-mod(#ef3124 shade(30%));
--color-light-graphic-negative-tint-30: color-mod(#f15045 tint(30%));
--color-light-graphic-negative-tint-50: color-mod(#f15045 tint(50%));
--color-light-graphic-neutral-shade-10: color-mod(#dcdcdd shade(10%));
--color-light-graphic-positive-shade-10: color-mod(#2fc26e shade(10%));
--color-light-graphic-positive-shade-30: color-mod(#2fc26e shade(30%));
--color-light-graphic-primary-alpha-30: color-mod(#000 alpha(30%));
--color-light-graphic-primary-alpha-40: color-mod(#000 alpha(40%));
--color-light-graphic-primary-alpha-50: color-mod(#000 alpha(50%));
--color-light-graphic-primary-tint-30: color-mod(#000 tint(30%));
--color-light-graphic-primary-tint-50: color-mod(#000 tint(50%));
--color-light-graphic-primary-shade-10: color-mod(#000 shade(10%));
--color-light-graphic-primary-shade-30: color-mod(#000 shade(30%));
--color-light-graphic-secondary-alpha-30: color-mod(#8a8a8e alpha(30%));
--color-light-graphic-secondary-shade-30: color-mod(#8a8a8e shade(30%));
--color-light-graphic-secondary-shade-50: color-mod(#8a8a8e shade(50%));
--color-light-text-link-tint-30: color-mod(#0072ef tint(30%));
--color-light-text-link-tint-50: color-mod(#0072ef tint(50%));
--color-light-text-link-shade-20: color-mod(#0072ef shade(20%));
--color-light-text-link-shade-40: color-mod(#0072ef shade(40%));
--color-light-text-primary-alpha-30: color-mod(#000 alpha(30%));
--color-light-text-primary-tint-30: color-mod(#000 tint(30%));
--color-light-text-primary-tint-50: color-mod(#000 tint(50%));
--color-light-text-primary-shade-20: color-mod(#000 shade(20%));
--color-light-text-primary-shade-40: color-mod(#000 shade(40%));
--color-light-text-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
--color-light-text-primary-inverted-tint-30: color-mod(#fff tint(30%));
--color-light-text-primary-inverted-tint-50: color-mod(#fff tint(50%));
--color-light-text-secondary-tint-30: color-mod(#8a8a8e tint(30%));
--color-light-text-secondary-tint-50: color-mod(#8a8a8e tint(50%));
--color-light-text-secondary-shade-20: color-mod(#8a8a8e shade(20%));
--color-light-text-secondary-shade-40: color-mod(#8a8a8e shade(40%));
--color-light-text-secondary-inverted-tint-30: color-mod(#8d8d93 tint(30%));
--color-light-text-secondary-inverted-tint-50: color-mod(#8d8d93 tint(50%));
--color-static-bg-primary-dark-alpha-10: color-mod(#121212 alpha(10%));
--color-static-bg-primary-dark-alpha-20: color-mod(#121212 alpha(20%));
--color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
--color-dark-bg-accent-tint-7: rgb(240, 63, 51);
--color-dark-bg-accent-tint-10: rgb(241, 70, 58);
--color-dark-bg-accent-tint-15: rgb(241, 80, 69);
--color-dark-bg-accent-tint-30: rgb(244, 111, 102);
--color-dark-bg-neutral-alpha-30: rgba(58, 58, 60, 0.3);
--color-dark-bg-neutral-tint-7: rgb(72, 72, 74);
--color-dark-bg-neutral-tint-10: rgb(78, 78, 80);
--color-dark-bg-neutral-tint-15: rgb(88, 88, 89);
--color-dark-bg-neutral-tint-30: rgb(117, 117, 119);
--color-dark-bg-neutral-shade-15: rgb(49, 49, 51);
--color-dark-bg-primary-alpha-8: rgba(18, 18, 18, 0.08);
--color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
--color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
--color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
--color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
--color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
--color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
--color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
--color-dark-bg-secondary-inverted-alpha-7: rgba(243, 244, 245, 0.07);
--color-dark-bg-secondary-inverted-alpha-15: rgba(243, 244, 245, 0.15);
--color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
--color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
--color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
--color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
--color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
--color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
--color-dark-graphic-negative-shade-50: rgb(109, 15, 6);
--color-dark-graphic-neutral-tint-10: rgb(63, 63, 65);
--color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
--color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
--color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
--color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
--color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
--color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
--color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
--color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
--color-dark-graphic-primary-tint-30: rgb(255, 255, 255);
--color-dark-graphic-secondary-alpha-30: rgba(141, 141, 147, 0.3);
--color-dark-graphic-secondary-tint-30: rgb(175, 175, 179);
--color-dark-graphic-secondary-tint-50: rgb(198, 198, 201);
--color-dark-text-link-shade-30: rgb(0, 80, 167);
--color-dark-text-link-shade-50: rgb(0, 57, 120);
--color-dark-text-link-tint-20: rgb(51, 142, 242);
--color-dark-text-link-tint-40: rgb(102, 170, 245);
--color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
--color-dark-text-primary-shade-30: rgb(179, 179, 179);
--color-dark-text-primary-shade-50: rgb(128, 128, 128);
--color-dark-text-primary-tint-20: rgb(255, 255, 255);
--color-dark-text-primary-tint-40: rgb(255, 255, 255);
--color-dark-text-primary-inverted-alpha-40: rgba(0, 0, 0, 0.4);
--color-dark-text-primary-inverted-shade-30: rgb(0, 0, 0);
--color-dark-text-primary-inverted-shade-50: rgb(0, 0, 0);
--color-dark-text-secondary-shade-30: rgb(99, 99, 103);
--color-dark-text-secondary-shade-50: rgb(71, 71, 74);
--color-dark-text-secondary-tint-20: rgb(164, 164, 169);
--color-dark-text-secondary-tint-40: rgb(187, 187, 190);
--color-dark-text-secondary-inverted-shade-30: rgb(97, 97, 99);
--color-dark-text-secondary-inverted-shade-50: rgb(69, 69, 71);
--color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
--color-light-bg-accent-shade-7: rgb(222, 46, 33);
--color-light-bg-accent-shade-10: rgb(215, 44, 32);
--color-light-bg-accent-shade-15: rgb(203, 42, 31);
--color-light-bg-accent-shade-30: rgb(167, 34, 25);
--color-light-bg-neutral-alpha-30: rgba(220, 220, 221, 0.3);
--color-light-bg-neutral-shade-7: rgb(205, 205, 206);
--color-light-bg-neutral-shade-10: rgb(198, 198, 199);
--color-light-bg-neutral-shade-15: rgb(187, 187, 188);
--color-light-bg-neutral-shade-30: rgb(154, 154, 155);
--color-light-bg-neutral-tint-15: rgb(225, 225, 226);
--color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
--color-light-bg-primary-inverted-alpha-3: rgba(18, 18, 18, 0.03);
--color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
--color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 18, 0.1);
--color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
--color-light-bg-primary-inverted-alpha-20: rgba(18, 18, 18, 0.2);
--color-light-bg-primary-inverted-alpha-40: rgba(18, 18, 18, 0.4);
--color-light-bg-primary-inverted-alpha-50: rgba(18, 18, 18, 0.5);
--color-light-bg-secondary-inverted-alpha-7: rgba(32, 32, 34, 0.07);
--color-light-bg-secondary-inverted-alpha-15: rgba(32, 32, 34, 0.15);
--color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
--color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
--color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
--color-light-graphic-accent-shade-10: rgb(215, 44, 32);
--color-light-graphic-accent-shade-30: rgb(167, 34, 25);
--color-light-graphic-negative-tint-30: rgb(245, 133, 125);
--color-light-graphic-negative-tint-50: rgb(248, 168, 162);
--color-light-graphic-neutral-shade-10: rgb(198, 198, 199);
--color-light-graphic-positive-shade-10: rgb(42, 175, 99);
--color-light-graphic-positive-shade-30: rgb(33, 136, 77);
--color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
--color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
--color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
--color-light-graphic-primary-tint-30: rgb(77, 77, 77);
--color-light-graphic-primary-tint-50: rgb(128, 128, 128);
--color-light-graphic-primary-shade-10: rgb(0, 0, 0);
--color-light-graphic-primary-shade-30: rgb(0, 0, 0);
--color-light-graphic-secondary-alpha-30: rgba(138, 138, 142, 0.3);
--color-light-graphic-secondary-shade-30: rgb(97, 97, 99);
--color-light-graphic-secondary-shade-50: rgb(69, 69, 71);
--color-light-text-link-tint-30: rgb(77, 156, 244);
--color-light-text-link-tint-50: rgb(128, 185, 247);
--color-light-text-link-shade-20: rgb(0, 91, 191);
--color-light-text-link-shade-40: rgb(0, 68, 143);
--color-light-text-primary-alpha-30: rgba(0, 0, 0, 0.3);
--color-light-text-primary-tint-30: rgb(77, 77, 77);
--color-light-text-primary-tint-50: rgb(128, 128, 128);
--color-light-text-primary-shade-20: rgb(0, 0, 0);
--color-light-text-primary-shade-40: rgb(0, 0, 0);
--color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
--color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
--color-light-text-primary-inverted-tint-50: rgb(255, 255, 255);
--color-light-text-secondary-tint-30: rgb(173, 173, 176);
--color-light-text-secondary-tint-50: rgb(197, 197, 199);
--color-light-text-secondary-shade-20: rgb(110, 110, 114);
--color-light-text-secondary-shade-40: rgb(83, 83, 85);
--color-light-text-secondary-inverted-tint-30: rgb(175, 175, 179);
--color-light-text-secondary-inverted-tint-50: rgb(198, 198, 201);
--color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
--color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
}
Loading

0 comments on commit aa64366

Please sign in to comment.