Skip to content

Commit

Permalink
Removes double dashes from css variable names
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobiasfabian
tobiasfabian committed Sep 11, 2023
1 parent 1f3e487 commit c7d2d78
Show file tree
Hide file tree
Showing 9 changed files with 8,220 additions and 12,280 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Design Guidlines
Version 1.1.0
Version 1.2.0

## Table of Contents

Expand Down
20,251 changes: 8,083 additions & 12,168 deletions blueprint-kirby/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion blueprint-kirby/public/assets/css/index.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion blueprint-kirby/public/assets/css/index.css.map
View file

Large diffs are not rendered by default.

170 changes: 85 additions & 85 deletions blueprint/develop/css/framework/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,74 +82,74 @@
--leter-spacing--display: -0.003em;

/* Color Primitives */
--color--white: hsla(0, 0%, 100%, 1);
--color--gray-50: hsla(0, 0%, 95%, 1);
--color--gray-100: hsla(0, 0%, 90%, 1);
--color--gray-200: hsla(0, 0%, 80%, 1);
--color--gray-300: hsla(0, 0%, 70%, 1);
--color--gray-400: hsla(0, 0%, 60%, 1);
--color--gray-500: hsla(0, 0%, 50%, 1);
--color--gray-600: hsla(0, 0%, 40%, 1);
--color--gray-700: hsla(0, 0%, 30%, 1);
--color--gray-800: hsla(0, 0%, 20%, 1);
--color--gray-900: hsla(0, 0%, 10%, 1);
--color--gray-950: hsla(0, 0%, 5%, 1);
--color--black: hsla(0, 0%, 0%, 1);

--color--red-50: hsla(360, 100%, 95%, 1);
--color--red-100: hsla(360, 100%, 90%, 1);
--color--red-200: hsla(360, 100%, 80%, 1);
--color--red-300: hsla(360, 100%, 70%, 1);
--color--red-400: hsla(360, 100%, 60%, 1);
--color--red-500: hsla(360, 100%, 50%, 1);
--color--red-600: hsla(360, 100%, 40%, 1);
--color--red-700: hsla(360, 100%, 30%, 1);
--color--red-800: hsla(360, 100%, 20%, 1);
--color--red-900: hsla(360, 100%, 10%, 1);

--color--yellow-50: hsla(55, 100%, 95%, 1);
--color--yellow-100: hsla(55, 100%, 90%, 1);
--color--yellow-200: hsla(55, 100%, 80%, 1);
--color--yellow-300: hsla(55, 100%, 70%, 1);
--color--yellow-400: hsla(55, 100%, 60%, 1);
--color--yellow-500: hsla(55, 100%, 50%, 1);
--color--yellow-600: hsla(55, 100%, 40%, 1);
--color--yellow-700: hsla(55, 100%, 30%, 1);
--color--yellow-800: hsla(55, 100%, 20%, 1);
--color--yellow-900: hsla(55, 100%, 10%, 1);
--color-white: hsla(0, 0%, 100%, 1);
--color-gray-50: hsla(0, 0%, 95%, 1);
--color-gray-100: hsla(0, 0%, 90%, 1);
--color-gray-200: hsla(0, 0%, 80%, 1);
--color-gray-300: hsla(0, 0%, 70%, 1);
--color-gray-400: hsla(0, 0%, 60%, 1);
--color-gray-500: hsla(0, 0%, 50%, 1);
--color-gray-600: hsla(0, 0%, 40%, 1);
--color-gray-700: hsla(0, 0%, 30%, 1);
--color-gray-800: hsla(0, 0%, 20%, 1);
--color-gray-900: hsla(0, 0%, 10%, 1);
--color-gray-950: hsla(0, 0%, 5%, 1);
--color-black: hsla(0, 0%, 0%, 1);

--color-red-50: hsla(360, 100%, 95%, 1);
--color-red-100: hsla(360, 100%, 90%, 1);
--color-red-200: hsla(360, 100%, 80%, 1);
--color-red-300: hsla(360, 100%, 70%, 1);
--color-red-400: hsla(360, 100%, 60%, 1);
--color-red-500: hsla(360, 100%, 50%, 1);
--color-red-600: hsla(360, 100%, 40%, 1);
--color-red-700: hsla(360, 100%, 30%, 1);
--color-red-800: hsla(360, 100%, 20%, 1);
--color-red-900: hsla(360, 100%, 10%, 1);

--color-yellow-50: hsla(55, 100%, 95%, 1);
--color-yellow-100: hsla(55, 100%, 90%, 1);
--color-yellow-200: hsla(55, 100%, 80%, 1);
--color-yellow-300: hsla(55, 100%, 70%, 1);
--color-yellow-400: hsla(55, 100%, 60%, 1);
--color-yellow-500: hsla(55, 100%, 50%, 1);
--color-yellow-600: hsla(55, 100%, 40%, 1);
--color-yellow-700: hsla(55, 100%, 30%, 1);
--color-yellow-800: hsla(55, 100%, 20%, 1);
--color-yellow-900: hsla(55, 100%, 10%, 1);

/* Foundation Colors */
--color--primary-a: var(--color--black);
--color--primary-b: var(--color--white);
--color--negative: var(--color--red-400);
--color--warning: var(--color--yellow-400);
--color--positive: var(--color--green-400);
--color-primary-a: var(--color-black);
--color-primary-b: var(--color-white);
--color-negative: var(--color-red-400);
--color-warning: var(--color-yellow-400);
--color-positive: var(--color-green-400);

/* Core Colors */
--color--background-primary: var(--color--primary-a);
--color--background-secondary: var(--color--gray-50);
--color--background-tertiary: var(--color--gray-100);
--color--background-primary-inverse: var(--color--primary-b);
--color--background-secondary-inverse: var(--color--gray-50);

--color--content-primary: var(--color--primary-b);
--color--content-secondary: var(--color--gray-600);
--color--content-tertiary: var(--color--gray-500);
--color--content-primary-inverse: var(--color--primary-a);
--color--content-secondary-inverse: var(--color--gray-300);
--color--content-tertiary-inverse: var(--color--gray-400);

--color--border-opaque: var(--color--gray-200);
--color--border-transparent: color-mix(in hsl, var(--color--primary-a) 8%, transparent);
--color--border-selected: var(--color--content-primary);
--color--border-opaque-inverse: var(--color--gray-700);
--color--border-transparent-inverse: color-mix(in hsl, var(--color--primary-b) 8%, transparent);
--color--border-selected-inverse: var(--color--primary-b);
--color-background-primary: var(--color-primary-b);
--color-background-secondary: var(--color-gray-50);
--color-background-tertiary: var(--color-gray-100);
--color-background-primary-inverse: var(--color-primary-a);
--color-background-secondary-inverse: var(--color-gray-800);

--color-content-primary: var(--color-black);
--color-content-secondary: var(--color-gray-600);
--color-content-tertiary: var(--color-gray-500);
--color-content-primary-inverse: var(--color-white);
--color-content-secondary-inverse: var(--color-gray-300);
--color-content-tertiary-inverse: var(--color-gray-400);

--color-border-opaque: var(--color-gray-200);
--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);
--color-border-selected: var(--color-content-primary);
--color-border-opaque-inverse: var(--color-gray-700);
--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 8%, transparent);
--color-border-selected-inverse: var(--color-primary-b);

/* Shadows */
--box-shadow: 0 1px 10px -10px rgba(0,0,0,0.1),
0 1.5px 20px -10px rgba(0,0,0,0.1),
0 2px 30px -10px rgba(0,0,0,0.1);
0 1.5px 20px -10px rgba(0,0,0,0.1),
0 2px 30px -10px rgba(0,0,0,0.1);

/* Border */
--border-radius: 0.5rem;
Expand All @@ -158,31 +158,31 @@

@media (prefers-color-scheme: dark) {
/* Foundation Colors */
--color--primary-a: var(--color--gray-100);
--color--primary-b: var(--color--gray-900);
--color--negative: var(--color--red-600);
--color--warning: var(--color--yellow-600);
--color--positive: var(--color--green-600);
--color-primary-a: var(--color-gray-100);
--color-primary-b: var(--color-gray-900);
--color-negative: var(--color-red-600);
--color-warning: var(--color-yellow-600);
--color-positive: var(--color-green-600);

/* Core Colors */
--color--background-primary: var(--color--primary-b);
--color--background-secondary: var(--color--gray-900);
--color--background-tertiary: var(--color--gray-800);
--color--background-primary-inverse: var(--color--gray-200);
--color--background-secondary-inverse: var(--color--gray-300);

--color--content-primary: var(--color--gray-100);
--color--content-secondary: var(--color--gray-200);
--color--content-tertiary: var(--color--gray-300);
--color--content-primary-inverse: var(--color--black);
--color--content-secondary-inverse: var(--color--gray-800);
--color--content-tertiary-inverse: var(--color--gray-700);

--color--border-opaque: var(--color--gray-900);
--color--border-transparent: color-mix(in hsl, var(--color--primary-a) 8%, transparent);
--color--border-selected: var(--color--primary-a);
--color--border-opaque-inverse: var(--color--gray-700);
--color--border-transparent-inverse: color-mix(in hsl, var(--color--primary-b) 20%, transparent);
--color--border-selected-inverse: var(--color--primary-b);
--color-background-primary: var(--color-primary-b);
--color-background-secondary: var(--color-gray-900);
--color-background-tertiary: var(--color-gray-800);
--color-background-primary-inverse: var(--color-gray-200);
--color-background-secondary-inverse: var(--color-gray-300);

--color-content-primary: var(--color-gray-100);
--color-content-secondary: var(--color-gray-200);
--color-content-tertiary: var(--color-gray-300);
--color-content-primary-inverse: var(--color-black);
--color-content-secondary-inverse: var(--color-gray-800);
--color-content-tertiary-inverse: var(--color-gray-700);

--color-border-opaque: var(--color-gray-900);
--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);
--color-border-selected: var(--color-primary-a);
--color-border-opaque-inverse: var(--color-gray-700);
--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 20%, transparent);
--color-border-selected-inverse: var(--color-primary-b);
}
}
55 changes: 40 additions & 15 deletions blueprint/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c7d2d78

Please sign in to comment.