fix: 🐛 inlcude "addon" folder in rose style formatting command (#1458)
This commit is contained in:
Randall Morey authored and 
GitHub committed
1 parent
ee8182e262
commit
2709ce925f
3 files changed
+160
-57
No files matched your search
@@ -11,8 +11,10 @@
|
||||
--token-color-border-warning: var(--token-color-palette-amber-100);
|
||||
--token-color-border-critical: var(--token-color-palette-red-100);
|
||||
--token-color-focus-action-internal: var(--token-color-palette-blue-300);
|
||||
|
||||
// --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
|
||||
--token-color-focus-critical-internal: var(--token-color-palette-red-300);
|
||||
|
||||
// --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
|
||||
--token-color-foreground-strong: var(--token-color-palette-neutral-700);
|
||||
--token-color-foreground-primary: var(--token-color-palette-neutral-600);
|
||||
@@ -23,26 +25,48 @@
|
||||
--token-color-foreground-action-hover: var(--token-color-palette-blue-300);
|
||||
--token-color-foreground-action-active: var(--token-color-palette-blue-400);
|
||||
--token-color-foreground-highlight: var(--token-color-palette-purple-200);
|
||||
--token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300);
|
||||
--token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500);
|
||||
--token-color-foreground-highlight-on-surface: var(
|
||||
--token-color-palette-purple-300
|
||||
);
|
||||
--token-color-foreground-highlight-high-contrast: var(
|
||||
--token-color-palette-purple-500
|
||||
);
|
||||
--token-color-foreground-success: var(--token-color-palette-green-200);
|
||||
--token-color-foreground-success-on-surface: var(--token-color-palette-green-300);
|
||||
--token-color-foreground-success-high-contrast: var(--token-color-palette-green-500);
|
||||
--token-color-foreground-success-on-surface: var(
|
||||
--token-color-palette-green-300
|
||||
);
|
||||
--token-color-foreground-success-high-contrast: var(
|
||||
--token-color-palette-green-500
|
||||
);
|
||||
--token-color-foreground-warning: var(--token-color-palette-amber-200);
|
||||
--token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300);
|
||||
--token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500);
|
||||
--token-color-foreground-warning-on-surface: var(
|
||||
--token-color-palette-amber-300
|
||||
);
|
||||
--token-color-foreground-warning-high-contrast: var(
|
||||
--token-color-palette-amber-500
|
||||
);
|
||||
--token-color-foreground-critical: var(--token-color-palette-red-200);
|
||||
--token-color-foreground-critical-on-surface: var(--token-color-palette-red-300);
|
||||
--token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500);
|
||||
--token-color-foreground-critical-on-surface: var(
|
||||
--token-color-palette-red-300
|
||||
);
|
||||
--token-color-foreground-critical-high-contrast: var(
|
||||
--token-color-palette-red-500
|
||||
);
|
||||
--token-color-page-primary: var(--token-color-palette-neutral-0);
|
||||
--token-color-page-faint: var(--token-color-palette-neutral-50);
|
||||
--token-color-surface-primary: var(--token-color-palette-neutral-0);
|
||||
--token-color-surface-faint: var(--token-color-palette-neutral-50);
|
||||
--token-color-surface-strong: var(--token-color-palette-neutral-100);
|
||||
--token-color-surface-interactive: var(--token-color-palette-neutral-0);
|
||||
--token-color-surface-interactive-hover: var(--token-color-palette-neutral-100);
|
||||
--token-color-surface-interactive-active: var(--token-color-palette-neutral-200);
|
||||
--token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50);
|
||||
--token-color-surface-interactive-hover: var(
|
||||
--token-color-palette-neutral-100
|
||||
);
|
||||
--token-color-surface-interactive-active: var(
|
||||
--token-color-palette-neutral-200
|
||||
);
|
||||
--token-color-surface-interactive-disabled: var(
|
||||
--token-color-palette-neutral-50
|
||||
);
|
||||
--token-color-surface-action: var(--token-color-palette-blue-50);
|
||||
--token-color-surface-highlight: var(--token-color-palette-purple-50);
|
||||
--token-color-surface-success: var(--token-color-palette-green-50);
|
||||
@@ -117,46 +141,117 @@
|
||||
// --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
|
||||
// --token-color-waypoint-gradient-faint-stop: #e0fcff;
|
||||
|
||||
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px var(--token-color-palette-alpha-100);
|
||||
--token-elevation-low-box-shadow: 0px 1px 1px 0px var(--token-color-palette-neutral-500-alpha-50), 0px 2px 2px 0px var(--token-color-palette-neutral-500-alpha-50);
|
||||
--token-elevation-mid-box-shadow: 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 8px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-elevation-high-box-shadow: 0px 2px 3px 0px var(--token-color-palette-neutral-500-alpha-100), 0px 16px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-elevation-higher-box-shadow: 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 12px 28px 0px var(--token-color-palette-neutral-500-alpha-200);
|
||||
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px var(--token-color-palette-neutral-600-alpha-100), 0px 12px 24px 0px var(--token-color-palette-neutral-600-alpha-200);
|
||||
--token-surface-inset-box-shadow: inset 0 0 0 1px var(--token-color-palette-neutral-500-alpha-200), inset 0px 1px 2px 1px var(--token-color-palette-alpha-100);
|
||||
--token-surface-base-box-shadow: 0 0 0 1px var(--token-color-palette-alpha-200);
|
||||
--token-surface-low-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-100), 0px 1px 1px 0px var(--token-color-palette-neutral-500-alpha-50), 0px 2px 2px 0px var(--token-color-palette-neutral-500-alpha-50);
|
||||
--token-surface-mid-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-100), 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 8px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-surface-high-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-200), 0px 2px 3px 0px var(--token-color-palette-neutral-500-alpha-100), 0px 16px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-surface-higher-box-shadow: 0 0 0 1px var(--token-color-palette-alpha-200), 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 12px 28px 0px var(--token-color-palette-neutral-500-alpha-200);
|
||||
--token-surface-overlay-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-600-alpha-100), 0px 2px 3px 0px var(--token-color-palette-neutral-600-alpha-100), 0px 12px 24px 0px var(--token-color-palette-neutral-600-alpha-200);
|
||||
--token-focus-ring-action-box-shadow: inset 0 0 0 1px var(--token-color-palette-blue-300), 0 0 0 3px var(--token-color-focus-action-external);
|
||||
--token-focus-ring-critical-box-shadow: inset 0 0 0 1px var(--token-color-palette-red-300), 0 0 0 3px var(--token-color-focus-critical-external);
|
||||
--token-elevation-inset-box-shadow: inset 0 1px 2px 1px
|
||||
var(--token-color-palette-alpha-100);
|
||||
--token-elevation-low-box-shadow: 0 1px 1px 0
|
||||
var(--token-color-palette-neutral-500-alpha-50),
|
||||
0 2px 2px 0 var(--token-color-palette-neutral-500-alpha-50);
|
||||
--token-elevation-mid-box-shadow: 0 2px 3px 0
|
||||
var(--token-color-palette-alpha-100),
|
||||
0 8px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-elevation-high-box-shadow: 0 2px 3px 0
|
||||
var(--token-color-palette-neutral-500-alpha-100),
|
||||
0 16px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-elevation-higher-box-shadow: 0 2px 3px 0
|
||||
var(--token-color-palette-alpha-100),
|
||||
0 12px 28px 0 var(--token-color-palette-neutral-500-alpha-200);
|
||||
--token-elevation-overlay-box-shadow: 0 2px 3px 0
|
||||
var(--token-color-palette-neutral-600-alpha-100),
|
||||
0 12px 24px 0 var(--token-color-palette-neutral-600-alpha-200);
|
||||
--token-surface-inset-box-shadow: inset 0 0 0 1px
|
||||
var(--token-color-palette-neutral-500-alpha-200),
|
||||
inset 0 1px 2px 1px var(--token-color-palette-alpha-100);
|
||||
--token-surface-base-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-alpha-200);
|
||||
--token-surface-low-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-neutral-500-alpha-100),
|
||||
0 1px 1px 0 var(--token-color-palette-neutral-500-alpha-50),
|
||||
0 2px 2px 0 var(--token-color-palette-neutral-500-alpha-50);
|
||||
--token-surface-mid-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-neutral-500-alpha-100),
|
||||
0 2px 3px 0 var(--token-color-palette-alpha-100),
|
||||
0 8px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-surface-high-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-neutral-500-alpha-200),
|
||||
0 2px 3px 0 var(--token-color-palette-neutral-500-alpha-100),
|
||||
0 16px 16px -10px var(--token-color-palette-alpha-200);
|
||||
--token-surface-higher-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-alpha-200),
|
||||
0 2px 3px 0 var(--token-color-palette-alpha-100),
|
||||
0 12px 28px 0 var(--token-color-palette-neutral-500-alpha-200);
|
||||
--token-surface-overlay-box-shadow: 0 0 0 1px
|
||||
var(--token-color-palette-neutral-600-alpha-100),
|
||||
0 2px 3px 0 var(--token-color-palette-neutral-600-alpha-100),
|
||||
0 12px 24px 0 var(--token-color-palette-neutral-600-alpha-200);
|
||||
--token-focus-ring-action-box-shadow: inset 0 0 0 1px
|
||||
var(--token-color-palette-blue-300),
|
||||
0 0 0 3px var(--token-color-focus-action-external);
|
||||
--token-focus-ring-critical-box-shadow: inset 0 0 0 1px
|
||||
var(--token-color-palette-red-300),
|
||||
0 0 0 3px var(--token-color-focus-critical-external);
|
||||
--token-form-label-color: var(--token-color-palette-neutral-700);
|
||||
--token-form-legend-color: var(--token-color-palette-neutral-700);
|
||||
--token-form-helper-text-color: var(--token-color-palette-neutral-500);
|
||||
--token-form-indicator-optional-color: var(--token-color-palette-neutral-500);
|
||||
--token-form-error-color: var(--token-color-palette-red-300);
|
||||
|
||||
--token-form-control-base-foreground-value-color: var(--token-color-palette-neutral-700);
|
||||
--token-form-control-base-foreground-placeholder-color: var(--token-color-palette-neutral-500);
|
||||
--token-form-control-base-surface-color-default: var(--token-color-palette-neutral-0);
|
||||
--token-form-control-base-surface-color-hover: var(--token-color-palette-neutral-100);
|
||||
--token-form-control-base-border-color-default: var(--token-color-palette-neutral-400);
|
||||
--token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500);
|
||||
--token-form-control-checked-foreground-color: var(--token-color-palette-neutral-0);
|
||||
--token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200);
|
||||
--token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300);
|
||||
--token-form-control-checked-border-color-default: var(--token-color-palette-blue-300);
|
||||
--token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400);
|
||||
--token-form-control-invalid-border-color-default: var(--token-color-palette-red-300);
|
||||
--token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400);
|
||||
--token-form-control-readonly-foreground-color: var(--token-color-palette-neutral-600);
|
||||
--token-form-control-readonly-surface-color: var(--token-color-palette-neutral-100);
|
||||
--token-form-control-readonly-border-color: var(--token-color-palette-alpha-100);
|
||||
--token-form-control-disabled-foreground-color: var(--token-color-palette-neutral-400);
|
||||
--token-form-control-disabled-surface-color: var(--token-color-palette-neutral-50);
|
||||
--token-form-control-disabled-border-color: var(--token-color-palette-alpha-200);
|
||||
|
||||
--token-form-toggle-base-surface-color-default: var(--token-color-palette-neutral-100); /* the toggle has a different base surface color, compared to the other controls */
|
||||
--token-form-control-base-foreground-value-color: var(
|
||||
--token-color-palette-neutral-700
|
||||
);
|
||||
--token-form-control-base-foreground-placeholder-color: var(
|
||||
--token-color-palette-neutral-500
|
||||
);
|
||||
--token-form-control-base-surface-color-default: var(
|
||||
--token-color-palette-neutral-0
|
||||
);
|
||||
--token-form-control-base-surface-color-hover: var(
|
||||
--token-color-palette-neutral-100
|
||||
);
|
||||
--token-form-control-base-border-color-default: var(
|
||||
--token-color-palette-neutral-400
|
||||
);
|
||||
--token-form-control-base-border-color-hover: var(
|
||||
--token-color-palette-neutral-500
|
||||
);
|
||||
--token-form-control-checked-foreground-color: var(
|
||||
--token-color-palette-neutral-0
|
||||
);
|
||||
--token-form-control-checked-surface-color-default: var(
|
||||
--token-color-palette-blue-200
|
||||
);
|
||||
--token-form-control-checked-surface-color-hover: var(
|
||||
--token-color-palette-blue-300
|
||||
);
|
||||
--token-form-control-checked-border-color-default: var(
|
||||
--token-color-palette-blue-300
|
||||
);
|
||||
--token-form-control-checked-border-color-hover: var(
|
||||
--token-color-palette-blue-400
|
||||
);
|
||||
--token-form-control-invalid-border-color-default: var(
|
||||
--token-color-palette-red-300
|
||||
);
|
||||
--token-form-control-invalid-border-color-hover: var(
|
||||
--token-color-palette-red-400
|
||||
);
|
||||
--token-form-control-readonly-foreground-color: var(
|
||||
--token-color-palette-neutral-600
|
||||
);
|
||||
--token-form-control-readonly-surface-color: var(
|
||||
--token-color-palette-neutral-100
|
||||
);
|
||||
--token-form-control-readonly-border-color: var(
|
||||
--token-color-palette-alpha-100
|
||||
);
|
||||
--token-form-control-disabled-foreground-color: var(
|
||||
--token-color-palette-neutral-400
|
||||
);
|
||||
--token-form-control-disabled-surface-color: var(
|
||||
--token-color-palette-neutral-50
|
||||
);
|
||||
--token-form-control-disabled-border-color: var(
|
||||
--token-color-palette-alpha-200
|
||||
);
|
||||
--token-form-toggle-base-surface-color-default: var(
|
||||
--token-color-palette-neutral-100
|
||||
); /* the toggle has a different base surface color, compared to the other controls */
|
||||
}
|
||||
@@ -36,8 +36,7 @@
|
||||
--token-color-palette-red-200: #c00005;
|
||||
--token-color-palette-red-100: #940004;
|
||||
--token-color-palette-red-50: #51130a;
|
||||
|
||||
--token-color-palette-neutral-700: #ffffff;
|
||||
--token-color-palette-neutral-700: #fff;
|
||||
--token-color-palette-neutral-600: #fafafa;
|
||||
--token-color-palette-neutral-500: #f1f2f3;
|
||||
--token-color-palette-neutral-400: #dedfe3;
|
||||
@@ -46,7 +45,6 @@
|
||||
--token-color-palette-neutral-100: #656a76;
|
||||
--token-color-palette-neutral-50: #3b3d45;
|
||||
--token-color-palette-neutral-0: #0c0c0e;
|
||||
|
||||
--token-color-palette-alpha-300: #fafafa66;
|
||||
--token-color-palette-alpha-200: #dedfe333;
|
||||
--token-color-palette-alpha-100: #dedfe31a;
|
||||
@@ -65,12 +63,22 @@
|
||||
|
||||
// Tier 2 (HDS dark mode overrides)
|
||||
// These mappings improve contrast as needed in dark mode.
|
||||
--token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);
|
||||
--token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
|
||||
--token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
|
||||
--token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
|
||||
--token-color-foreground-highlight-on-surface: var(
|
||||
--token-color-palette-purple-400
|
||||
);
|
||||
--token-color-foreground-success-on-surface: var(
|
||||
--token-color-palette-green-400
|
||||
);
|
||||
--token-color-foreground-warning-on-surface: var(
|
||||
--token-color-palette-amber-400
|
||||
);
|
||||
--token-color-foreground-critical-on-surface: var(
|
||||
--token-color-palette-red-400
|
||||
);
|
||||
--token-color-surface-strong: var(--token-color-palette-neutral-50);
|
||||
--token-form-control-base-border-color-default: var(--token-color-palette-neutral-200);
|
||||
--token-form-control-base-border-color-default: var(
|
||||
--token-color-palette-neutral-200
|
||||
);
|
||||
}
|
||||
|
||||
// HDS Light Mode
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
"format:hbs": "prettier --write '{addon,tests}/**/*.hbs'",
|
||||
"format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
|
||||
"format:mdx": "prettier --write 'addon/**/*.mdx'",
|
||||
"format:sass": "prettier --write app/**/*.scss",
|
||||
"format:sass": "prettier --write '{addon,app}/**/*.scss'",
|
||||
"start": "ember serve",
|
||||
"test": "ember test",
|
||||
"test:ember-compatibility": "ember try:each",
|
||||
|
||||
Reference in new issue
Block a user