Skip to content

Accessibility options added and Purge css implemented #2573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sazedul-haque wants to merge 28 commits into
base: 4.0.0-dev
Choose a base branch
from
Open

Accessibility options added and Purge css implemented #2573

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
9938d69
Add responsive utility config & gated generation
sazedul-haque Apr 9, 2026
1f69b44
Add secondary/exception tokens and theme selector
sazedul-haque Apr 10, 2026
f7431b0
Add CVD/high-contrast themes & color tokens
sazedul-haque Apr 10, 2026
d85af25
Duplicate color variables removed
sazedul-haque Apr 11, 2026
d802d74
Merge branch '4.0.0-dev' into improve-core-utility
sazedul-haque Apr 11, 2026
980fd92
Condition removed from responsive utilities
sazedul-haque Apr 13, 2026
932f5ae
Use single quotes for SCSS @forward imports
sazedul-haque Apr 13, 2026
1158760
Integrate PurgeCSS/PostCSS and split SCSS rules
sazedul-haque Apr 13, 2026
b9533ed
Add high-contrast overrides for colorblind themes
sazedul-haque Apr 13, 2026
6b0a02f
Merge branch '4.0.0-dev' into improve-core-utility
sazedul-haque Apr 13, 2026
28e6f84
Theme colors updated
sazedul-haque Apr 15, 2026
b1a9207
svg color issue fixed
sazedul-haque Apr 15, 2026
64d844f
purge css condition updated
sazedul-haque Apr 15, 2026
74c5bf9
Accessibility options added to user preferences
sazedul-haque Apr 15, 2026
e4ce247
Merge branch '4.0.0-dev' into improve-core-utility
sazedul-haque Apr 15, 2026
48f7ba8
Merge branch '4.0.0-dev' into improve-core-utility
sazedul-haque Apr 16, 2026
c6f6521
Update _badges.scss
sazedul-haque Apr 16, 2026
557fe0e
Custom display text and html option support added
sazedul-haque Apr 16, 2026
a60cdf7
Update header.php
sazedul-haque Apr 16, 2026
28bc80e
Custom label and value added to font size options
sazedul-haque Apr 16, 2026
51cf03f
Update _avatars.scss
sazedul-haque Apr 16, 2026
50dc6d6
Missing selected style added
sazedul-haque Apr 16, 2026
e358795
Color variables updated
sazedul-haque Apr 16, 2026
6f0b35b
Content updated
sazedul-haque Apr 16, 2026
237fbd1
Moved purgecss config to a separate file
sazedul-haque Apr 16, 2026
a559890
webp images used instead of png
sazedul-haque Apr 16, 2026
9e67d4f
Unified accessibility sass files added
sazedul-haque Apr 16, 2026
bc93ebb
CVD colors updated
sazedul-haque Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/core/scss/components/_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,10 @@
background: $tutor-surface-l2;
}

&[data-selected='true'] {
background: $tutor-surface-l2;
}

&[data-disabled='true'] {
color: $tutor-text-subdued;
cursor: not-allowed;
Expand Down
2 changes: 1 addition & 1 deletion assets/core/scss/mixins/_avatars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
position: relative;
border-radius: $tutor-radius-full;
overflow: hidden;
background-color: $tutor-button-primary-soft;
background-color: $tutor-surface-brand-quaternary;
color: $tutor-text-primary;
flex-shrink: 0;
user-select: none;
Expand Down
2 changes: 1 addition & 1 deletion assets/core/scss/mixins/_badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@include tutor-typography('tiny', 'medium', 'secondary');
border-radius: $tutor-radius-sm;
padding-inline: $tutor-spacing-4;
display: flex;
display: inline-flex;
align-items: center;
gap: $tutor-spacing-3;
background-color: $tutor-actions-gray-secondary;
Expand Down
89 changes: 89 additions & 0 deletions assets/core/scss/themes/_dark-deuteranomaly.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// Dark Deuteranomaly Theme
// CVD variant for users with Deuteranomaly (shifted green cone cells — most common form) on a dark background.
// Replaces green/success tokens with Cyan palette and red/error tokens with Orange palette.

@use '../tokens' as *;

[data-tutor-theme='dark-deuteranomaly'] {
// =============================================================================
// SURFACE COLORS
// =============================================================================

--tutor-surface-warning: #{$tutor-gray-750};
--tutor-surface-warning-hover: #{$tutor-warning-900};
--tutor-surface-success: #{$tutor-cyan-900};
--tutor-surface-critical: #{$tutor-orange-900};

// =============================================================================
// TEXT COLORS
// =============================================================================

--tutor-text-success: #{$tutor-cyan-400};
--tutor-text-critical: #{$tutor-orange-600};
--tutor-text-critical-hover: #{$tutor-orange-700};
--tutor-text-warning: #{$tutor-orange-700};
--tutor-text-caution: #{$tutor-yellow-700};

// =============================================================================
// ICON COLORS
// =============================================================================

--tutor-icon-success-primary: #{$tutor-cyan-500};
--tutor-icon-success-secondary: #{$tutor-cyan-600};
--tutor-icon-exception4: #{$tutor-warning-400};
--tutor-icon-caution: #{$tutor-yellow-500};
--tutor-icon-critical: #{$tutor-orange-600};
--tutor-icon-critical-hover: #{$tutor-orange-700};
--tutor-icon-warning: #{$tutor-orange-700};
--tutor-icon-warning-secondary: #{$tutor-yellow-500};

// =============================================================================
// BUTTON COLORS
// =============================================================================

--tutor-button-destructive: #{$tutor-orange-600};
--tutor-button-destructive-hover: #{$tutor-orange-700};
--tutor-button-destructive-focused: #{$tutor-orange-600};
--tutor-button-destructive-soft: #{$tutor-orange-100};
--tutor-button-destructive-soft-hover: #{$tutor-orange-200};
--tutor-button-destructive-soft-focused: #{$tutor-orange-100};
--tutor-button-success: #{$tutor-cyan-500};
--tutor-button-success-hover: #{$tutor-cyan-600};
--tutor-button-success-focused: #{$tutor-cyan-500};

// =============================================================================
// BORDER COLORS
// =============================================================================

--tutor-border-warning: #{$tutor-yellow-300};
--tutor-border-warning-secondary: #{$tutor-orange-700};
--tutor-border-warning-tertiary: #{$tutor-orange-300};
--tutor-border-success: #{$tutor-cyan-300};
--tutor-border-success-secondary: #{$tutor-cyan-600};
--tutor-border-error: #{$tutor-orange-300};
--tutor-border-error-secondary: #{$tutor-orange-700};
--tutor-border-error-tertiary: #{$tutor-orange-400};

// =============================================================================
// ACTION COLORS
// =============================================================================

--tutor-actions-success-primary: #{$tutor-cyan-500};
--tutor-actions-success-secondary: #{$tutor-cyan-400};
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-success-exception: #{$tutor-cyan-950};
--tutor-actions-warning-primary: #{$tutor-orange-300};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-warning-tertiary: #{$tutor-orange-50};
--tutor-actions-warning-exception: #{$tutor-orange-50};
--tutor-actions-critical-primary: #{$tutor-orange-600};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
--tutor-actions-caution: #{$tutor-yellow-500};
--tutor-actions-caution-secondary: #{$tutor-yellow-100};
}

[data-tutor-theme='dark-deuteranomaly'][data-tutor-contrast='high'] {
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
}
89 changes: 89 additions & 0 deletions assets/core/scss/themes/_dark-deuteranopia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// Dark Deuteranopia Theme
// CVD variant for users with Deuteranopia (absent green cone cells) on a dark background.
// Replaces green/success tokens with Cyan palette and red/error tokens with Orange palette.

@use '../tokens' as *;

[data-tutor-theme='dark-deuteranopia'] {
// =============================================================================
// SURFACE COLORS
// =============================================================================

--tutor-surface-warning: #{$tutor-gray-750};
--tutor-surface-warning-hover: #{$tutor-warning-900};
--tutor-surface-success: #{$tutor-cyan-900};
--tutor-surface-critical: #{$tutor-orange-900};

// =============================================================================
// TEXT COLORS
// =============================================================================

--tutor-text-success: #{$tutor-cyan-400};
--tutor-text-critical: #{$tutor-orange-500};
--tutor-text-critical-hover: #{$tutor-orange-600};
--tutor-text-warning: #{$tutor-orange-600};
--tutor-text-caution: #{$tutor-yellow-600};

// =============================================================================
// ICON COLORS
// =============================================================================

--tutor-icon-success-primary: #{$tutor-cyan-600};
--tutor-icon-success-secondary: #{$tutor-cyan-700};
--tutor-icon-exception4: #{$tutor-warning-400};
--tutor-icon-caution: #{$tutor-yellow-500};
--tutor-icon-critical: #{$tutor-orange-500};
--tutor-icon-critical-hover: #{$tutor-orange-600};
--tutor-icon-warning: #{$tutor-orange-700};
--tutor-icon-warning-secondary: #{$tutor-yellow-500};

// =============================================================================
// BUTTON COLORS
// =============================================================================

--tutor-button-destructive: #{$tutor-orange-600};
--tutor-button-destructive-hover: #{$tutor-orange-700};
--tutor-button-destructive-focused: #{$tutor-orange-600};
--tutor-button-destructive-soft: #{$tutor-orange-100};
--tutor-button-destructive-soft-hover: #{$tutor-orange-200};
--tutor-button-destructive-soft-focused: #{$tutor-orange-100};
--tutor-button-success: #{$tutor-cyan-600};
--tutor-button-success-hover: #{$tutor-cyan-700};
--tutor-button-success-focused: #{$tutor-cyan-500};

// =============================================================================
// BORDER COLORS
// =============================================================================

--tutor-border-warning: #{$tutor-yellow-300};
--tutor-border-warning-secondary: #{$tutor-orange-700};
--tutor-border-warning-tertiary: #{$tutor-orange-300};
--tutor-border-success: #{$tutor-cyan-400};
--tutor-border-success-secondary: #{$tutor-cyan-600};
--tutor-border-error: #{$tutor-orange-400};
--tutor-border-error-secondary: #{$tutor-orange-600};
--tutor-border-error-tertiary: #{$tutor-orange-300};

// =============================================================================
// ACTION COLORS
// =============================================================================

--tutor-actions-success-primary: #{$tutor-cyan-500};
--tutor-actions-success-secondary: #{$tutor-cyan-400};
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-success-exception: #{$tutor-cyan-950};
--tutor-actions-warning-primary: #{$tutor-orange-300};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-warning-tertiary: #{$tutor-orange-50};
--tutor-actions-warning-exception: #{$tutor-orange-50};
--tutor-actions-critical-primary: #{$tutor-orange-600};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
--tutor-actions-caution: #{$tutor-yellow-500};
--tutor-actions-caution-secondary: #{$tutor-yellow-100};
}

[data-tutor-theme='dark-deuteranopia'][data-tutor-contrast='high'] {
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
}
46 changes: 46 additions & 0 deletions assets/core/scss/themes/_dark-high-contrast.scss
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@b-l-i-n-d b-l-i-n-d Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// Dark High-Contrast Theme
// Accessibility variant with increased contrast ratios for users who need
// higher foreground/background differentiation in dark mode.

@use '../tokens' as *;

[data-tutor-theme^='dark'][data-tutor-contrast='high'] {
// =============================================================================
// SURFACE COLORS
// =============================================================================
--tutor-surface-warning: #{$tutor-gray-750};

// =============================================================================
// TEXT COLORS
// =============================================================================
--tutor-text-primary: #{$tutor-gray-100};
--tutor-text-secondary: #{$tutor-gray-50};
--tutor-text-subdued: #{$tutor-gray-50};
--tutor-text-disabled: #{$tutor-gray-300};

// =============================================================================
// BORDER COLORS
// =============================================================================
--tutor-border-idle: #{$tutor-gray-400};
--tutor-border-hover: #{$tutor-gray-300};
--tutor-border-tertiary: #{$tutor-gray-300};
--tutor-border-brand: #{$tutor-brand-200};
--tutor-border-brand-secondary: #{$tutor-brand-800};
--tutor-border-brand-tertiary: #{$tutor-brand-700};

// =============================================================================
// ICON COLORS
// =============================================================================
--tutor-icon-idle: #{$tutor-gray-300};
--tutor-icon-hover: #{$tutor-gray-1};
--tutor-icon-secondary: #{$tutor-gray-500};
--tutor-icon-subdued: #{$tutor-gray-600};
--tutor-icon-disabled: #{$tutor-gray-600};

// =============================================================================
// ACTION COLORS
// =============================================================================
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
}
89 changes: 89 additions & 0 deletions assets/core/scss/themes/_dark-protanopia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// Dark Protanopia Theme
// CVD variant for users with Protanopia (absent red cone cells) on a dark background.
// Replaces green/success tokens with Cyan palette and red/error tokens with Orange palette.

@use '../tokens' as *;

[data-tutor-theme='dark-protanopia'] {
// =============================================================================
// SURFACE COLORS
// =============================================================================

--tutor-surface-warning: #{$tutor-gray-750};
--tutor-surface-warning-hover: #{$tutor-warning-900};
--tutor-surface-success: #{$tutor-cyan-900};
--tutor-surface-critical: #{$tutor-orange-900};

// =============================================================================
// TEXT COLORS
// =============================================================================

--tutor-text-success: #{$tutor-cyan-400};
--tutor-text-critical: #{$tutor-orange-600};
--tutor-text-critical-hover: #{$tutor-orange-700};
--tutor-text-warning: #{$tutor-orange-700};
--tutor-text-caution: #{$tutor-yellow-700};

// =============================================================================
// ICON COLORS
// =============================================================================

--tutor-icon-success-primary: #{$tutor-cyan-500};
--tutor-icon-success-secondary: #{$tutor-cyan-600};
--tutor-icon-exception4: #{$tutor-warning-400};
--tutor-icon-caution: #{$tutor-yellow-500};
--tutor-icon-critical: #{$tutor-orange-600};
--tutor-icon-critical-hover: #{$tutor-orange-700};
--tutor-icon-warning: #{$tutor-orange-700};
--tutor-icon-warning-secondary: #{$tutor-yellow-500};

// =============================================================================
// BUTTON COLORS
// =============================================================================

--tutor-button-destructive: #{$tutor-orange-600};
--tutor-button-destructive-hover: #{$tutor-orange-700};
--tutor-button-destructive-focused: #{$tutor-orange-600};
--tutor-button-destructive-soft: #{$tutor-orange-100};
--tutor-button-destructive-soft-hover: #{$tutor-orange-200};
--tutor-button-destructive-soft-focused: #{$tutor-orange-100};
--tutor-button-success: #{$tutor-cyan-500};
--tutor-button-success-hover: #{$tutor-cyan-600};
--tutor-button-success-focused: #{$tutor-cyan-500};

// =============================================================================
// BORDER COLORS
// =============================================================================

--tutor-border-warning: #{$tutor-yellow-300};
--tutor-border-warning-secondary: #{$tutor-orange-700};
--tutor-border-warning-tertiary: #{$tutor-orange-300};
--tutor-border-success: #{$tutor-cyan-300};
--tutor-border-success-secondary: #{$tutor-cyan-600};
--tutor-border-error: #{$tutor-orange-300};
--tutor-border-error-secondary: #{$tutor-orange-700};
--tutor-border-error-tertiary: #{$tutor-orange-400};

// =============================================================================
// ACTION COLORS
// =============================================================================

--tutor-actions-success-primary: #{$tutor-cyan-500};
--tutor-actions-success-secondary: #{$tutor-cyan-400};
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-success-exception: #{$tutor-cyan-950};
--tutor-actions-warning-primary: #{$tutor-orange-300};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-warning-tertiary: #{$tutor-orange-50};
--tutor-actions-warning-exception: #{$tutor-orange-50};
--tutor-actions-critical-primary: #{$tutor-orange-600};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
--tutor-actions-caution: #{$tutor-yellow-500};
--tutor-actions-caution-secondary: #{$tutor-yellow-100};
}

[data-tutor-theme='dark-protanopia'][data-tutor-contrast='high'] {
--tutor-actions-success-tertiary: #{$tutor-gray-700};
--tutor-actions-warning-secondary: #{$tutor-gray-700};
--tutor-actions-critical-secondary: #{$tutor-gray-700};
}
Loading
Loading