sdga-ui 1.0.7 → 1.0.9

package/theme/customizations/_footer.scss

@@ -1,82 +1,159 @@
 .dga-footer {
-    padding: 2.5rem 2rem;
+    padding: 0 2rem;
 
-    .dga-list-group-container {
-        gap: 1.5rem;
-        margin-bottom: 3rem;
+    .dga-footer-content {
+        justify-self: center;
+        display: flex;
+        max-width: 80rem;
+        width: 100%;
+        padding: var(--spacing-5xl, 2.5rem) 0 var(--spacing-3xl, 1.5rem) 0;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--Global-spacing-6xl, 3rem);
+        flex: 1 0 0;
+    }
+
+    .dga-footer-section-title {
+        display: flex;
+        padding-bottom: var(--spacing-md, 0.5rem);
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+        margin-bottom: 0;
+        font-size: $font-size-base;
+        font-weight: $font-weight-medium;
+    }
+
+    .dga-footer-nav-wrapper {
+        display: flex;
+        padding: var(--spacing-xl, 1rem) 0 var(--spacing-5xl, 2.5rem) 0;
+        align-items: flex-start;
+        align-content: flex-start;
+        gap: 1.5rem var(--spacing-3xl, 1.5rem);
+        align-self: stretch;
+        flex-wrap: wrap;
+    }
+
+    .dga-footer-nav-group {
+        display: flex;
+        min-width: 11.9rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md, 0.5rem);
+        flex: 1 0 0;
+    }
 
-        .dga-link-group {
-            min-width: 12rem;
+    .dga-footer-social {
+        display: flex;
+        min-width: 11.9rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-4xl, 2rem);
+        flex: 1 0 0;
+
+        .dga-footer-nav-group {
+            width: 100%;
         }
     }
-    .dga-social-container {
+
+    .dga-footer-meta {
+        display: flex;
+        padding: var(--spacing-xl, 1rem) 0;
+        align-items: center;
+        gap: var(--spacing-3xl, 1.5rem);
+        align-self: stretch;
+
+        .dga-footer-copyright-container {
             display: flex;
-            gap: 2rem;
             flex-direction: column;
-            flex-wrap: wrap;
-            min-width: 12rem;
-
-            & > div {
-                flex: 1;
-            }
+            align-items: flex-start;
+            gap: var(--spacing-md, 0.5rem);
+            align-self: stretch;
         }
 
-    .dga-footer-bottom {
-        margin-top: 1rem;
-
-        
+        .dga-footer-meta-content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--spacing-5xl, 2.5rem);
+            flex: 1 0 0;
+        }
 
-        .dga-footer-bottom-links {
+        .dga-footer-meta-links {
             display: flex;
+            align-items: flex-start;
+            align-content: flex-start;
+            gap: 1rem var(--spacing-xl, 1rem);
+            align-self: stretch;
             flex-wrap: wrap;
-            gap: 1rem;
-            margin-bottom: 2.5rem;
         }
-        
 
         .dga-footer-copyright {
-            margin-bottom: 0.5rem;
+            font-size: var(--Size-Text-typo-size-text-sm, 0.875rem);
+            font-style: normal;
+            font-weight: 600;
+            line-height: var(--Line-Height-Text-line-heights-text-sm, 1.25rem);
 
-            .dga-footer-copyright-links {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 1rem;
+            margin-bottom: 0;
+        }
 
-            }
+        .dga-footer-legal-links {
+            display: flex;
+            align-items: flex-start;
+            align-content: flex-start;
+            gap: 1rem var(--spacing-xl, 1rem);
+            flex-wrap: wrap;
         }
 
-        .dga-logo-container {
+        .dga-footer-logo {
             display: flex;
-            gap: 1rem;
             justify-content: flex-end;
-            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--spacing-xl, 1rem);
         }
 
     }
-}
 
-@media (max-width: $tablet) {
-    .dga-footer {
-        .dga-social-container {
+    @media (max-width: $tablet) {
+        .dga-footer-social {
+            padding: var(--spacing-xl, 1rem) 0;
+            gap: var(--spacing-5xl, 2.5rem);
+            flex-basis: 100%;
             flex-direction: row;
             flex-wrap: wrap;
         }
-        .dga-footer-bottom {
-            .dga-footer-bottom-links {
+
+        .dga-footer-content {
+            gap: 2.5;
+        }
+
+        .dga-footer-meta {
+            flex-direction: column;
+
+            .dga-footer-meta-content {
+                flex-direction: column;
                 justify-content: center;
-                padding: 2rem 0;
+                align-items: center;
+                gap: var(--spacing-4xl, 4rem);
             }
-            .dga-footer-copyright {
-                text-align: center;
-                padding: 2rem 0;
 
-                .dga-footer-copyright-links {
-                    justify-content: center;
-                }
+            .dga-footer-meta-links {
+                justify-content: center;
+            }
+
+            .dga-footer-copyright-container {
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: var(--spacing-md, 0.5rem);
             }
 
-            .dga-logo-container {
+            .dga-footer-logo {
+                width: 100%;
                 justify-content: space-between;
+                margin-top: 1rem;
             }
         }
     }

package/theme/customizations/_global.scss

@@ -6,8 +6,26 @@
 // Global button focus styling - applies to all button variants
 *:focus-visible {
   outline-offset: 2px !important;
-  outline: 2px solid #161616 !important;
-  border-color: $border-color !important;
+  outline: 2px solid $black !important;
+}
+
+.on-primary {
+  background-color: $primary-900;
+  color: $white;
+
+  --#{$prefix}body-bg: #{$primary-900};
+  --#{$prefix}body-color: #{$white};
+  --#{$prefix}text-muted: #{rgba($white, 0.8)};
+  --#{$prefix}border-color: #{rgba($white, 0.3)};
+
+  *:focus-visible {
+    outline-color: $white !important;
+  }
+}
+
+.list-unstyled {
+    padding-left: unset;
+    padding-right: unset;
 }
 
 // ============================================

package/theme/customizations/_links.scss

@@ -7,65 +7,37 @@
 
 // Define link color variants with their shades
 $link-variants: (
-  "primary": (
-    base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
+  "primary": (base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($primary-600, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($primary-400, var(--#{$prefix}link-opacity, 1)),
     hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
     active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "secondary": (
-    base: rgba($secondary-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($secondary-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($secondary-400, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($secondary-400, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($secondary-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($secondary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "success": (
-    base: rgba($success-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($success-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($success-400, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($success-400, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($success-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($success-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "danger": (
-    base: rgba($danger-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($danger-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($danger-400, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($danger-400, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($danger-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($danger-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "warning": (
-    base: rgba($warning-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($warning-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($warning-400, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($warning-400, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($warning-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($warning-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "info": (
-    base: rgba($info-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($info-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($info-400, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($info-400, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($info-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($info-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "neutral": (
-    base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1))),
+  "neutral": (base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
     hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
     active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "lavender": (
-    base: rgba($lavender-600, var(--#{$prefix}link-opacity, 1)),
-    base-decoration: rgba($lavender-600, var(--#{$prefix}link-decoration-opacity, 1)),
-    hover: rgba($lavender-500, var(--#{$prefix}link-opacity, 1)),
-    hover-decoration: rgba($lavender-500, var(--#{$prefix}link-decoration-opacity, 1)),
-    active: rgba($lavender-400, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($lavender-400, var(--#{$prefix}link-decoration-opacity, 1)) )
+    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)))
+);
+
+$on-primary-link-variants: (
+  "primary": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
+    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
+    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6))),
+  "neutral": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
+    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
+    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)))
 );
 
 // Generate link variant classes
+
 @each $name, $colors in $link-variants {
   .link-#{$name} {
     color: map-get($colors, base) !important;
@@ -87,13 +59,43 @@ $link-variants: (
       color: map-get($colors, active) !important;
       text-decoration-color: map-get($colors, active-decoration) !important;
     }
+
+    &.disabled {
+      color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+      pointer-events: none;
+    }
   }
 }
 
-a.disabled {
-  color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
-  text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+.on-primary {
+  @each $name, $colors in $on-primary-link-variants {
+    .link-#{$name} {
+      color: map-get($colors, base) !important;
+      text-decoration-color: map-get($colors, base-decoration) !important;
+
+      &:visited,
+      &:focus-visible {
+        color: map-get($colors, base) !important;
+        text-decoration-color: map-get($colors, base-decoration) !important;
+      }
 
-  pointer-events: none;
-}
+      &:hover,
+      &:focus {
+        color: map-get($colors, hover) !important;
+        text-decoration-color: map-get($colors, hover-decoration) !important;
+      }
 
+      &:active {
+        color: map-get($colors, active) !important;
+        text-decoration-color: map-get($colors, active-decoration) !important;
+      }
+
+      &.disabled {
+        color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+        text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+        pointer-events: none;
+      }
+    }
+  }
+}

package/theme/customizations/_toasts.scss

@@ -86,7 +86,6 @@ $toast-variants: (
     gap: .75rem;
 
     .btn-close {
-        padding: 0.5rem;
         position: absolute;
         top: 1rem;
         right: unset;
@@ -183,19 +182,19 @@ $toast-variants: (
             margin-inline-start: 0;
 
             button {
-                --#{$prefix}btn-color: #{$btn-secondary-color};
-                --#{$prefix}btn-bg: #{$btn-secondary-bg};
-                --#{$prefix}btn-border-color: #{$btn-secondary-border-color};
-                --#{$prefix}btn-hover-color: #{$btn-secondary-hover-color};
-                --#{$prefix}btn-hover-bg: #{$btn-secondary-hover-bg};
-                --#{$prefix}btn-hover-border-color: #{$btn-secondary-hover-border-color};
-                --#{$prefix}btn-focus-shadow-rgb: #{$btn-secondary-focus-shadow-rgb};
-                --#{$prefix}btn-active-color: #{$btn-secondary-active-color};
-                --#{$prefix}btn-active-bg: #{$btn-secondary-active-bg};
-                --#{$prefix}btn-active-border-color: #{$btn-secondary-active-border-color};
-                --#{$prefix}btn-disabled-color: #{$btn-secondary-disabled-color};
-                --#{$prefix}btn-disabled-bg: #{$btn-secondary-disabled-bg};
-                --#{$prefix}btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
+                --#{$prefix}btn-color: #{$black};
+                --#{$prefix}btn-bg: #{$secondary-100};
+                --#{$prefix}btn-border-color: #{$secondary-100};
+                --#{$prefix}btn-hover-color: #{$black};
+                --#{$prefix}btn-hover-bg: #{$secondary-200};
+                --#{$prefix}btn-hover-border-color: #{$secondary-200};
+                --#{$prefix}btn-focus-shadow-rgb: null;
+                --#{$prefix}btn-active-color: #{$black};
+                --#{$prefix}btn-active-bg: #{$secondary-200};
+                --#{$prefix}btn-active-border-color: #{$secondary-200};
+                --#{$prefix}btn-disabled-color: #{$secondary-400};
+                --#{$prefix}btn-disabled-bg: #{$secondary-200};
+                --#{$prefix}btn-disabled-border-color: #{$secondary-200};
             }
         }
     }

package/theme/dga-ui.scss

@@ -15,8 +15,8 @@
 // ============================================
 
 // Import all component customizations
-@import './customizations/links';
 @import './customizations/global';
+@import './customizations/links';
 @import './customizations/buttons';
 @import './customizations/cards';
 @import './customizations/alerts';
@@ -25,5 +25,4 @@
 @import './customizations/forms';
 @import './customizations/forms-switch';
 @import './customizations/tables';
-@import './customizations/contexts';
 @import './customizations/footer';

package/.editorconfig

@@ -1,23 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-trim_trailing_whitespace = true
-
-# Matches multiple files with brace expansion notation
-[*.{js,jsx,ts,tsx,json,css,scss,md,html,yml,yaml}]
-indent_style = space
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false
-max_line_length = off
-
-[Makefile]
-indent_style = tab

package/.github/workflows/deploy.yml

@@ -1,71 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  push:
-    tags:
-      - 'v*'
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      
-      - name: Wait for npm publish
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "Waiting for sdga-ui@$VERSION to be available on npm..."
-          for i in {1..30}; do
-            if npm view sdga-ui@$VERSION version 2>/dev/null; then
-              echo "Package sdga-ui@$VERSION is now available!"
-              exit 0
-            fi
-            echo "Attempt $i/30: Package not yet available, waiting 10 seconds..."
-            sleep 10
-          done
-          echo "Warning: Package may not be available yet, proceeding anyway..."
-      
-      - name: Install dependencies
-        working-directory: ./demo-angular
-        run: npm run use:npm
-      
-      - name: Build Angular app
-        working-directory: ./demo-angular
-        run: npm run build:prod
-      
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: './demo-angular/dist/demo-angular/browser'
-  
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.github/workflows/publish.yml

@@ -1,36 +0,0 @@
-name: Publish to npm
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  build-and-publish:
-    runs-on: ubuntu-latest
-    permissions:
-      id-token: write  # Required for OIDC
-      contents: read
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org/'
-
-      - name: Update npm
-        run: npm install -g npm@latest
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build CSS
-        run: npm run build-css
-
-      # Trusted Publishing doesn't need NODE_AUTH_TOKEN
-      - name: Publish package to npm
-        run: npm publish --access public

package/.prettierignore

@@ -1,73 +0,0 @@
-# Dependencies
-node_modules
-bower_components
-
-# Production builds
-dist
-build
-out
-.next
-.nuxt
-.cache
-.parcel-cache
-
-# Package files
-*.min.js
-*.min.css
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Coverage and test reports
-coverage
-.nyc_output
-*.lcov
-
-# Environment and config
-.env
-.env.local
-.env.*.local
-
-# Git
-.git
-.gitignore
-
-# IDE and editors
-.vscode
-.idea
-*.swp
-*.swo
-*~
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Documentation
-CHANGELOG.md
-LICENSE
-
-# Generated files
-*.generated.*
-*.bundle.*
-
-# Assets
-*.png
-*.jpg
-*.jpeg
-*.gif
-*.svg
-*.ico
-*.pdf
-*.woff
-*.woff2
-*.ttf
-*.eot
-*.otf

package/.prettierrc

@@ -1,17 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "quoteProps": "as-needed",
-  "jsxSingleQuote": false,
-  "bracketSameLine": false,
-  "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "css",
-  "embeddedLanguageFormatting": "auto"
-}

package/demo-angular/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/demo-angular/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}