feat: Design tokens implementations for the dark theme

dist/dark.css

@@ -0,0 +1,313 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* Alert actions */
+
+.pgn__alert-message-wrapper .pgn__alert-actions .btn-primary,
+.pgn__alert-message-wrapper-stacked .pgn__alert-actions .btn-primary {
+  --pgn-btn-color: var(--pgn-color-btn-text-brand);
+  --pgn-btn-bg: var(--pgn-color-btn-bg-brand);
+  --pgn-btn-border-color: var(--pgn-color-btn-border-brand);
+  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-brand);
+  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-brand);
+  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-brand);
+  --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-brand);
+  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-brand);
+  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-brand);
+  --pgn-btn-active-color: var(--pgn-color-btn-active-text-brand);
+  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-brand);
+  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-brand);
+  --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-brand);
+  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-brand);
+  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-brand);
+  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-brand);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
+ */
+
+:root {
+  --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(255,255,255,0.15), 0px 2px 4px 0px rgba(255,255,255,0.15);
+  --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(255,255,255,0.15), 0px 8px 16px 0px rgba(255,255,255,0.15);
+  --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(255,255,255,0.15), 0px 10px 20px 0px rgba(255,255,255,0.15);
+  --pgn-elevation-box-shadow-level-4: 0px 8px 48px 0px rgba(255,255,255,0.15), 0px 20px 40px 0px rgba(255,255,255,0.15);
+  --pgn-color-light-base: #DDDFE2FF;
+  --pgn-color-primary-100: #8E9FBFFF;
+  --pgn-color-primary-500: #747E92FF;
+  --pgn-color-primary-base: #AEC7F6FF;
+  --pgn-color-primary-light: #292A2CFF;
+  --pgn-color-primary-border: #777792FF;
+  --pgn-color-brand-base: #CE80AAFF;
+  --pgn-color-text-base: #F8F8F8FF;
+  --pgn-color-text-primary: #DDDFE2FF;
+  --pgn-color-text-button: #112F6BFF;
+  --pgn-color-bg-light-overlay: #36383BFF;
+  --pgn-color-bg-hover: #383938FF;
+  --pgn-color-body-bg: #0D0D0EFF;
+  --pgn-color-header-bg: #0D0D0EFF;
+  --pgn-color-success-500: #3A8E41FF;
+  --pgn-color-success-base: #54CF5EFF;
+  --pgn-color-danger-base: #FFA07AFF;
+  --pgn-course-card-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 6px -2px rgba(255, 255, 255, 0.15), 0px 10px 15px -3px rgba(255, 255, 255, 0.15);
+  --pgn-elevation-box-shadow-base: var(--pgn-elevation-box-shadow-level-2);
+  --pgn-elevation-box-shadow-sm: var(--pgn-elevation-box-shadow-level-1);
+  --pgn-elevation-box-shadow-down-1: var(--pgn-elevation-box-shadow-level-1);
+  --pgn-elevation-box-shadow-lg: var(--pgn-elevation-box-shadow-level-3);
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' fill='%23AEC7F6FF' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/></svg>");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23AEC7F6FF' viewBox='-4 -4 8 8'%3e%3ccircle r='3' /%3e%3c/svg%3e");
+  --pgn-color-text-footer: var(--pgn-color-text-primary);
+  --pgn-color-bg-info: var(--pgn-color-primary-light);
+  --pgn-color-body-base: var(--pgn-color-text-base);
+  --pgn-color-accent-a: var(--pgn-color-primary-base);
+  --pgn-color-white: var(--pgn-color-body-bg); /** Header background color Profile page. */
+  --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-primary: var(--pgn-color-primary-light);
+  --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-bg-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-hover-text-primary: var(--pgn-color-text-primary);
+  --pgn-color-btn-hover-text-inverse-outline-primary: var(--pgn-color-text-button);
+  --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-light-base);
+  --pgn-color-btn-hover-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-border);
+  --pgn-color-btn-hover-border-primary: var(--pgn-color-primary-base);
+  --pgn-color-chip-border-base: var(--pgn-color-light-base);
+  --pgn-color-dropdown-border: var(--pgn-color-text-base);
+  --pgn-color-dropdown-bg: var(--pgn-color-body-bg);
+  --pgn-color-dropdown-link-active-base: var(--pgn-color-text-base);
+  --pgn-color-dropdown-link-active-bg: var(--pgn-color-primary-base);
+  --pgn-color-dropdown-link-hover-base: var(--pgn-color-body-bg);
+  --pgn-color-form-input-border: var(--pgn-color-primary-base);
+  --pgn-color-form-input-hover-border: var(--pgn-color-primary-base);
+  --pgn-color-dropdown-link-base: var(--pgn-color-body-base);
+  --pgn-color-dropdown-link-hover-bg: var(--pgn-color-body-base);
+  --pgn-color-form-input-base: var(--pgn-color-body-base);
+  --pgn-color-form-input-bg-base: var(--pgn-color-white);
+  --pgn-color-form-input-focus-bg: var(--pgn-color-white);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
+ */
+
+.bg-light {
+  background-color: var(--pgn-color-light-base) !important;
+}
+
+a.bg-light:hover,
+a.bg-light:focus,
+button.bg-light:hover,
+button.bg-light:focus {
+  background-color: var(--pgn-color-light-base) !important;
+}
+
+.text-light {
+  color: var(--pgn-color-light-base) !important;
+}
+
+a.text-light:hover,
+a.text-light:focus {
+  color: var(--pgn-color-light-base) !important;
+}
+
+.border-light {
+  border-color: var(--pgn-color-light-base) !important;
+}
+
+.bg-primary-100 {
+  background-color: var(--pgn-color-primary-100) !important;
+}
+
+a.bg-primary-100:hover,
+a.bg-primary-100:focus,
+button.bg-primary-100:hover,
+button.bg-primary-100:focus {
+  background-color: var(--pgn-color-primary-100) !important;
+}
+
+.text-primary-100 {
+  color: var(--pgn-color-primary-100) !important;
+}
+
+a.text-primary-100:hover,
+a.text-primary-100:focus {
+  color: var(--pgn-color-primary-100) !important;
+}
+
+.border-primary-100 {
+  border-color: var(--pgn-color-primary-100) !important;
+}
+
+.bg-primary-500 {
+  background-color: var(--pgn-color-primary-500) !important;
+}
+
+a.bg-primary-500:hover,
+a.bg-primary-500:focus,
+button.bg-primary-500:hover,
+button.bg-primary-500:focus {
+  background-color: var(--pgn-color-primary-500) !important;
+}
+
+.text-primary-500 {
+  color: var(--pgn-color-primary-500) !important;
+}
+
+a.text-primary-500:hover,
+a.text-primary-500:focus {
+  color: var(--pgn-color-primary-500) !important;
+}
+
+.border-primary-500 {
+  border-color: var(--pgn-color-primary-500) !important;
+}
+
+.bg-primary {
+  background-color: var(--pgn-color-primary-base) !important;
+}
+
+a.bg-primary:hover,
+a.bg-primary:focus,
+button.bg-primary:hover,
+button.bg-primary:focus {
+  background-color: var(--pgn-color-primary-base) !important;
+}
+
+.text-primary {
+  color: var(--pgn-color-primary-base) !important;
+}
+
+a.text-primary:hover,
+a.text-primary:focus {
+  color: var(--pgn-color-primary-base) !important;
+}
+
+.border-primary {
+  border-color: var(--pgn-color-primary-base) !important;
+}
+
+.bg-brand {
+  background-color: var(--pgn-color-brand-base) !important;
+}
+
+a.bg-brand:hover,
+a.bg-brand:focus,
+button.bg-brand:hover,
+button.bg-brand:focus {
+  background-color: var(--pgn-color-brand-base) !important;
+}
+
+.text-brand {
+  color: var(--pgn-color-brand-base) !important;
+}
+
+a.text-brand:hover,
+a.text-brand:focus {
+  color: var(--pgn-color-brand-base) !important;
+}
+
+.border-brand {
+  border-color: var(--pgn-color-brand-base) !important;
+}
+
+.bg-accent-a {
+  background-color: var(--pgn-color-accent-a) !important;
+}
+
+a.bg-accent-a:hover,
+a.bg-accent-a:focus,
+button.bg-accent-a:hover,
+button.bg-accent-a:focus {
+  background-color: var(--pgn-color-body-bg) !important;
+}
+
+.text-accent-a {
+  color: var(--pgn-color-accent-a) !important;
+}
+
+a.text-accent-a:hover,
+a.text-accent-a:focus {
+  color: var(--pgn-color-body-bg) !important;
+}
+
+.border-accent-a {
+  border-color: var(--pgn-color-accent-a) !important;
+}
+
+.bg-success-500 {
+  background-color: var(--pgn-color-success-500) !important;
+}
+
+a.bg-success-500:hover,
+a.bg-success-500:focus,
+button.bg-success-500:hover,
+button.bg-success-500:focus {
+  background-color: var(--pgn-color-success-500) !important;
+}
+
+.text-success-500 {
+  color: var(--pgn-color-success-500) !important;
+}
+
+a.text-success-500:hover,
+a.text-success-500:focus {
+  color: var(--pgn-color-success-500) !important;
+}
+
+.border-success-500 {
+  border-color: var(--pgn-color-success-500) !important;
+}
+
+.bg-success {
+  background-color: var(--pgn-color-success-base) !important;
+}
+
+a.bg-success:hover,
+a.bg-success:focus,
+button.bg-success:hover,
+button.bg-success:focus {
+  background-color: var(--pgn-color-success-base) !important;
+}
+
+.text-success {
+  color: var(--pgn-color-success-base) !important;
+}
+
+a.text-success:hover,
+a.text-success:focus {
+  color: var(--pgn-color-success-base) !important;
+}
+
+.border-success {
+  border-color: var(--pgn-color-success-base) !important;
+}
+
+.bg-danger {
+  background-color: var(--pgn-color-danger-base) !important;
+}
+
+a.bg-danger:hover,
+a.bg-danger:focus,
+button.bg-danger:hover,
+button.bg-danger:focus {
+  background-color: var(--pgn-color-danger-base) !important;
+}
+
+.text-danger {
+  color: var(--pgn-color-danger-base) !important;
+}
+
+a.text-danger:hover,
+a.text-danger:focus {
+  color: var(--pgn-color-danger-base) !important;
+}
+
+.border-danger {
+  border-color: var(--pgn-color-danger-base) !important;
+}